/**
 * Layer 2 — semantic tokens. Hand-maintained; edit this file directly.
 *
 * Nothing generates it. scripts/build-package.mjs only copies it verbatim into
 * dist/. It maps role names a component writes (--color-action-text) onto the
 * 1–12 palette steps a theme defines, so a component never references a step
 * number and a theme never references a component.
 *
 * Every step binding here must match the role map in
 * src/stories/foundations/Colors.stories.ts (stepPurposes) — 9/10 are Solid
 * fills, 11/12 are Text. scripts/contrast-check.mjs gates the result.
 */

:root {
  --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. See the step role map in src/stories/foundations/Colors.stories.ts. */
  --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). Fixed across every theme and mode — only correct on a background that also never inverts. For text on a brand fill use --color-text-on-primary, which inverts with the palette; see .claude/contracts/token-strategy.md and the mms-tabs-item note (DS-108 defect class). */
  --color-text-on-muted: #1a1a1a; /** Text on light-tint utility fills (toast, banner). Fixed across all themes/modes — matches Marina's --global-surface-onsurface-primary; --color-text-default would break contrast in dark mode against a fixed light-tint fill. */
  --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) — typically white */
  --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. No form control uses it. */
  --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(26, 26, 26, 0.7); /** New — no Marina equivalent (Marina: --global-fill-overlay-scrim, rgba(25,25,25,0.8)). Fixed across themes (light + dark) — a modal backdrop stays a dark scrim regardless of surface theme, same rationale as --color-text-on-emphasis. */
  --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 */
  --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);
}