/*
  ResumeNest Design Foundation - Stage 01
  Role: Aria, UI/UX and motion design specialist
  Direction: Warm Precision - editorial, trusted, human
  Constraint: one intentional visual world, no dark/light toggle
*/

:root {
  /* ------------------------------------------------------------ */
  /* Brand accent exploration                                      */
  /* ------------------------------------------------------------ */
  --accent-option-sienna-hsl: 18 72% 46%; /* #ca5521 - authority, warmth, editorial energy */
  --accent-option-forest-hsl: 154 42% 28%; /* #296647 - trust, growth, calm competence */
  --accent-option-indigo-hsl: 248 79% 58%; /* #6048e8 - precision, ambition, high tech */
  --accent-selected-hsl: 18 72% 46%; /* selected: burnt sienna-orange */
  --accent-selected-hex: #ca5521; /* strongest fit: human warmth without looking playful */

  /* ------------------------------------------------------------ */
  /* Color tokens - brand accent                                  */
  /* ------------------------------------------------------------ */
  --color-action: 18 72% 46%; /* #ca5521 - Primary CTA, active controls, selected states */
  --color-action-hover: 18 78% 40%; /* #b54316 - CTA hover and high-emphasis interaction */
  --color-action-active: 18 82% 34%; /* #9e360f - Pressed CTA and active segmented controls */
  --color-action-muted: 20 58% 92%; /* #f6e4dc - Subtle accent background, selected chips */
  --color-action-soft: 19 65% 86%; /* #f2cdbd - Hover tint and low-emphasis badges */
  --color-action-vivid: 16 86% 55%; /* #ef6429 - Small highlights, progress, attention points */
  --color-action-ink: 18 68% 22%; /* #5e2412 - Text on very pale accent surfaces */
  --color-action-ring: 18 92% 62%; /* #f77b46 - Focus ring tint for primary controls */
  --color-action-contrast: 36 58% 96%; /* #fbf5eb - Text/icon color on action surfaces */
  --color-action-gradient-start: 18 72% 46%; /* #ca5521 - Gradient start for premium CTA only */
  --color-action-gradient-end: 31 78% 53%; /* #e99124 - Gradient end for premium CTA only */
  --color-action-shadow: 18 58% 34%; /* #893b24 - Warm action shadow tint */

  /* ------------------------------------------------------------ */
  /* Color tokens - surface layers                                */
  /* ------------------------------------------------------------ */
  --color-canvas: 39 48% 92%; /* #f1e8d6 - Global parchment page background */
  --color-surface: 42 43% 88%; /* #eae0cc - Main app shell and warm bands */
  --color-surface-raised: 42 52% 95%; /* #f9f2e7 - Cards, panels, input background */
  --color-surface-floating: 40 60% 97%; /* #fcf7ef - Modals, dropdowns, elevated overlays */
  --color-surface-sunken: 37 35% 84%; /* #dfd1ba - Inset areas and builder side wells */
  --color-surface-muted: 38 28% 78%; /* #d2c3ad - Muted blocks, separators behind cards */
  --color-surface-warm: 33 58% 90%; /* #f4dfc8 - Editorial callouts and hero mesh */
  --color-surface-cool-warm: 48 30% 89%; /* #ebe6d8 - Tables and alternating rows */
  --color-surface-ad: 41 46% 91%; /* #efe5d3 - Reserved ad unit background */
  --color-surface-ad-empty: 39 28% 86%; /* #e3d9c8 - Empty ad fallback surface */
  --color-surface-preview: 42 62% 98%; /* #fdf9f2 - Resume preview paper, never pure white */
  --color-surface-editor: 40 42% 94%; /* #f6eedf - Builder editor panel */
  --color-surface-admin: 38 34% 91%; /* #eee4d3 - Admin main background */
  --color-surface-admin-sidebar: 28 26% 14%; /* #2d211a - Admin sidebar dark anchor */
  --color-surface-footer: 28 28% 12%; /* #282018 - Footer and dramatic anchor sections */
  --color-surface-tooltip: 28 30% 16%; /* #33251c - Tooltip background */

  /* ------------------------------------------------------------ */
  /* Color tokens - text                                          */
  /* ------------------------------------------------------------ */
  --color-ink: 30 28% 11%; /* #241b14 - Primary warm near-black, AAA on parchment */
  --color-ink-strong: 25 34% 8%; /* #1c140e - Hero headlines and high contrast headings */
  --color-ink-soft: 30 18% 26%; /* #4e4036 - Body copy and secondary labels */
  --color-ink-muted: 31 13% 42%; /* #796b5d - Hints, metadata, timestamps */
  --color-ink-subtle: 32 10% 55%; /* #93877c - Disabled text and placeholders */
  --color-ink-on-dark: 39 52% 93%; /* #f5ebdc - Text on dark anchor sections */
  --color-ink-on-dark-muted: 37 23% 75%; /* #cfc2b2 - Secondary text on dark anchors */
  --color-ink-on-action: 36 58% 96%; /* #fbf5eb - Text on primary CTA */
  --color-ink-link: 18 72% 38%; /* #a94117 - Inline links on parchment */
  --color-ink-code: 22 36% 22%; /* #4c2e24 - Mono tags, slugs, code labels */
  --color-ink-success: 150 48% 22%; /* #1d5d3e - Success text */
  --color-ink-error: 6 62% 31%; /* #802a1e - Error text */
  --color-ink-warning: 38 74% 25%; /* #6f4a11 - Warning text */

  /* ------------------------------------------------------------ */
  /* Color tokens - borders                                       */
  /* ------------------------------------------------------------ */
  --color-border: 34 24% 76%; /* #cec1ad - Default borders, card edges */
  --color-border-strong: 30 20% 62%; /* #aa9a86 - Focused panels, table headers */
  --color-border-soft: 38 30% 84%; /* #dfd5c4 - Subtle dividers and separators */
  --color-border-action: 18 62% 52%; /* #d46a3b - Accent border for selected components */
  --color-border-dark: 29 18% 24%; /* #493c33 - Borders inside dark sections */
  --color-border-ad: 36 21% 70%; /* #c1b09b - Ad container frame */
  --color-border-error: 6 58% 50%; /* #ca4939 - Invalid input border */
  --color-border-success: 150 45% 40%; /* #389468 - Success input border */

  /* ------------------------------------------------------------ */
  /* Color tokens - status                                        */
  /* ------------------------------------------------------------ */
  --color-success: 150 47% 36%; /* #31875f - Positive ATS checks and save confirmation */
  --color-success-muted: 145 42% 90%; /* #daf1e4 - Success alert background */
  --color-success-vivid: 151 62% 44%; /* #2dc77a - Animated success checkmark */
  --color-error: 6 64% 46%; /* #c54230 - Destructive actions and form errors */
  --color-error-muted: 8 58% 92%; /* #f6dfdb - Error alert background */
  --color-error-vivid: 4 78% 56%; /* #e94c39 - Error icon and urgent feedback */
  --color-warning: 38 78% 45%; /* #cc8619 - Warnings and low ATS hints */
  --color-warning-muted: 41 74% 90%; /* #f7e8d0 - Warning alert background */
  --color-warning-vivid: 38 92% 55%; /* #f5a224 - Warning badges and progress */
  --color-info: 204 38% 38%; /* #3c6e86 - Informational notices */
  --color-info-muted: 202 42% 91%; /* #dcecf2 - Informational notice background */
  --color-premium: 43 72% 45%; /* #c69320 - Premium/gold button variant when needed */
  --color-premium-muted: 44 65% 90%; /* #f5e8cf - Premium muted surface */

  /* ------------------------------------------------------------ */
  /* Category color tokens - distinct but restrained              */
  /* ------------------------------------------------------------ */
  --color-category-professional: 18 72% 46%; /* #ca5521 - professional badge foreground */
  --color-category-professional-bg: 18 48% 91%; /* soft professional badge background */
  --color-category-professional-border: 18 32% 72%; /* professional badge border */
  --color-category-creative: 318 36% 42%; /* #91447b - creative badge foreground */
  --color-category-creative-bg: 318 48% 91%; /* soft creative badge background */
  --color-category-creative-border: 318 32% 72%; /* creative badge border */
  --color-category-technical: 202 42% 36%; /* #356f82 - technical badge foreground */
  --color-category-technical-bg: 202 48% 91%; /* soft technical badge background */
  --color-category-technical-border: 202 32% 72%; /* technical badge border */
  --color-category-academic: 258 28% 43%; /* #65509a - academic badge foreground */
  --color-category-academic-bg: 258 48% 91%; /* soft academic badge background */
  --color-category-academic-border: 258 32% 72%; /* academic badge border */
  --color-category-entry: 34 72% 43%; /* #bd781f - entry badge foreground */
  --color-category-entry-bg: 34 48% 91%; /* soft entry badge background */
  --color-category-entry-border: 34 32% 72%; /* entry badge border */
  --color-category-healthcare: 154 42% 34%; /* #327b59 - healthcare badge foreground */
  --color-category-healthcare-bg: 154 48% 91%; /* soft healthcare badge background */
  --color-category-healthcare-border: 154 32% 72%; /* healthcare badge border */
  --color-category-international: 190 38% 38%; /* #3c7786 - international badge foreground */
  --color-category-international-bg: 190 48% 91%; /* soft international badge background */
  --color-category-international-border: 190 32% 72%; /* international badge border */

  /* ------------------------------------------------------------ */
  /* Shadow tint and overlays                                     */
  /* ------------------------------------------------------------ */
  --color-shadow-tint: 24 36% 18%; /* #3e281d - warm brown shadow base */
  --color-overlay-scrim: 24 34% 10%; /* #23160f - modal backdrop tint */
  --color-overlay-wash: 32 68% 92%; /* #f8e7d7 - warm translucent wash */
  --color-focus-ring: 18 92% 62%; /* #f77b46 - accessible focus ring */
  --color-selection-bg: 20 78% 86%; /* #f7cab8 - text selection background */
  --color-selection-text: 25 34% 8%; /* #1c140e - text selection ink */

  /* ------------------------------------------------------------ */
  /* Typography families — premium: Space Grotesk (display) + Inter (body) */
  /* ------------------------------------------------------------ */
  --font-display: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Headings, hero, editorial display */
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* App UI and body */
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Geist Mono", Consolas, monospace; /* Slugs, stats, code-like labels */

  /* ------------------------------------------------------------ */
  /* Typography scale - Major Third 1.25                           */
  /* ------------------------------------------------------------ */
  --type-xs-size: 0.64rem; /* 10.24px - Tiny metadata, compact helper text */
  --type-xs-line: 1rem; /* 16px - readable rhythm */
  --type-xs-tracking: 0.0125em; /* letter-spacing for xs */
  --type-xs-weight: 500; /* recommended weight */
  --type-sm-size: 0.8rem; /* 12.8px - Badges, chips, table meta */
  --type-sm-line: 1.125rem; /* 18px - readable rhythm */
  --type-sm-tracking: 0.006em; /* letter-spacing for sm */
  --type-sm-weight: 500; /* recommended weight */
  --type-base-size: 1rem; /* 16px - Body copy and normal controls */
  --type-base-line: 1.625rem; /* 26px - readable rhythm */
  --type-base-tracking: 0em; /* letter-spacing for base */
  --type-base-weight: 400; /* recommended weight */
  --type-lg-size: 1.25rem; /* 20px - Lead text and important form labels */
  --type-lg-line: 1.875rem; /* 30px - readable rhythm */
  --type-lg-tracking: 0em; /* letter-spacing for lg */
  --type-lg-weight: 500; /* recommended weight */
  --type-xl-size: 1.5625rem; /* 25px - Card titles and section intros */
  --type-xl-line: 2.125rem; /* 34px - readable rhythm */
  --type-xl-tracking: -0.004em; /* letter-spacing for xl */
  --type-xl-weight: 600; /* recommended weight */
  --type-2xl-size: 1.953125rem; /* 31.25px - Section headings */
  --type-2xl-line: 2.5rem; /* 40px - readable rhythm */
  --type-2xl-tracking: -0.006em; /* letter-spacing for 2xl */
  --type-2xl-weight: 650; /* recommended weight */
  --type-3xl-size: 2.44140625rem; /* 39.06px - Page titles and large stats */
  --type-3xl-line: 3rem; /* 48px - readable rhythm */
  --type-3xl-tracking: -0.008em; /* letter-spacing for 3xl */
  --type-3xl-weight: 700; /* recommended weight */
  --type-4xl-size: 3.0517578125rem; /* 48.83px - Hero headlines desktop */
  --type-4xl-line: 3.5rem; /* 56px - readable rhythm */
  --type-4xl-tracking: -0.01em; /* letter-spacing for 4xl */
  --type-4xl-weight: 700; /* recommended weight */

  /* ------------------------------------------------------------ */
  /* Typography semantic aliases                                   */
  /* ------------------------------------------------------------ */
  --text-hero-size: var(--type-4xl-size); /* Space Grotesk hero heading size */
  --text-hero-line: var(--type-4xl-line); /* Space Grotesk hero heading line-height */
  --text-hero-tracking: -0.035em; /* Space Grotesk hero heading tracking — tight, premium */
  --text-hero-weight: 700; /* Space Grotesk hero heading weight */
  --text-page-title-size: var(--type-3xl-size); /* Page title size */
  --text-page-title-line: var(--type-3xl-line); /* Page title line-height */
  --text-page-title-tracking: var(--type-3xl-tracking); /* Page title tracking */
  --text-page-title-weight: var(--type-3xl-weight); /* Page title weight */
  --text-section-title-size: var(--type-2xl-size); /* Section heading size */
  --text-section-title-line: var(--type-2xl-line); /* Section heading line-height */
  --text-section-title-tracking: var(--type-2xl-tracking); /* Section heading tracking */
  --text-section-title-weight: var(--type-2xl-weight); /* Section heading weight */
  --text-card-title-size: var(--type-xl-size); /* Card title size */
  --text-card-title-line: var(--type-xl-line); /* Card title line-height */
  --text-card-title-tracking: var(--type-xl-tracking); /* Card title tracking */
  --text-card-title-weight: var(--type-xl-weight); /* Card title weight */
  --text-lead-size: var(--type-lg-size); /* Lead paragraph size */
  --text-lead-line: var(--type-lg-line); /* Lead paragraph line-height */
  --text-lead-tracking: var(--type-lg-tracking); /* Lead paragraph tracking */
  --text-lead-weight: var(--type-lg-weight); /* Lead paragraph weight */
  --text-body-size: var(--type-base-size); /* Normal body text size */
  --text-body-line: var(--type-base-line); /* Normal body text line-height */
  --text-body-tracking: var(--type-base-tracking); /* Normal body text tracking */
  --text-body-weight: var(--type-base-weight); /* Normal body text weight */
  --text-caption-size: var(--type-sm-size); /* Captions and labels size */
  --text-caption-line: var(--type-sm-line); /* Captions and labels line-height */
  --text-caption-tracking: var(--type-sm-tracking); /* Captions and labels tracking */
  --text-caption-weight: var(--type-sm-weight); /* Captions and labels weight */
  --text-micro-size: var(--type-xs-size); /* Microcopy size */
  --text-micro-line: var(--type-xs-line); /* Microcopy line-height */
  --text-micro-tracking: var(--type-xs-tracking); /* Microcopy tracking */
  --text-micro-weight: var(--type-xs-weight); /* Microcopy weight */

  /* ------------------------------------------------------------ */
  /* Spacing system - 4px base grid                                */
  /* ------------------------------------------------------------ */
  --space-none: 0rem; /* 0px - No spacing, reset only */
  --space-hair: 0.0625rem; /* 1px - Fine optical nudge, border compensation */
  --space-2xs: 0.125rem; /* 2px - Tiny icon optical adjustment */
  --space-xs: 0.25rem; /* 4px - Minimum gap between tight inline items */
  --space-sm: 0.5rem; /* 8px - Badge padding and compact gaps */
  --space-md: 0.75rem; /* 12px - Form inner spacing */
  --space-base: 1rem; /* 16px - Default component gap */
  --space-lg: 1.25rem; /* 20px - Card inner spacing small */
  --space-xl: 1.5rem; /* 24px - Card inner spacing standard */
  --space-2xl: 2rem; /* 32px - Section local spacing */
  --space-3xl: 2.5rem; /* 40px - Large stack gaps */
  --space-4xl: 3rem; /* 48px - Desktop section padding small */
  --space-5xl: 4rem; /* 64px - Section vertical padding */
  --space-6xl: 5rem; /* 80px - Hero and editorial breathing room */
  --space-7xl: 6rem; /* 96px - Large homepage bands */
  --space-8xl: 8rem; /* 128px - Hero desktop max vertical padding */

  /* ------------------------------------------------------------ */
  /* Layout sizing tokens                                          */
  /* ------------------------------------------------------------ */
  --layout-page-max: 74rem; /* 1184px max content width */
  --layout-page-wide: 86rem; /* 1376px wide content width */
  --layout-readable: 42rem; /* 672px readable text column */
  --layout-sidebar: 20rem; /* 320px builder/editor sidebar */
  --layout-admin-sidebar: 15rem; /* 240px admin sidebar */
  --layout-builder-tools: 17.5rem; /* 280px right tool rail */
  --layout-header-h: 4rem; /* 64px desktop header */
  --layout-header-mobile-h: 3.5rem; /* 56px mobile header */
  --layout-ad-leaderboard-w: 45.5rem; /* 728px ad width */
  --layout-ad-leaderboard-h: 5.625rem; /* 90px ad height */
  --layout-ad-rectangle-w: 18.75rem; /* 300px ad width */
  --layout-ad-rectangle-h: 15.625rem; /* 250px ad height */
  --layout-ad-mobile-w: 20rem; /* 320px mobile ad width */
  --layout-ad-mobile-h: 3.125rem; /* 50px mobile ad height */

  /* ------------------------------------------------------------ */
  /* Shadow system - warm tinted                                   */
  /* ------------------------------------------------------------ */
  --shadow-none: none; /* No elevation */
  --shadow-sm: 0 1px 2px hsl(var(--color-shadow-tint) / 0.10), 0 1px 1px hsl(var(--color-shadow-tint) / 0.06); /* Small controls, resting cards */
  --shadow-md: 0 8px 18px hsl(var(--color-shadow-tint) / 0.12), 0 2px 5px hsl(var(--color-shadow-tint) / 0.08); /* Raised cards and dropdowns */
  --shadow-lg: 0 18px 36px hsl(var(--color-shadow-tint) / 0.16), 0 6px 14px hsl(var(--color-shadow-tint) / 0.10); /* Modals and hero mockups */
  --shadow-xl: 0 28px 72px hsl(var(--color-shadow-tint) / 0.22), 0 12px 28px hsl(var(--color-shadow-tint) / 0.14); /* Hover hero cards, major overlays */
  --shadow-focus: 0 0 0 3px hsl(var(--color-focus-ring) / 0.28); /* Accessible focus halo */
  --shadow-action: 0 10px 22px hsl(var(--color-action-shadow) / 0.24); /* Primary CTA depth */
  --shadow-inset: inset 0 1px 2px hsl(var(--color-shadow-tint) / 0.08); /* Inputs and sunken panels */

  /* ------------------------------------------------------------ */
  /* Border radius system                                          */
  /* ------------------------------------------------------------ */
  --radius-sharp: 0.25rem; /* 4px - tiny controls, focusable cells */
  --radius-soft: 0.625rem; /* 10px - buttons, inputs, chips */
  --radius-card: 1rem; /* 16px - cards, modals, preview frames */
  --radius-pill: 9999px; /* full pill - badges, segmented controls */

  /* ------------------------------------------------------------ */
  /* Motion durations                                              */
  /* ------------------------------------------------------------ */
  --duration-instant: 80ms; /* Micro-responses: checkbox, active press */
  --duration-fast: 140ms; /* Hover states and focus rings */
  --duration-base: 240ms; /* Panel transitions and card hover */
  --duration-slow: 400ms; /* Page section reveals and modal open */
  --duration-cinematic: 700ms; /* Hero entry and preview load */

  /* ------------------------------------------------------------ */
  /* Motion easings                                                */
  /* ------------------------------------------------------------ */
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1); /* UI interactions: hover, focus, dropdown */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Warm reveals and small delight */
  --ease-settle: cubic-bezier(0, 0, 0.2, 1); /* Exits, collapses, reduced attention */
  --ease-overshoot: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* CTA success and card emphasis */

  /* ------------------------------------------------------------ */
  /* Interaction tokens                                            */
  /* ------------------------------------------------------------ */
  --focus-ring-width: 2px; /* Visible focus outline width */
  --focus-ring-offset: 3px; /* Focus outline offset */
  --control-height-sm: 2rem; /* 32px button/input small */
  --control-height-md: 2.5rem; /* 40px button/input medium */
  --control-height-lg: 3rem; /* 48px button/input large */
  --control-height-xl: 3.5rem; /* 56px hero CTA only */
  --control-padding-x-sm: 0.75rem; /* Small button horizontal padding */
  --control-padding-x-md: 1rem; /* Medium button horizontal padding */
  --control-padding-x-lg: 1.25rem; /* Large button horizontal padding */
  --control-padding-x-xl: 1.5rem; /* XL button horizontal padding */
  --icon-size-sm: 1rem; /* 16px icons */
  --icon-size-md: 1.125rem; /* 18px icons */
  --icon-size-lg: 1.25rem; /* 20px icons */
  --hit-target-min: 2.75rem; /* 44px minimum accessible target */

  /* ------------------------------------------------------------ */
  /* Component foundation aliases                                  */
  /* ------------------------------------------------------------ */
  --page-bg: hsl(var(--color-canvas)); /* Global document background */
  --page-ink: hsl(var(--color-ink)); /* Global text color */
  --card-bg: hsl(var(--color-surface-raised)); /* Default card background */
  --card-border: hsl(var(--color-border)); /* Default card border */
  --card-shadow: var(--shadow-sm); /* Default card shadow */
  --card-shadow-hover: var(--shadow-xl); /* Template card hover shadow */
  --button-primary-bg: hsl(var(--color-action)); /* Primary button background */
  --button-primary-bg-hover: hsl(var(--color-action-hover)); /* Primary button hover background */
  --button-primary-fg: hsl(var(--color-ink-on-action)); /* Primary button text */
  --button-secondary-bg: hsl(var(--color-ink)); /* Secondary dark button background */
  --button-secondary-fg: hsl(var(--color-ink-on-dark)); /* Secondary dark button text */
  --button-ghost-bg: hsl(var(--color-surface-raised) / 0); /* Ghost button rest background */
  --button-ghost-bg-hover: hsl(var(--color-surface-raised)); /* Ghost button hover background */
  --input-bg: hsl(var(--color-surface-floating)); /* Input background */
  --input-border: hsl(var(--color-border)); /* Input border */
  --input-border-focus: hsl(var(--color-action)); /* Input focused border */
  --ad-bg: hsl(var(--color-surface-ad)); /* Ad container background */
  --ad-border: hsl(var(--color-border-ad)); /* Ad reserved frame */
  --modal-bg: hsl(var(--color-surface-floating)); /* Modal background */
  --modal-shadow: var(--shadow-xl); /* Modal elevation */
  --toast-bg: hsl(var(--color-surface-footer)); /* Toast neutral background */
  --toast-fg: hsl(var(--color-ink-on-dark)); /* Toast text */
  --builder-preview-bg: hsl(var(--color-surface-preview)); /* A4 preview paper */
  --builder-panel-bg: hsl(var(--color-surface-editor)); /* Builder panel background */

  /* ------------------------------------------------------------ */
  /* Z-index scale                                                 */
  /* ------------------------------------------------------------ */
  --z-base: 0; /* Normal content */
  --z-raised: 10; /* Cards over background */
  --z-sticky: 30; /* Sticky header and filters */
  --z-dropdown: 50; /* Menus and dropdowns */
  --z-modal: 80; /* Dialog backdrop and panel */
  --z-toast: 100; /* Toast notification stack */

  /* ------------------------------------------------------------ */
  /* Breakpoint tokens                                             */
  /* ------------------------------------------------------------ */
  --bp-mobile-min: 23.4375rem; /* 375px mobile floor */
  --bp-tablet: 48rem; /* 768px tablet */
  --bp-desktop: 64rem; /* 1024px desktop */
  --bp-wide: 80rem; /* 1280px wide */
  --bp-ultra: 96rem; /* 1536px ultra */
}

