/* Theme: uss-oh-dvs (dark mode) */
/* Ohio Department of Veterans Services */
/* Source: Ohio Brand Guide v1.9 + OHDOV_STYLE_GUIDE.md */
[data-theme="uss-oh-dvs"][data-mode="dark"] {
  --color-neutral-1: var(--neutral-dark-1);
  --color-neutral-2: var(--neutral-dark-2);
  --color-neutral-3: var(--neutral-dark-3);
  --color-neutral-4: var(--neutral-dark-4);
  --color-neutral-5: var(--neutral-dark-5);
  --color-neutral-6: var(--neutral-dark-6);
  --color-neutral-7: var(--neutral-dark-7);
  --color-neutral-8: var(--neutral-dark-8);
  --color-neutral-9: var(--neutral-dark-9);
  --color-neutral-10: var(--neutral-dark-10);
  --color-neutral-11: var(--neutral-dark-11);
  --color-neutral-12: var(--neutral-dark-12);
  --color-neutral-placeholder: var(--neutral-dark-placeholder);

  --color-onyx-1: var(--onyx-dark-1);
  --color-onyx-2: var(--onyx-dark-2);
  --color-onyx-3: var(--onyx-dark-3);
  --color-onyx-4: var(--onyx-dark-4);
  --color-onyx-5: var(--onyx-dark-5);
  --color-onyx-6: var(--onyx-dark-6);
  --color-onyx-7: var(--onyx-dark-7);
  --color-onyx-8: var(--onyx-dark-8);
  --color-onyx-9: var(--onyx-dark-9);
  --color-onyx-10: var(--onyx-dark-10);
  --color-onyx-11: var(--onyx-dark-11);
  --color-onyx-12: var(--onyx-dark-12);
  --color-text-on-onyx: #0a0c0e;

  /* Primary palette — Tier 1 (Full Component)
     Dark anchor #4e7eb9 (Buckeye Blue) vs dark bg (#060606): 4.83:1 — WCAG AA */
  --color-primary-1: #03060c;
  --color-primary-2: #0f151d;
  --color-primary-3: #0f1a27;
  --color-primary-4: #0f1e30;
  --color-primary-5: #15273e;
  --color-primary-6: #1a314e;
  --color-primary-7: #284465;
  --color-primary-8: #33547d;
  --color-primary-9: #4e7eb9;
  --color-primary-10: #6896d0;
  --color-primary-11: #a0c6f5;
  --color-primary-12: #c7e6ff;

  /* Secondary palette — Tier 1 (Full Component)
     Dark anchor #a17448 (Earth Brown) vs dark bg (#060606): 4.93:1 — WCAG AA */
  --color-secondary-1: #090502;
  --color-secondary-2: #1a140e;
  --color-secondary-3: #21170e;
  --color-secondary-4: #281a0c;
  --color-secondary-5: #342212;
  --color-secondary-6: #412b16;
  --color-secondary-7: #563c23;
  --color-secondary-8: #6a4b2d;
  --color-secondary-9: #a17448;
  --color-secondary-10: #b98d63;
  --color-secondary-11: #e3be9c;
  --color-secondary-12: #fddec3;

  /* Accent palette — Tier 2 (Text + Surface)
     Dark anchor #de454e (Cardinal Red) vs dark bg (#060606): 4.89:1 — WCAG AA
     Steps 3-8, 10 omitted — Tier 2 */
  --color-accent-1: #100202;
  --color-accent-2: #220e0e;
  --color-accent-9: #de454e;
  --color-accent-11: #ffa3a1;
  --color-accent-12: #ffc6c3;

  --color-text-on-primary: var(--near-black);
  --color-text-on-secondary: var(--near-black);
  --color-text-on-accent: var(--near-black);

  /* Typography: Ohio Brand Guide v1.9 — Source Sans 3 (primary typeface, all headlines/body).
     No brand monospace specified; tabular falls back to system stack. */
  --font-family-heading: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-family-tabular: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Semantic color tokens */
  --color-action-solid: var(--color-primary-9); /** Primary button fill, solid interactive elements */
  --color-action-solid-hover: var(--color-primary-10); /** Hover state on solid fills */
  --color-action-solid-pressed: var(--color-primary-11); /** Pressed/active state on solid fills */
  --color-action-subtle: var(--color-primary-3); /** Ghost button background, subtle interactive elements */
  --color-action-subtle-hover: var(--color-primary-4); /** Hover state on subtle fills */
  --color-action-subtle-active: var(--color-primary-5); /** Active/pressed state on subtle fills */
  --color-action-text: var(--color-primary-12); /** Brand text for secondary/ghost buttons — palette step 12 (Text). Step 9 is Solid (anchor): a fill you place text *on*, not a text colour. */
  --color-action-text-hover: var(--color-primary-11); /** Hover state for brand text — palette step 11 (Text muted). Steps 11 and 12 are both text steps: hover moves within the text band, never onto a fill step (9 Solid / 10 Solid hovered). */
  --color-action-stroke: var(--color-primary-9); /** Brand stroke for secondary button border — uses brand primary */
  --color-action-stroke-hover: var(--color-primary-10); /** Hover state for brand stroke */
  --color-link-default: var(--color-utility-link); /** Default link color — USWDS blue #005ea2. Fixed across all themes. */
  --color-link-hover: var(--color-utility-link-hover); /** Link hover — USWDS link-dark #0b4778. Fixed across all themes. */
  --color-link-visited: var(--color-utility-link-visited); /** Visited link — USWDS violet-70v #54278f. Fixed across all themes. */
  --color-text-default: var(--color-neutral-12); /** Primary body text — highest contrast */
  --color-text-subtle: var(--color-neutral-11); /** Secondary text, captions, placeholders */
  --color-text-muted: var(--color-neutral-9); /** Disabled text, decorative labels */
  --color-text-on-emphasis: #ffffff; /** Text on solid colored backgrounds (step 9) */
  --color-text-on-muted: #1a1a1a; /** Text on light-tint utility fills (toast, banner). Fixed across all themes/modes. */
  --color-text-placeholder: var(--color-neutral-placeholder); /** Placeholder text, mask hints — AA compliant (4.5:1+) */
  --color-surface-page: var(--color-neutral-1); /** Page/app background */
  --color-surface-default: var(--color-neutral-2); /** Card, panel, sidebar backgrounds */
  --color-surface-raised: var(--color-neutral-1); /** Elevated surfaces (modals, dropdowns) — Marina parity: --global-surface-default equals --global-surface-background in every dark theme (both color-neutral-black); dark-mode elevation is conveyed by the shadow/hairline stroke below, not by lightening the surface */
  --color-surface-solid: var(--near-black); /** Pure near-black surface fill — opt-in for components that need a flat solid background instead of the tinted --color-surface-default (e.g. mms-card surface="solid") */
  --color-surface-sunken: var(--color-neutral-3); /** Inset element fills — progress-bar track, code blocks. Palette step 3 (Element): a fill *inside* a container, not a surface a control is placed on. */
  --color-surface-hover: var(--color-neutral-3); /** Hover state on neutral surfaces — table rows, list items */
  --color-surface-active: var(--color-neutral-4); /** Active/selected state — selected row, active list item */
  --color-surface-brand-subtle: var(--color-primary-2); /** Subtle brand-tinted surface */
  --color-surface-brand-hover: var(--color-primary-3); /** Hover state on brand-tinted surfaces */
  --color-surface-brand-active: var(--color-primary-4); /** Active/selected state on brand-tinted surfaces */
  --color-overlay-scrim: rgba(77, 77, 77, 0.7); /** Marina parity: dark-mode scrim lightens to a mid-gray (--color-utility-overlay-scrim-inverse) instead of staying near-black — the light-mode near-black scrim is nearly invisible against an already near-black dark-mode page */
  --color-border-default: var(--color-neutral-6); /** Default borders — cards, dividers */
  --color-border-subtle: var(--color-neutral-4); /** Subtle borders — table rows, light separators */
  --color-border-strong: var(--color-neutral-8); /** Emphasized borders — active inputs, hover states */
  --color-border-interactive: var(--color-neutral-7); /** Interactive element borders — form controls */
  --color-border-interactive-hover: var(--color-neutral-8); /** Hover state on interactive borders */
  --color-border-focus: var(--color-primary-8); /** Focus state border — brand-colored focus indicator */
  --color-input-border-focus: var(--color-primary-8); /** Focused input border — brand-colored */
  --color-input-border-error: var(--color-utility-error-emphasis); /** Error state border — structural utility color */
  --color-input-surface-error: var(--color-utility-error-muted); /** Error state background — subtle error tint */
  --color-input-border-success: var(--color-utility-success-emphasis); /** Success/valid state border */
  --color-input-surface-success: var(--color-utility-success-muted); /** Success state background — subtle success tint */
  --color-input-border-caution: var(--color-utility-caution-emphasis); /** Warning state border */
  --color-input-surface-caution: var(--color-utility-caution-muted); /** Warning state background — subtle caution tint */
  --color-disabled-text: var(--color-neutral-8); /** Disabled text — readable but clearly inactive */
  --color-disabled-surface: var(--color-neutral-3); /** Disabled surface fill — subtle inactive background */
  --color-disabled-solid: var(--color-neutral-7); /** Disabled solid fill — inactive button/chip background */
  --color-disabled-stroke: var(--color-neutral-6); /** Disabled border — inactive input/control border */
  --color-utility-informational-surface: var(--color-neutral-3); /** Informational surface — info banners, neutral status areas */
  --color-utility-informational-stroke: var(--color-neutral-7); /** Informational border */
  --color-utility-informational-text: var(--color-neutral-11); /** Informational text/icons — meets 4.5:1 on neutral surfaces */

  /* Elevation — Marina parity: dark mode keeps the same black shadow blurs as light mode
     and adds a third zero-blur box-shadow layer as a light neutral hairline stroke, since
     the black shadow alone doesn't read against a dark surface/backdrop */
  --elevation-sm: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(179,179,179,0.40);
  --elevation-md: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(179,179,179,0.50);
  --elevation-lg: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(242,242,242,0.40);
  --elevation-xl: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(242,242,242,0.55);

  /* Semantic typography tokens */
  --type-display-lg-family: var(--font-family-heading);
  --type-display-lg-size: var(--text-display-lg-size);
  --type-display-lg-line-height: var(--text-display-lg-line-height);
  --type-display-lg-letter-spacing: var(--text-display-lg-letter-spacing);
  --type-display-lg-weight: var(--font-weight-bold);
  --type-display-md-family: var(--font-family-heading);
  --type-display-md-size: var(--text-display-md-size);
  --type-display-md-line-height: var(--text-display-md-line-height);
  --type-display-md-letter-spacing: var(--text-display-md-letter-spacing);
  --type-display-md-weight: var(--font-weight-bold);
  --type-display-sm-family: var(--font-family-heading);
  --type-display-sm-size: var(--text-display-sm-size);
  --type-display-sm-line-height: var(--text-display-sm-line-height);
  --type-display-sm-letter-spacing: var(--text-display-sm-letter-spacing);
  --type-display-sm-weight: var(--font-weight-bold);
  --type-heading-1-family: var(--font-family-heading);
  --type-heading-1-size: var(--text-heading-1-size);
  --type-heading-1-line-height: var(--text-heading-1-line-height);
  --type-heading-1-letter-spacing: var(--text-heading-1-letter-spacing);
  --type-heading-1-weight: var(--font-weight-bold);
  --type-heading-2-family: var(--font-family-heading);
  --type-heading-2-size: var(--text-heading-2-size);
  --type-heading-2-line-height: var(--text-heading-2-line-height);
  --type-heading-2-letter-spacing: var(--text-heading-2-letter-spacing);
  --type-heading-2-weight: var(--font-weight-bold);
  --type-heading-3-family: var(--font-family-heading);
  --type-heading-3-size: var(--text-heading-3-size);
  --type-heading-3-line-height: var(--text-heading-3-line-height);
  --type-heading-3-letter-spacing: var(--text-heading-3-letter-spacing);
  --type-heading-3-weight: var(--font-weight-bold);
  --type-heading-4-family: var(--font-family-heading);
  --type-heading-4-size: var(--text-heading-4-size);
  --type-heading-4-line-height: var(--text-heading-4-line-height);
  --type-heading-4-letter-spacing: var(--text-heading-4-letter-spacing);
  --type-heading-4-weight: var(--font-weight-bold);
  --type-heading-5-family: var(--font-family-heading);
  --type-heading-5-size: var(--text-heading-5-size);
  --type-heading-5-line-height: var(--text-heading-5-line-height);
  --type-heading-5-letter-spacing: var(--text-heading-5-letter-spacing);
  --type-heading-5-weight: var(--font-weight-medium);
  --type-heading-6-family: var(--font-family-heading);
  --type-heading-6-size: var(--text-heading-6-size);
  --type-heading-6-line-height: var(--text-heading-6-line-height);
  --type-heading-6-letter-spacing: var(--text-heading-6-letter-spacing);
  --type-heading-6-weight: var(--font-weight-medium);
  --type-body-lg-family: var(--font-family-body);
  --type-body-lg-size: var(--text-body-lg-size);
  --type-body-lg-line-height: var(--text-body-lg-line-height);
  --type-body-lg-weight: var(--font-weight-regular);
  --type-body-md-family: var(--font-family-body);
  --type-body-md-size: var(--text-body-md-size);
  --type-body-md-line-height: var(--text-body-md-line-height);
  --type-body-md-weight: var(--font-weight-regular);
  --type-body-sm-family: var(--font-family-body);
  --type-body-sm-size: var(--text-body-sm-size);
  --type-body-sm-line-height: var(--text-body-sm-line-height);
  --type-body-sm-weight: var(--font-weight-regular);
  --type-ui-label-lg-family: var(--font-family-body);
  --type-ui-label-lg-size: var(--text-ui-label-lg-size);
  --type-ui-label-lg-line-height: var(--text-ui-label-lg-line-height);
  --type-ui-label-lg-letter-spacing: var(--text-ui-label-lg-letter-spacing);
  --type-ui-label-lg-weight: var(--font-weight-medium);
  --type-ui-label-md-family: var(--font-family-body);
  --type-ui-label-md-size: var(--text-ui-label-md-size);
  --type-ui-label-md-line-height: var(--text-ui-label-md-line-height);
  --type-ui-label-md-letter-spacing: var(--text-ui-label-md-letter-spacing);
  --type-ui-label-md-weight: var(--font-weight-medium);
  --type-ui-label-sm-family: var(--font-family-body);
  --type-ui-label-sm-size: var(--text-ui-label-sm-size);
  --type-ui-label-sm-line-height: var(--text-ui-label-sm-line-height);
  --type-ui-label-sm-letter-spacing: var(--text-ui-label-sm-letter-spacing);
  --type-ui-label-sm-weight: var(--font-weight-medium);
  --type-ui-caption-family: var(--font-family-body);
  --type-ui-caption-size: var(--text-ui-caption-size);
  --type-ui-caption-line-height: var(--text-ui-caption-line-height);
  --type-ui-caption-letter-spacing: var(--text-ui-caption-letter-spacing);
  --type-ui-caption-weight: var(--font-weight-regular);
  --type-ui-overline-family: var(--font-family-body);
  --type-ui-overline-size: var(--text-ui-overline-size);
  --type-ui-overline-line-height: var(--text-ui-overline-line-height);
  --type-ui-overline-letter-spacing: var(--text-ui-overline-letter-spacing);
  --type-ui-overline-weight: var(--font-weight-medium);
  --type-ui-overline-text-transform: var(--text-ui-overline-text-transform);
  --type-code-block-family: var(--font-family-tabular);
  --type-code-block-size: var(--text-body-sm-size);
  --type-code-block-line-height: 1.6;
  --type-code-block-weight: var(--font-weight-regular);
  --type-code-inline-family: var(--font-family-tabular);
  --type-code-inline-size: 0.9em; /** Relative to surrounding text */
  --type-code-inline-weight: var(--font-weight-regular);
}

