/**
 * @file theme.css
 * WEG brand 2.0 design tokens for weg_canvas.
 *
 * Three-layer architecture:
 *   1. PRIMITIVES  — raw oklch values named --weg-{hue}-{step}
 *                    Single source of truth. Never used directly in components.
 *   2. SEMANTICS   — role-based tokens that reference primitives via var()
 *                    Includes shadcn/ui core slots + WEG extensions.
 *   3. TAILWIND    — @theme inline in weg_components/css/weg-components.css
 *                    bridges semantics to utilities (README.md there lists
 *                    the token contract this file must satisfy).
 *                    Primitives are NOT bridged to Tailwind.
 *
 * To customize without rebuilding: copy this file to your web root (next to
 * index.php) and clear Drupal's cache. Changes apply immediately.
 *
 * Primitive scale: number = lightness step, HIGHER numbers are DARKER
 * (100 = lightest, 900 = darkest), matching the Figma "Design System" /
 * "Wealth Enhancement: Design Tokens" primitive collection (color/{hue}/{step}).
 * See docs/design-system-open-items.md for remaining open items.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     PRIMITIVES — Brand color palette
     Raw oklch values. The only place color literals appear.
     Named to match the Figma primitive collection (color/{hue}/{step}).
     Higher step numbers are darker; primitives are never referenced
     directly by components — always go through a SEMANTICS token.
     ═══════════════════════════════════════════════════════════════ */

  /* Primary: Green (olive) — 8-step scale, primary brand palette */
  --weg-green-100: oklch(0.9564 0.0123 121.7); /* #eff2e9 */
  --weg-green-200: oklch(0.8988 0.0274 134.98); /* #d6e2d0 */
  --weg-green-300: oklch(0.7854 0.0389 134.16); /* #afbfa6 — Surface/brand-disabled, Surface/brand-subtle */
  --weg-green-400: oklch(0.6346 0.0478 131.78); /* #809173 — Text/brand-disabled */
  --weg-green-500: oklch(0.5578 0.0453 134.02); /* #697a5f */
  --weg-green-600: oklch(0.4369 0.0594 134.09); /* #445937 — Surface/brand-hover */
  --weg-green-700: oklch(0.3834 0.0668 134.14); /* #344b25 — Surface/brand, Border/brand, Icon/brand, Status/success */
  --weg-green-800: oklch(0.3637 0.0509 133.8); /* #334428 — Surface/brand-dark */

  /* Primary: Blue (teal) — 8-step scale, secondary brand palette */
  --weg-blue-100: oklch(0.9704 0.0045 214.33); /* #f2f6f7 — Surface/secondary-subtle */
  --weg-blue-200: oklch(0.8972 0.0181 223.62); /* #d1e0e6 */
  --weg-blue-300: oklch(0.7838 0.0336 221.39); /* #a2bec8 — Surface/secondary-subtle-hover */
  --weg-blue-400: oklch(0.6712 0.0431 222.62); /* #799ca9 */
  --weg-blue-500: oklch(0.56 0.0552 222.49); /* #4f7c8c */
  --weg-blue-600: oklch(0.467 0.0574 224.26); /* #336172 */
  --weg-blue-700: oklch(0.3837 0.0493 224.44); /* #234957 — Surface/secondary, Status/info */
  --weg-blue-800: oklch(0.3231 0.0525 232.86); /* #13384a */

  /* Neutral — 3-step scale, cream-tinted off-whites for paper-like surfaces */
  --weg-neutral-100: oklch(0.9908 0.0013 106.42); /* #fcfcfb — Surface/neutral, Border/neutral */
  --weg-neutral-200: oklch(0.9813 0.004 106.47); /* #f9f9f6 */
  --weg-neutral-300: oklch(0.9625 0.0079 106.55); /* #f3f3ed — Surface/section */

  /* Gray — 9-step scale, true grays (white to black) */
  --weg-gray-100: oklch(1 0 0); /* #ffffff — Surface/white, Text/contrast, Border/contrast */
  --weg-gray-200: oklch(0.9702 0 0); /* #f5f5f5 — Border/light */
  --weg-gray-300: oklch(0.9249 0 0); /* #e6e6e6 — Border/secondary */
  --weg-gray-400: oklch(0.8452 0 0); /* #cccccc — Border/primary */
  --weg-gray-500: oklch(0.683 0 0); /* #999999 — Text/placeholder, Text/disabled, Icon/disabled, Border/disabled */
  --weg-gray-600: oklch(0.5103 0 0); /* #666666 — Text/secondary, Text/body-light */
  --weg-gray-700: oklch(0.3211 0 0); /* #333333 */
  --weg-gray-800: oklch(0.2178 0 0); /* #1a1a1a — Text/primary, Text/heading, Icon/primary */
  --weg-gray-900: oklch(0 0 0); /* #000000 */

  /* Secondary: Sienna — 5-step scale, used by status/form-error tokens */
  --weg-sienna-100: oklch(0.9054 0.0329 49.32); /* #f3dacd */
  --weg-sienna-300: oklch(0.8107 0.0674 49.32); /* #e6b59b */
  --weg-sienna-500: oklch(0.7213 0.1042 49.24); /* #da9169 */
  --weg-sienna-700: oklch(0.6341 0.1396 47.11); /* #cd6c37 */
  --weg-sienna-900: oklch(0.5589 0.1686 41.34); /* #c14705 — Text/error, Surface/error, Icon/error, Border/error, Status/error */

  /* Secondary: Yellow — 5-step scale, used by status/form-warning tokens */
  --weg-yellow-100: oklch(0.9362 0.0351 87.08); /* #f4e9d0 */
  --weg-yellow-300: oklch(0.873 0.0695 86.99); /* #e9d3a1 */
  --weg-yellow-500: oklch(0.8137 0.1034 86.92); /* #dfbe71 */
  --weg-yellow-700: oklch(0.7534 0.1281 85.09); /* #d4a842 */
  --weg-yellow-900: oklch(0.6953 0.1398 80.79); /* #c99213 — Icon/warning, Border/warning, Status/warning */

  /* Reserve: Red — 5-step scale, parked for future use */
  --weg-red-100: oklch(0.8843 0.0196 41.8); /* #e5d5cf */
  --weg-red-300: oklch(0.7674 0.0418 39.27); /* #ccaba0 */
  --weg-red-500: oklch(0.6473 0.0661 39.95); /* #b28170 */
  --weg-red-700: oklch(0.5283 0.0939 39.13); /* #995741 */
  --weg-red-900: oklch(0.4135 0.1201 38.01); /* #7f2d11 */

  /* Reserve: Umber — 5-step scale, parked for future use */
  --weg-umber-100: oklch(0.8641 0.0062 43.33); /* #d6d1cf */
  --weg-umber-300: oklch(0.7228 0.013 43.23); /* #ada39f */
  --weg-umber-500: oklch(0.5735 0.0222 33.4); /* #857470 */
  --weg-umber-700: oklch(0.4158 0.032 35.76); /* #5c4640 */
  --weg-umber-900: oklch(0.2454 0.046 37.32); /* #331810 — dark accent surface for deep contrast sections */

  /* Accent: Lime — decorative accent (e.g. green/blue style CTAs, Accent/Lime).
     Standalone value with no assigned primitive scale in Figma. */
  --weg-lime: oklch(0.9075 0.1534 121.25); /* #d1f075 */

  /* Mint — button-state shades for the hero CTA accent (Surface/button-hero) */
  --weg-mint-100: oklch(0.9718 0.0142 169.25); /* #edf9f4 */
  --weg-mint-200: oklch(0.8977 0.0525 167.07); /* #bde9d6 — Surface/button-hero-disabled */
  --weg-mint-400: oklch(0.8172 0.0945 164.96); /* #86d7b4 — Surface/button-hero-hover */
  --weg-mint-500: oklch(0.7797 0.1127 163.32); /* #6ccea3 — Surface/button-hero */
  --weg-mint-600: oklch(0.6738 0.0956 163.51); /* #59a986 — Surface/button-hero-active */

  /* Focus — Color/Focus keyboard focus ring */
  --weg-cyan-100: oklch(0.571 0.1185 233.38); /* #0082b2 */

  /* Logo mark colors — color/logo/green, color/logo/taupe */
  --weg-logo-green: oklch(0.5153 0.1173 135.19); /* #48762b */
  --weg-logo-taupe: oklch(0.4941 0.0162 67.44); /* #686058 */

  /* ═══════════════════════════════════════════════════════════════
     SEMANTICS — Theme role assignments
     Reference primitives only. Never raw color values.
     Includes shadcn/ui core slots (Mercury compatibility) + WEG extensions.
     ═══════════════════════════════════════════════════════════════ */

  /* shadcn/ui core slots */
  --background: var(--weg-gray-100);
  --foreground: var(--weg-gray-800);
  /* --card / --card-foreground are intentionally NOT declared at :root.
     They are the Surface Contract's card-layer tokens (see weg_components' weg-components.css
     [data-surface="card"]) — only card-bearing [data-style] blocks in
     styles.css (blue-700, blue-light-card, umber-900) define them. Leaving
     them undeclared here lets the contract's var(--card, transparent)
     fallback blend a card layer into its section on every other style,
     with no per-style edits required. The optional --card-primary set
     (styles.css, green-600/green-700) is likewise undeclared here; its
     consumers fall back to the --primary set. */
  --primary: var(--weg-green-700); /* Surface/brand */
  --primary-foreground: var(--weg-gray-100);
  --secondary: var(--weg-blue-700); /* Surface/secondary */
  --secondary-foreground: var(--weg-gray-100);
  --accent: var(--weg-lime);
  --accent-foreground: var(--weg-green-700);
  --muted: var(--weg-gray-200); /* Border/light */
  --muted-foreground: var(--weg-gray-500); /* Text/placeholder, Text/disabled */
  --destructive: var(--weg-sienna-900); /* Status/error */
  --destructive-foreground: var(--weg-gray-100);
  --border: var(--weg-gray-400); /* Border/primary */
  --input: var(--weg-gray-200); /* Border/light */

  /* WEG extensions */
  --heading: var(--weg-gray-800); /* Text/heading */
  --success: var(--weg-green-700); /* Status/success — repointed from logo/green to green/700 (UI brand green) */
  --success-foreground: var(--weg-gray-100);
  --ring: var(--weg-cyan-100); /* Color/Focus */
  --logo-primary: var(--weg-logo-green);
  --logo-secondary: var(--weg-logo-taupe);

  /* Accent colour for a foreground element that needs more emphasis than plain
     --foreground (e.g. a statistic's figure number and its accent top-border).
     Dark/saturated [data-style] blocks in styles.css rebind this to
     --foreground for contrast — any future component can reuse the pattern. */
  --foreground-accent: var(--weg-green-700);
  /* De-emphasized text on a foreground element that still needs to stay
     legible on dark/saturated surfaces (--foreground-muted is NOT rebound
     by [data-style], unlike plain --muted-foreground — several dark/colored
     [data-style] blocks in styles.css DO rebind --muted-foreground, e.g. to
     --weg-blue-300, so it drifts by section. That's exactly why disabled
     button text (WEB-2080) uses the fixed --button-disabled-foreground
     below instead of --muted-foreground.). */
  --foreground-muted: var(--weg-gray-600);

  /* Stroke colour for a decorative background pattern (e.g. the
     "architectural" overlay family in overlays.css) layered over a
     [data-style] surface. Every [data-style] block in styles.css rebinds
     this to a primitive one or two steps darker than its own --background,
     matching Figma's per-surface pattern-line colour (e.g. Blue 700's lines
     are Blue 600, Blue 100's are Blue 300) — never reuse --border, whose
     values are tuned for hairlines/inputs and don't track Figma's pattern
     colours. */
  --pattern-stroke: var(--weg-gray-300);

  /* Brand accent for a decorative line or marker (e.g. the Card timeline's
     divider dot and rule). Not rebound by [data-style]: a component that
     needs the line to follow the surface switches to --foreground itself. */
  --accent-line: var(--weg-green-600);

  /* Button component state tokens — Figma Button (node 252:308), states
     reconciled against Figma's Hover/Active/Focus/Disabled symbols and the
     "Themes 1.1" style registry (node 7898:3655) in WEB-2080. */
  /* Border colour per button variant. Both default to a value that produces the
     current appearance (solid primary = no visible border; secondary = Border/
     primary outline). A [data-style] block can repaint either independently —
     e.g. blue-700 turns primary into a transparent-fill / white-outline CTA. */
  --primary-border: transparent; /* Solid primary shows no border; outline styles set this (e.g. --border/contrast). */
  --secondary-border: var(--border); /* Secondary (outline) button border — Border/primary by default. */
  --secondary-disabled: var(--weg-gray-500); /* Border/disabled — Figma secondary Disabled state */
  --primary-hover: var(--weg-green-600); /* Surface/brand-hover — WEB-2080 (supersedes WEB-1809's mint-400, which failed contrast against white text) */
  --primary-disabled: var(--weg-green-300); /* Surface/brand-disabled */
  --primary-disabled-border: var(--weg-green-300); /* Rebindable: outline-primary [data-style] blocks repaint this to Border/disabled so a disabled outline button keeps a visible border. */
  --surface-hover: var(--weg-green-100); /* Surface/white-hover */
  --button-hero: var(--weg-mint-500); /* Surface/button-hero */
  --button-hero-foreground: var(--weg-gray-800); /* Text/primary on the mint Accent button */
  --button-hero-hover: var(--weg-mint-400); /* Surface/button-hero-hover */
  --button-hero-disabled: var(--weg-mint-200); /* Surface/button-hero-disabled */

  /* Rebindable: secondary's own fill, transparent (outline) by default.
     [data-style] blocks whose --foreground is white rebind this to the
     fixed --button-contrast set below so secondary auto-adapts to a solid
     white fill on dark surfaces, mirroring how --primary already becomes a
     white outline there (Figma "Themes 1.1"). */
  --secondary-button: transparent;
  --secondary-button-disabled: transparent;

  /* Fixed contrast-surface tokens — Figma's solid-white button symbol
     (contrast-primary; also used by secondary on dark/colored [data-style]
     surfaces). Never rebound by [data-style]: the whole point is a pill
     that stays the exact same white regardless of section, the same
     reasoning solid-white (WEB-1704) was originally built for — see
     button.twig, where contrast-primary and solid-white now share this
     token set as the same variant. */
  --button-contrast: var(--weg-gray-100); /* Surface/white */
  --button-contrast-foreground: var(--weg-gray-800); /* Text/primary */
  --button-contrast-hover: var(--weg-green-100); /* Surface/white-hover */
  --button-contrast-disabled: var(--weg-green-300); /* Surface/brand-disabled */

  /* Fixed disabled-state tokens — Figma Text/disabled (#999) and
     Border/disabled (#999, same primitive). Never rebound by [data-style]:
     unlike --muted-foreground (which several colored styles repaint),
     Figma's disabled button text and border stay --weg-gray-500 on every
     surface. */
  --button-disabled-foreground: var(--weg-gray-500);
  --button-disabled-border: var(--weg-gray-500);

  /* Fixed focus-ring gap colour — Figma's white inset shadow between a
     button's fill and its cyan focus ring. Never rebound by [data-style]:
     the gap reads as white on every section in Figma, including the dark
     ones. Paired with --ring (Color/Focus) in weg_components' focus-ring
     utility. */
  --ring-gap: var(--weg-gray-100);

  /* Form tokens — Figma Text input / Select / Checkbox / Radio components
     (see docs/design-system-open-items.md). Shared by src/forms.css so the
     same rules cover webform, custom Form API forms, and hand-written
     markup alike. */

  /* Fill of an input control — Figma Surface/white. Deliberately NOT
     rebound by [data-style]: Figma keeps the field box white on dark
     surfaces (see the progressive RAM card, node 7608:1391), so only
     label/helper text flip per style, never the field itself. */
  --input-background: var(--weg-gray-100);

  /* Text/value color inside an input control — Figma Text/primary. Paired
     with --input-background above and given the same treatment for the same
     reason: the field's own typed text must stay readable against its
     always-white fill, so it is deliberately NOT rebound by [data-style]
     even though plain --foreground is (e.g. --weg-gray-100/white on
     blue-700/green-700/green-800/umber-900). Using --foreground directly
     here would render invisible white-on-white text on those four styles —
     the same class of bug this pass fixes for --action/--primary buttons.
     Ambient label/helper/message text should keep using --foreground /
     --foreground-muted so it still flips per Figma's dark-card exploration —
     only the text drawn inside the white field box needs this fixed alias. */
  --input-foreground: var(--weg-gray-800);

  /* Highest-emphasis filled action on the current surface (primary submit /
     next). Defaults to the --primary set; the [data-style] blocks that turn
     --primary into a transparent outline CTA (blue-700, green-700,
     green-800, umber-900) rebind this to the mint --button-hero set instead
     so form submit buttons stay a filled, visible pill on every surface. */
  --action: var(--primary);
  --action-foreground: var(--primary-foreground);
  --action-hover: var(--primary-hover);
  --action-disabled: var(--primary-disabled);

  /* Non-blocking validation state (Figma Status/warning). Message text is
     Text/primary, not the warning hue — matches the Figma Checkbox/Text
     input warning components. */
  --warning: var(--weg-yellow-900); /* Icon/warning, Border/warning */
  --warning-foreground: var(--weg-gray-800);

  /* Tinted field fills for validation/focus states, composited over the
     field's own white fill (Figma uses ~15% tints of the state's lightest
     shade over Surface/white). */
  --destructive-surface: color-mix(in srgb, var(--weg-sienna-100) 15%, var(--input-background));
  --warning-surface: color-mix(in srgb, var(--weg-yellow-100) 15%, var(--input-background));
  --ring-surface: color-mix(in srgb, var(--weg-blue-200) 15%, var(--input-background));

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */
  --font-sans: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-field: "Helvetica Neue Field", var(--font-sans); /* text-entry fields — keeps the descent --font-sans overrides to 0, see fonts.css */
  --font-serif: "Cardone", sans-serif; /* display italic for heading emphasis — matches Site Studio Cardone font stack */
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Responsive type scale — Figma "Design System" / Typography (node
     9023:412, https://www.figma.com/design/hMefJ4CwsEoyREEsS4p9IS/Design-System?node-id=9023-412).
     Figma itself only defines mobile (<768px) and desktop (>=768px) values
     with no tablet tier; the md step below is this theme's own interpolated
     guess (documented in docs/design-system-open-items.md), not a Figma
     value. Weight/line-height/letter-spacing are bridged alongside each
     size in weg_components' @theme inline block (css/weg-components.css) — see --text-h1 etc. there. */
  --font-size-h1: 2.75rem; /* 44px mobile — Figma H1 */
  --font-size-h2: 2rem; /* 32px mobile — Figma H2 */
  --font-size-h3: 1.75rem; /* 28px mobile — Figma H3 */
  --font-size-h4: 1.5rem; /* 24px mobile — Figma H4 */
  --font-size-h5: 1.25rem; /* 20px mobile — Figma H5 */
  --font-size-h5-secondary: 1.125rem; /* 18px mobile — Figma H5 Secondary */
  --font-size-h6: 1.125rem; /* 18px mobile — Figma H6 */

  /* Prose heading scale — used only inside rich-text bodies (the .weg-rte
     wrapper in weg_components' css/weg-components.css), never by the display headings above. A bare <hN>
     written by a CKEditor author (or printed from a .processed field) needs
     to read as in-body hierarchy, not as a page/section title, so these
     steps are deliberately smaller than --font-size-h2..h6. No Figma spec
     exists yet for in-body headings; these are a starting proposal to be
     confirmed against Figma, not a sourced value like the sizes above. */
  --font-size-prose-h2: 1.5rem; /* 24px mobile */
  --font-size-prose-h3: 1.25rem; /* 20px mobile */
  --font-size-prose-h4: 1.125rem; /* 18px mobile */
  --font-size-prose-h5: 1rem; /* 16px mobile */
  --font-size-prose-h6: 1rem; /* 16px — flat across breakpoints */
  --font-size-eyebrow: 0.75rem; /* 12px mobile — Figma Headline/Eyebrow */
  --font-size-lede: 1.125rem; /* 18px mobile — Figma Body/Lede */
  --font-size-lede-secondary: 1rem; /* 16px — Figma Body/Lede Secondary, flat across breakpoints */
  --font-size-body: 1rem; /* 16px — Figma Body/Primary, flat across breakpoints */
  --font-size-body-secondary: 0.875rem; /* 14px — Figma Body/Secondary, flat across breakpoints */
  --font-size-helper: 0.75rem; /* 12px — Figma Utility/Helper, flat across breakpoints */
  --font-size-button: 1rem; /* 16px mobile — Figma Utility/Button Text */
  --font-size-stat: 4.5rem; /* 72px mobile — Figma Stat/Number */

  @media (min-width: 768px) {
    /* md (768–1023px) — tablet tier, interpolated: midpoint between mobile
       and desktop rounded down to an even px, or the desktop value when
       mobile and desktop are within 2px of each other. */
    --font-size-h1: 3.25rem; /* 52px */
    --font-size-h2: 2.5rem; /* 40px */
    --font-size-h3: 2rem; /* 32px */
    --font-size-h4: 1.625rem; /* 26px */
    --font-size-h5: 1.375rem; /* 22px */
    --font-size-h5-secondary: 1.25rem; /* 20px */
    --font-size-h6: 1.25rem; /* 20px — within 2px of desktop, takes desktop value */
    --font-size-prose-h2: 1.625rem; /* 26px */
    --font-size-prose-h3: 1.375rem; /* 22px */
    --font-size-prose-h4: 1.25rem; /* 20px */
    --font-size-prose-h5: 1.125rem; /* 18px */
    --font-size-eyebrow: 0.875rem; /* 14px — within 2px of desktop, takes desktop value */
    --font-size-lede: 1.25rem; /* 20px — within 2px of desktop, takes desktop value */
    --font-size-button: 1.125rem; /* 18px — within 2px of desktop, takes desktop value */
    --font-size-stat: 5.375rem; /* 86px */
  }

  @media (min-width: 1024px) {
    /* lg (1024px+) — desktop tier, Figma desktop values. */
    --font-size-h1: 3.75rem; /* 60px */
    --font-size-h2: 3rem; /* 48px */
    --font-size-h3: 2.375rem; /* 38px */
    --font-size-h4: 1.75rem; /* 28px */
    --font-size-h5: 1.5rem; /* 24px */
    --font-size-h5-secondary: 1.375rem; /* 22px */
    --font-size-h6: 1.25rem; /* 20px */
    --font-size-prose-h2: 1.75rem; /* 28px */
    --font-size-prose-h3: 1.5rem; /* 24px */
    --font-size-prose-h4: 1.25rem; /* 20px — within 2px of md, takes md value */
    --font-size-prose-h5: 1.125rem; /* 18px — within 2px of md, takes md value */
    --font-size-eyebrow: 0.875rem; /* 14px */
    --font-size-lede: 1.25rem; /* 20px */
    --font-size-button: 1.125rem; /* 18px */
    --font-size-stat: 6.25rem; /* 100px */
  }

  /* ═══════════════════════════════════════════════════════════════
     SPACING — Stack rhythm
     The vertical gap between two adjacent atoms (Heading, Lede, Text,
     Button) inside a copy slot, keyed by which pair it is rather than by
     which component the slot belongs to — see weg_components' README.md
     "Stack rhythm" structural contract and css/weg-components.css
     [data-stack]. Sourced from the Figma Design System's text-block
     component (node 9023:412's sibling spacing frames), responsive at the
     768px breakpoint shared by every other token in this file. --rhythm-
     eyebrow and --rhythm-headline-lede are flat (Figma uses the same value
     on mobile and desktop); the rest step down below 768px.
     ═══════════════════════════════════════════════════════════════ */
  --rhythm-eyebrow: 0.5rem; /* 8px — eyebrow to headline */
  --rhythm-headline-lede: 1rem; /* 16px — headline to lede */
  --rhythm-headline-body: 1rem; /* 16px mobile — headline/lede to body text, text to text */
  --rhythm-copy-action: 1.5rem; /* 24px mobile — copy to its button(s) */
  --rhythm-action-inline: 1rem; /* 16px mobile — button to button */
  --rhythm-block: 2rem; /* 32px mobile — a copy block to the content below it (grid, view, media) */
  --rhythm-default: 1.5rem; /* 24px mobile — fallback for any unlisted pair (e.g. image next to text) */

  @media (min-width: 768px) {
    --rhythm-headline-body: 1.5rem; /* 24px */
    --rhythm-copy-action: 2rem; /* 32px */
    --rhythm-action-inline: 2rem; /* 32px */
    --rhythm-block: 4rem; /* 64px */
    --rhythm-default: 2rem; /* 32px */
  }

  /* ═══════════════════════════════════════════════════════════════
     PRESERVED — Out of scope for this token pass
     These retain Mercury defaults and will be revisited separately.
     ═══════════════════════════════════════════════════════════════ */
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}