/* -------------------------------------------------------------- */
/* Base implementation helpers — premium typography rendering     */
/* -------------------------------------------------------------- */
html { color-scheme: light; }
body {
  background: hsl(var(--color-canvas));
  color: hsl(var(--color-ink));
  font-family: var(--font-ui);
  font-size: var(--type-base-size);
  line-height: var(--type-base-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Display headings get a touch tighter tracking for premium editorial feel */
h1 { letter-spacing: -0.028em; }
h2 { letter-spacing: -0.022em; }

::selection {
  background: hsl(var(--color-selection-bg));
  color: hsl(var(--color-selection-text));
}

:focus-visible {
  outline: var(--focus-ring-width) solid hsl(var(--color-focus-ring));
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* -------------------------------------------------------------- */
/* Token register - usage notes and contrast intent                */
/* -------------------------------------------------------------- */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */
/* color-action: Use for the single primary action path: Use This Template, Download PDF, Save. */
/* color-action-muted: Use behind selected chips and active filter states where full accent would overpower. */
/* color-canvas: Use as page background; it intentionally reads like warm paper, not a white SaaS canvas. */
/* color-surface-raised: Use for cards and input fields; keeps the site quiet while still layered. */
/* color-surface-footer: Use sparingly as an anchor, not as a full dark mode. */
/* color-ink: Primary text; chosen for AAA body contrast on parchment. */
/* color-ink-muted: Metadata only; avoid for long paragraphs. */
/* color-border: Default component edge; visible without looking cold or grey. */
/* shadow-md: Default interactive elevation for dropdowns and raised cards. */
/* shadow-xl: Use only for hero mockups, template card hover, and modal priority. */
/* radius-soft: Default radius for touchable controls. */
/* radius-card: Default radius for content cards and modal panels. */
/* ease-snappy: Most UI transitions; feels precise and controlled. */
/* ease-spring: Reveals; warm and human, but never ornamental. */
/* duration-base: The normal pace for cards and panel changes. */
/* duration-cinematic: Reserved for hero and major page entry only. */