/* ─────────────────────────────────────────────────────────────────────────
   Generated by scripts/build-package.mjs — do not edit dist/ directly.
   Applies the dark values above when the browser or OS requests dark mode
   and the page has not chosen a mode itself. Setting data-mode="light" or
   data-mode="dark" opts out of this entirely.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  [data-theme="uss-oh-dvs"]:not([data-mode]) {

    --color-neutral-1: var(--neutral-dark-1);
    --color-neutral-2: var(--neutral-dark-2);
    --color-neutral-3: var(--neutral-dark-3);
    --color-neutral-4: var(--neutral-dark-4);
    --color-neutral-5: var(--neutral-dark-5);
    --color-neutral-6: var(--neutral-dark-6);
    --color-neutral-7: var(--neutral-dark-7);
    --color-neutral-8: var(--neutral-dark-8);
    --color-neutral-9: var(--neutral-dark-9);
    --color-neutral-10: var(--neutral-dark-10);
    --color-neutral-11: var(--neutral-dark-11);
    --color-neutral-12: var(--neutral-dark-12);
    --color-neutral-placeholder: var(--neutral-dark-placeholder);

    --color-onyx-1: var(--onyx-dark-1);
    --color-onyx-2: var(--onyx-dark-2);
    --color-onyx-3: var(--onyx-dark-3);
    --color-onyx-4: var(--onyx-dark-4);
    --color-onyx-5: var(--onyx-dark-5);
    --color-onyx-6: var(--onyx-dark-6);
    --color-onyx-7: var(--onyx-dark-7);
    --color-onyx-8: var(--onyx-dark-8);
    --color-onyx-9: var(--onyx-dark-9);
    --color-onyx-10: var(--onyx-dark-10);
    --color-onyx-11: var(--onyx-dark-11);
    --color-onyx-12: var(--onyx-dark-12);
    --color-text-on-onyx: #0a0c0e;

    /* Primary palette — Tier 1 (Full Component)
       Dark anchor #4e7eb9 (Buckeye Blue) vs dark bg (#060606): 4.83:1 — WCAG AA */
    --color-primary-1: #03060c;
    --color-primary-2: #0f151d;
    --color-primary-3: #0f1a27;
    --color-primary-4: #0f1e30;
    --color-primary-5: #15273e;
    --color-primary-6: #1a314e;
    --color-primary-7: #284465;
    --color-primary-8: #33547d;
    --color-primary-9: #4e7eb9;
    --color-primary-10: #6896d0;
    --color-primary-11: #a0c6f5;
    --color-primary-12: #c7e6ff;

    /* Secondary palette — Tier 1 (Full Component)
       Dark anchor #a17448 (Earth Brown) vs dark bg (#060606): 4.93:1 — WCAG AA */
    --color-secondary-1: #090502;
    --color-secondary-2: #1a140e;
    --color-secondary-3: #21170e;
    --color-secondary-4: #281a0c;
    --color-secondary-5: #342212;
    --color-secondary-6: #412b16;
    --color-secondary-7: #563c23;
    --color-secondary-8: #6a4b2d;
    --color-secondary-9: #a17448;
    --color-secondary-10: #b98d63;
    --color-secondary-11: #e3be9c;
    --color-secondary-12: #fddec3;

    /* Accent palette — Tier 2 (Text + Surface)
       Dark anchor #de454e (Cardinal Red) vs dark bg (#060606): 4.89:1 — WCAG AA
       Steps 3-8, 10 omitted — Tier 2 */
    --color-accent-1: #100202;
    --color-accent-2: #220e0e;
    --color-accent-9: #de454e;
    --color-accent-11: #ffa3a1;
    --color-accent-12: #ffc6c3;

    --color-text-on-primary: var(--near-black);
    --color-text-on-secondary: var(--near-black);
    --color-text-on-accent: var(--near-black);

    /* Typography: Ohio Brand Guide v1.9 — Source Sans 3 (primary typeface, all headlines/body).
       No brand monospace specified; tabular falls back to system stack. */
    --font-family-heading: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --font-family-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --font-family-tabular: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Semantic color tokens */
    --color-action-solid: var(--color-primary-9); /** Primary button fill, solid interactive elements */
    --color-action-solid-hover: var(--color-primary-10); /** Hover state on solid fills */
    --color-action-solid-pressed: var(--color-primary-11); /** Pressed/active state on solid fills */
    --color-action-subtle: var(--color-primary-3); /** Ghost button background, subtle interactive elements */
    --color-action-subtle-hover: var(--color-primary-4); /** Hover state on subtle fills */
    --color-action-subtle-active: var(--color-primary-5); /** Active/pressed state on subtle fills */
    --color-action-text: var(--color-primary-12); /** Brand text for secondary/ghost buttons — palette step 12 (Text). Step 9 is Solid (anchor): a fill you place text *on*, not a text colour. */
    --color-action-text-hover: var(--color-primary-11); /** Hover state for brand text — palette step 11 (Text muted). Steps 11 and 12 are both text steps: hover moves within the text band, never onto a fill step (9 Solid / 10 Solid hovered). */
    --color-action-stroke: var(--color-primary-9); /** Brand stroke for secondary button border — uses brand primary */
    --color-action-stroke-hover: var(--color-primary-10); /** Hover state for brand stroke */
    --color-link-default: var(--color-utility-link); /** Default link color — USWDS blue #005ea2. Fixed across all themes. */
    --color-link-hover: var(--color-utility-link-hover); /** Link hover — USWDS link-dark #0b4778. Fixed across all themes. */
    --color-link-visited: var(--color-utility-link-visited); /** Visited link — USWDS violet-70v #54278f. Fixed across all themes. */
    --color-text-default: var(--color-neutral-12); /** Primary body text — highest contrast */
    --color-text-subtle: var(--color-neutral-11); /** Secondary text, captions, placeholders */
    --color-text-muted: var(--color-neutral-9); /** Disabled text, decorative labels */
    --color-text-on-emphasis: #ffffff; /** Text on solid colored backgrounds (step 9) */
    --color-text-on-muted: #1a1a1a; /** Text on light-tint utility fills (toast, banner). Fixed across all themes/modes. */
    --color-text-placeholder: var(--color-neutral-placeholder); /** Placeholder text, mask hints — AA compliant (4.5:1+) */
    --color-surface-page: var(--color-neutral-1); /** Page/app background */
    --color-surface-default: var(--color-neutral-2); /** Card, panel, sidebar backgrounds */
    --color-surface-raised: var(--color-neutral-1); /** Elevated surfaces (modals, dropdowns) — Marina parity: --global-surface-default equals --global-surface-background in every dark theme (both color-neutral-black); dark-mode elevation is conveyed by the shadow/hairline stroke below, not by lightening the surface */
    --color-surface-solid: var(--near-black); /** Pure near-black surface fill — opt-in for components that need a flat solid background instead of the tinted --color-surface-default (e.g. mms-card surface="solid") */
    --color-surface-sunken: var(--color-neutral-3); /** Inset element fills — progress-bar track, code blocks. Palette step 3 (Element): a fill *inside* a container, not a surface a control is placed on. */
    --color-surface-hover: var(--color-neutral-3); /** Hover state on neutral surfaces — table rows, list items */
    --color-surface-active: var(--color-neutral-4); /** Active/selected state — selected row, active list item */
    --color-surface-brand-subtle: var(--color-primary-2); /** Subtle brand-tinted surface */
    --color-surface-brand-hover: var(--color-primary-3); /** Hover state on brand-tinted surfaces */
    --color-surface-brand-active: var(--color-primary-4); /** Active/selected state on brand-tinted surfaces */
    --color-overlay-scrim: rgba(77, 77, 77, 0.7); /** Marina parity: dark-mode scrim lightens to a mid-gray (--color-utility-overlay-scrim-inverse) instead of staying near-black — the light-mode near-black scrim is nearly invisible against an already near-black dark-mode page */
    --color-border-default: var(--color-neutral-6); /** Default borders — cards, dividers */
    --color-border-subtle: var(--color-neutral-4); /** Subtle borders — table rows, light separators */
    --color-border-strong: var(--color-neutral-8); /** Emphasized borders — active inputs, hover states */
    --color-border-interactive: var(--color-neutral-7); /** Interactive element borders — form controls */
    --color-border-interactive-hover: var(--color-neutral-8); /** Hover state on interactive borders */
    --color-border-focus: var(--color-primary-8); /** Focus state border — brand-colored focus indicator */
    --color-input-border-focus: var(--color-primary-8); /** Focused input border — brand-colored */
    --color-input-border-error: var(--color-utility-error-emphasis); /** Error state border — structural utility color */
    --color-input-surface-error: var(--color-utility-error-muted); /** Error state background — subtle error tint */
    --color-input-border-success: var(--color-utility-success-emphasis); /** Success/valid state border */
    --color-input-surface-success: var(--color-utility-success-muted); /** Success state background — subtle success tint */
    --color-input-border-caution: var(--color-utility-caution-emphasis); /** Warning state border */
    --color-input-surface-caution: var(--color-utility-caution-muted); /** Warning state background — subtle caution tint */
    --color-disabled-text: var(--color-neutral-8); /** Disabled text — readable but clearly inactive */
    --color-disabled-surface: var(--color-neutral-3); /** Disabled surface fill — subtle inactive background */
    --color-disabled-solid: var(--color-neutral-7); /** Disabled solid fill — inactive button/chip background */
    --color-disabled-stroke: var(--color-neutral-6); /** Disabled border — inactive input/control border */
    --color-utility-informational-surface: var(--color-neutral-3); /** Informational surface — info banners, neutral status areas */
    --color-utility-informational-stroke: var(--color-neutral-7); /** Informational border */
    --color-utility-informational-text: var(--color-neutral-11); /** Informational text/icons — meets 4.5:1 on neutral surfaces */

    /* Elevation — Marina parity: dark mode keeps the same black shadow blurs as light mode
       and adds a third zero-blur box-shadow layer as a light neutral hairline stroke, since
       the black shadow alone doesn't read against a dark surface/backdrop */
    --elevation-sm: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(179,179,179,0.40);
    --elevation-md: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(179,179,179,0.50);
    --elevation-lg: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(242,242,242,0.40);
    --elevation-xl: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30), 0 0 0 1px rgba(242,242,242,0.55);

    /* Semantic typography tokens */
    --type-display-lg-family: var(--font-family-heading);
    --type-display-lg-size: var(--text-display-lg-size);
    --type-display-lg-line-height: var(--text-display-lg-line-height);
    --type-display-lg-letter-spacing: var(--text-display-lg-letter-spacing);
    --type-display-lg-weight: var(--font-weight-bold);
    --type-display-md-family: var(--font-family-heading);
    --type-display-md-size: var(--text-display-md-size);
    --type-display-md-line-height: var(--text-display-md-line-height);
    --type-display-md-letter-spacing: var(--text-display-md-letter-spacing);
    --type-display-md-weight: var(--font-weight-bold);
    --type-display-sm-family: var(--font-family-heading);
    --type-display-sm-size: var(--text-display-sm-size);
    --type-display-sm-line-height: var(--text-display-sm-line-height);
    --type-display-sm-letter-spacing: var(--text-display-sm-letter-spacing);
    --type-display-sm-weight: var(--font-weight-bold);
    --type-heading-1-family: var(--font-family-heading);
    --type-heading-1-size: var(--text-heading-1-size);
    --type-heading-1-line-height: var(--text-heading-1-line-height);
    --type-heading-1-letter-spacing: var(--text-heading-1-letter-spacing);
    --type-heading-1-weight: var(--font-weight-bold);
    --type-heading-2-family: var(--font-family-heading);
    --type-heading-2-size: var(--text-heading-2-size);
    --type-heading-2-line-height: var(--text-heading-2-line-height);
    --type-heading-2-letter-spacing: var(--text-heading-2-letter-spacing);
    --type-heading-2-weight: var(--font-weight-bold);
    --type-heading-3-family: var(--font-family-heading);
    --type-heading-3-size: var(--text-heading-3-size);
    --type-heading-3-line-height: var(--text-heading-3-line-height);
    --type-heading-3-letter-spacing: var(--text-heading-3-letter-spacing);
    --type-heading-3-weight: var(--font-weight-bold);
    --type-heading-4-family: var(--font-family-heading);
    --type-heading-4-size: var(--text-heading-4-size);
    --type-heading-4-line-height: var(--text-heading-4-line-height);
    --type-heading-4-letter-spacing: var(--text-heading-4-letter-spacing);
    --type-heading-4-weight: var(--font-weight-bold);
    --type-heading-5-family: var(--font-family-heading);
    --type-heading-5-size: var(--text-heading-5-size);
    --type-heading-5-line-height: var(--text-heading-5-line-height);
    --type-heading-5-letter-spacing: var(--text-heading-5-letter-spacing);
    --type-heading-5-weight: var(--font-weight-medium);
    --type-heading-6-family: var(--font-family-heading);
    --type-heading-6-size: var(--text-heading-6-size);
    --type-heading-6-line-height: var(--text-heading-6-line-height);
    --type-heading-6-letter-spacing: var(--text-heading-6-letter-spacing);
    --type-heading-6-weight: var(--font-weight-medium);
    --type-body-lg-family: var(--font-family-body);
    --type-body-lg-size: var(--text-body-lg-size);
    --type-body-lg-line-height: var(--text-body-lg-line-height);
    --type-body-lg-weight: var(--font-weight-regular);
    --type-body-md-family: var(--font-family-body);
    --type-body-md-size: var(--text-body-md-size);
    --type-body-md-line-height: var(--text-body-md-line-height);
    --type-body-md-weight: var(--font-weight-regular);
    --type-body-sm-family: var(--font-family-body);
    --type-body-sm-size: var(--text-body-sm-size);
    --type-body-sm-line-height: var(--text-body-sm-line-height);
    --type-body-sm-weight: var(--font-weight-regular);
    --type-ui-label-lg-family: var(--font-family-body);
    --type-ui-label-lg-size: var(--text-ui-label-lg-size);
    --type-ui-label-lg-line-height: var(--text-ui-label-lg-line-height);
    --type-ui-label-lg-letter-spacing: var(--text-ui-label-lg-letter-spacing);
    --type-ui-label-lg-weight: var(--font-weight-medium);
    --type-ui-label-md-family: var(--font-family-body);
    --type-ui-label-md-size: var(--text-ui-label-md-size);
    --type-ui-label-md-line-height: var(--text-ui-label-md-line-height);
    --type-ui-label-md-letter-spacing: var(--text-ui-label-md-letter-spacing);
    --type-ui-label-md-weight: var(--font-weight-medium);
    --type-ui-label-sm-family: var(--font-family-body);
    --type-ui-label-sm-size: var(--text-ui-label-sm-size);
    --type-ui-label-sm-line-height: var(--text-ui-label-sm-line-height);
    --type-ui-label-sm-letter-spacing: var(--text-ui-label-sm-letter-spacing);
    --type-ui-label-sm-weight: var(--font-weight-medium);
    --type-ui-caption-family: var(--font-family-body);
    --type-ui-caption-size: var(--text-ui-caption-size);
    --type-ui-caption-line-height: var(--text-ui-caption-line-height);
    --type-ui-caption-letter-spacing: var(--text-ui-caption-letter-spacing);
    --type-ui-caption-weight: var(--font-weight-regular);
    --type-ui-overline-family: var(--font-family-body);
    --type-ui-overline-size: var(--text-ui-overline-size);
    --type-ui-overline-line-height: var(--text-ui-overline-line-height);
    --type-ui-overline-letter-spacing: var(--text-ui-overline-letter-spacing);
    --type-ui-overline-weight: var(--font-weight-medium);
    --type-ui-overline-text-transform: var(--text-ui-overline-text-transform);
    --type-code-block-family: var(--font-family-tabular);
    --type-code-block-size: var(--text-body-sm-size);
    --type-code-block-line-height: 1.6;
    --type-code-block-weight: var(--font-weight-regular);
    --type-code-inline-family: var(--font-family-tabular);
    --type-code-inline-size: 0.9em; /** Relative to surrounding text */
    --type-code-inline-weight: var(--font-weight-regular);
  }
}