/**
 * Layer 1 — structural tokens. Hand-maintained; edit this file directly.
 *
 * Nothing generates it. scripts/build-package.mjs only copies it verbatim into
 * dist/. These are UX decisions, not brand decisions: spacing, radius, borders,
 * elevation, motion, focus ring. They are fixed across every engagement and a
 * brand sheet must never redefine them.
 *
 * The header this replaced claimed the file was auto-generated. It never was —
 * see the note in tokens-primitives.css.
 */

:root {
  --border-width-none: 0px; /** Marina: --border-thickness-border-none — removes border */
  --border-width-xs: 1px; /** Marina: --border-thickness-border-xs — default/most common border */
  --border-width-sm: 2px; /** Marina: --border-thickness-border-sm — emphasized borders */
  --border-width-md: 3px; /** Marina: --border-thickness-border-md — heavy emphasis */
  --border-width-lg: 4px; /** Marina: --border-thickness-border-lg — decorative borders */
  --border-width-xl: 6px; /** Marina: --border-thickness-border-xl — maximum weight */
  --color-utility-success-muted: #c6f3c6; /** Marina: rgba(198,243,198) — surface background for success states */
  --color-utility-success-emphasis: #0e580e; /** Marina: rgba(14,88,14) — text, borders, icons; ~10:1 on white */
  --color-utility-success-on-fill: #ffffff; /** White indicator on success fills; dark mode overrides to success-emphasis */
  --color-utility-success-stroke: #0e580e; /** Fixed border for a colored-fill surface (toast). Same value as -emphasis but never swapped by [data-mode="dark"] — that swap exists for a different use case (indicator-on-dark-surface) and would collapse this border into the fill color. */
  --color-utility-error-muted: #f3ac99; /** Marina: rgba(243,172,153) — surface background for error states */
  --color-utility-error-emphasis: #aa010e; /** Marina: rgba(170,1,14) — text, borders, icons; ~6:1 on white */
  --color-utility-error-on-fill: #ffffff; /** White indicator on error fills; dark mode overrides to error-emphasis */
  --color-utility-error-stroke: #aa010e; /** Fixed border for a colored-fill surface (toast). See success-stroke comment. */
  --color-utility-caution-muted: #faf3d1; /** USWDS warning-lighter — surface background for caution states */
  --color-utility-caution-emphasis: #936f38; /** USWDS warning-darker — text, borders, icons; 4.59:1 on white (AA) */
  --color-utility-caution-on-fill: #ffffff; /** White indicator on caution fills; dark mode overrides to caution-emphasis */
  --color-utility-caution-stroke: #936f38; /** Fixed border for a colored-fill surface (toast). See success-stroke comment. */
  --color-utility-informational-muted-fixed: #f0f0f0; /** mms-status-tag only — fixed neutral gray fill, never swapped by [data-mode="dark"]. Deliberately NOT named -informational-muted: that name (tokens-semantic.css) is still theme-scoped/mode-swapping and is depended on by mms-toast/mms-inline-alert/mms-alert-banner; reusing it here would silently change their rendering. */
  --color-utility-informational-stroke-fixed: #878787; /** mms-status-tag only — pairs with -muted-fixed above; 3.15:1 contrast, meets WCAG 1.4.11. Same isolation rationale as -muted-fixed — do not repoint -informational-stroke (tokens-semantic.css) at this value without also updating its other consumers. */
  --color-utility-on-fill: #ffffff; /** White text/icons on emphasis fills (buttons, loading bars, progress). Guarantees contrast on dark utility backgrounds. */
  --color-utility-notification: #aa010e; /** Badge/indicator fill — notification dots and count chips. White border (1px) handles dark mode contrast. */
  --color-utility-link: #005ea2; /** USWDS link — default link color. Fixed across all themes. 4.54:1 on white (AA). */
  --color-utility-link-hover: #0b4778; /** USWDS link-dark — hover state. 8.18:1 on white (AAA). */
  --color-utility-link-visited: #54278f; /** USWDS violet-70v — visited link. 7.28:1 on white (AAA). */
  --color-utility-link-dark: #58b4ff; /** USWDS link on dark — default link color for dark mode. 7.5:1 on #1a1a1a. */
  --color-utility-link-hover-dark: #a9d6ff; /** USWDS link-lighter — hover state for dark mode. 11.2:1 on #1a1a1a. */
  --color-utility-link-visited-dark: #c9b6e4; /** USWDS violet-20 — visited link for dark mode. 8.9:1 on #1a1a1a. */
  --elevation-none: none; /** Marina: --global-shadow-m0 */
  --elevation-sm: 0 1px 3px 1px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30); /** Marina: --global-shadow-m1 — cards at rest, subtle lift */
  --elevation-md: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30); /** Marina: --global-shadow-m2 — dropdowns, popovers */
  --elevation-lg: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30); /** Marina: --global-shadow-m3 — modals, drawers */
  --elevation-xl: 0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30); /** Marina: --global-shadow-m4 — top-level overlays, dialogs */
  --focus-ring-width: 2px; /** WCAG 2.2 SC 2.4.11 minimum — 2px CSS pixels. Marina hardcodes this in every component; promoted to token here. */
  --focus-ring-style: solid; /** Marina always uses solid. Tokenized so components never hardcode the shorthand. */
  --focus-ring-color: #386CF7; /** Marina --color-utility-focus-focusstate rgba(56,108,247,1). Structural — cannot be overridden by any brand sheet. */
  --focus-ring-offset: 2px; /** Marina token is 6px but components consistently use 2px in practice. 2px matches browser default focus behavior. */
  --focus-ring-inset-offset: -2px; /** Marina --focus-ring-inset-offset. Applied to bordered elements (text inputs) where the ring draws inside the element boundary. */
  --icon-size-sm: 16px; /** Inline with body text, form control indicators. Marina secondary icon size. */
  --icon-size-md: 20px; /** Default — standard UI icon. Aligns with MUI default and Tailwind w-5. */
  --icon-size-lg: 24px; /** Navigation, prominent UI. Marina primary icon size. WCAG 2.5.8 minimum for interactive targets. */
  --icon-size-xl: 32px; /** Feature/display — onboarding, empty states, hero sections. */
  --layout-content-max-width: 1280px; /** Maximum width of the centered content container. Content stops growing here regardless of viewport width. */
  --layout-inline-padding-compact: 16px; /** Horizontal padding inside the content container when the viewport is below the padding step. Aliases --spacing-md1. */
  --layout-inline-padding-default: 32px; /** Horizontal padding inside the content container at the padding step and above. Aliases --spacing-lg2. Doubles the compact inset rather than stepping one notch up the spacing ramp — matches USWDS's 16→32 site margins. */
  --layout-padding-step: 768px; /** Viewport width at which padding-inline transitions from compact (16px) to default (24px). */
  --layout-gap-tight: 8px; /** Gap between tightly grouped horizontal items — chips, icon + label pairs, inline form controls. Aliases --spacing-sm1. */
  --layout-gap-default: 16px; /** Default gap between siblings in a row or column — list items, form fields, nav items. Aliases --spacing-md1. */
  --layout-gap-loose: 24px; /** Looser gap for cards, larger composite groups, and content blocks that need more breathing room. Aliases --spacing-lg1. */
  --layout-gap-comfortable: 32px; /** Comfortable gap commonly used between major composite blocks and card-grid items. Aliases --spacing-lg2. */
  --motion-duration-instant: 0ms; /** No animation — explicit override for elements that must never animate (e.g. reduced-motion fallback targets). */
  --motion-duration-fast: 100ms; /** Micro-interactions: checkbox fill, radio select, toggle thumb, focus ring appear. Carbon fast-02 reference (110ms); rounded to 100ms for cleaner authoring. */
  --motion-duration-base: 200ms; /** Standard interactive state changes: hover backgrounds, button press, input border color, link underline. Most-used duration. Matches Material short4 and Carbon moderate-01 (150ms) upper end. */
  --motion-duration-moderate: 300ms; /** Component-level transitions: dropdown open, tooltip appear, tab panel switch, accordion expand. Carbon moderate-02 reference (240ms); stepped up to 300ms for government UI readability. */
  --motion-duration-slow: 500ms; /** Larger surface movements: modal enter/exit, drawer slide, toast appear. Carbon slow-01 reference (400ms); stepped up slightly for overlay surfaces on lower-powered government hardware. */
  --motion-duration-loop: 1500ms; /** Continuous ambient loops that repeat indefinitely rather than resolving — the indeterminate loading-bar sweep. Deliberately off the transition scale above (instant→slow), which measures one-shot state changes: a loop has no start or end state to move between, and reusing --motion-duration-slow (500ms) for a full-width sweep reads as frantic. Marina reference: 1.5s. */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); /** General repositioning within the page: elements that move but don't enter or exit the screen. Material standard and Carbon standard-productive reference. */
  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1); /** Elements entering or appearing: dropdown opens, modal fades in, tooltip appears. Decelerates at end — feels like the element is landing. Material decelerated / Carbon entrance-productive reference. */
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); /** Elements leaving or disappearing: dropdown closes, modal fades out, toast dismisses. Accelerates with no soft landing — feels like the element is departing. Material accelerated / Carbon exit-productive reference. */
  --motion-easing-linear: linear; /** Opacity and color transitions. Linear feels even because these properties are perceivable throughout — an ease curve creates an uneven perceptual rhythm on fades. */
  --motion-easing-loop: cubic-bezier(0.4, 0, 0.6, 1); /** Symmetric ease-in-out for continuous ambient loops. Velocity is zero at both endpoints, so the wrap from 100% back to 0% has no perceptible jerk — the asymmetric enter/exit/standard curves all end at a different speed than they start and visibly stutter when repeated. Marina reference: ease-in-out. */
  --radius-none: 0px; /** Marina: --corner-radius-none */
  --radius-xs: 2px; /** Marina: --border-radius-sm — most-used radius across alert-banner, modal, toast, slider, pagination, header */
  --radius-sm: 4px; /** Marina: --corner-radius-small */
  --radius-md: 8px; /** Marina: --corner-radius-base */
  --radius-lg: 16px; /** Marina: --corner-radius-brand — renamed from 'brand' to remove Chubb-specific semantics */
  --radius-full: 1000px; /** Marina: --corner-radius-circle — used for pill shapes (tags, tabs, progress-bar, side-nav) */
  --size-0: 0px; /** Zero utility */
  --size-px: 1px; /** Single-pixel utility for borders, hairlines */
  --size-xs1: 2px;
  --size-xs0: 3px; /** Small details — not in spacing scale */
  --size-xs2: 4px;
  --size-sm0: 6px; /** Small elements — not in spacing scale */
  --size-sm1: 8px; /** Radio dot, small icons */
  --size-sm2: 12px; /** Small icons, indicators */
  --size-md1: 16px; /** Icons, checkbox indicator */
  --size-md2: 20px; /** Toggle thumb */
  --size-lg1: 24px; /** Icons, touch areas */
  --size-lg-28: 28px; /** Accordion/grid indent — ui-kit migration parity */
  --size-lg2: 32px; /** Medium controls, desktop touch target */
  --size-xl1: 40px; /** Large controls */
  --size-xl-touch: 44px; /** WCAG 2.2 minimum touch target (mobile) */
  --size-xl2: 48px; /** Toggle width, controls */
  --size-xl3: 56px; /** Larger controls */
  --size-xxl1: 64px; /** Avatars */
  --size-xxl2: 80px; /** Large avatars — not in spacing scale */
  --size-xxl3: 96px; /** Extra large avatars */
  --size-xxl4: 128px; /** Hero elements */
  --spacing-0: 0px;
  --spacing-px: 1px; /** Marina: --spacing-1px — single-pixel utility for borders, dividers, offsets */
  --spacing-xs0: 3px; /** Marina: --spacing-3px — sub-xs utility, verify component usage on import */
  --spacing-xs1: 2px;
  --spacing-xs2: 4px;
  --spacing-sm1: 8px;
  --spacing-sm2: 12px;
  --spacing-md1: 16px;
  --spacing-md2: 20px;
  --spacing-lg1: 24px;
  --spacing-lg-mid: 28px; /** Marina: --spacing-28px — specific component need between lg1/lg2, resolve on import */
  --spacing-lg2: 32px;
  --spacing-xl1: 40px;
  --spacing-xl2: 48px;
  --spacing-xl3: 56px;
  --spacing-xxl1: 64px;
  --spacing-xxl2: 72px; /** New — no Marina equivalent */
  --spacing-xxl3: 96px; /** Marina: --spacing-xxl2 */
  --spacing-xxl4: 128px; /** Marina: --spacing-xxl3 */
  --font-weight-regular: 400; /** Default body text weight */
  --font-weight-medium: 500; /** Semi-emphasis, labels, subheadings */
  --font-weight-bold: 700; /** Strong emphasis, headings */
  --text-display-lg-size: 3.5rem; /** 56px — Hero taglines, splash screens */
  --text-display-lg-line-height: 1.1; /** Tight for large display */
  --text-display-lg-letter-spacing: -0.02em; /** Tighten for optical balance */
  --text-display-md-size: 2.75rem; /** 44px — Feature callouts, section heroes */
  --text-display-md-line-height: 1.15;
  --text-display-md-letter-spacing: -0.015em;
  --text-display-sm-size: 2.25rem; /** 36px — Secondary hero text, card heroes */
  --text-display-sm-line-height: 1.2;
  --text-display-sm-letter-spacing: -0.01em;
  --text-heading-1-size: 2.5rem; /** 40px — Page title (h1) */
  --text-heading-1-line-height: 1.2;
  --text-heading-1-letter-spacing: -0.01em;
  --text-heading-2-size: 2rem; /** 32px — Major section (h2) */
  --text-heading-2-line-height: 1.25;
  --text-heading-2-letter-spacing: -0.005em;
  --text-heading-3-size: 1.5rem; /** 24px — Subsection (h3) */
  --text-heading-3-line-height: 1.3;
  --text-heading-3-letter-spacing: 0;
  --text-heading-4-size: 1.25rem; /** 20px — Card/panel title (h4) */
  --text-heading-4-line-height: 1.35;
  --text-heading-4-letter-spacing: 0;
  --text-heading-5-size: 1.125rem; /** 18px — Minor heading (h5) */
  --text-heading-5-line-height: 1.4;
  --text-heading-5-letter-spacing: 0;
  --text-heading-6-size: 1rem; /** 16px — Smallest heading (h6) */
  --text-heading-6-line-height: 1.45;
  --text-heading-6-letter-spacing: 0;
  --text-body-lg-size: 1.125rem; /** 18px — Lead paragraphs, emphasis */
  --text-body-lg-line-height: 1.5;
  --text-body-md-size: 1rem; /** 16px — Default body text */
  --text-body-md-line-height: 1.5;
  --text-body-sm-size: 0.875rem; /** 14px — Secondary text, metadata */
  --text-body-sm-line-height: 1.5;
  /**
   * ui-label sizes alias the body scale (14/16/18px) so "md" means the same
   * thing platform-wide. weight (--font-weight-medium) and letter-spacing
   * are the deliberate differentiator from body copy — never redefine size
   * independently of --text-body-* again (see DS-060 session notes).
   */
  --text-ui-label-lg-size: var(--text-body-lg-size); /** 18px */
  --text-ui-label-lg-line-height: 1.4;
  --text-ui-label-lg-letter-spacing: 0.01em;
  --text-ui-label-md-size: var(--text-body-md-size); /** 16px */
  --text-ui-label-md-line-height: 1.4;
  --text-ui-label-md-letter-spacing: 0.01em;
  --text-ui-label-sm-size: var(--text-body-sm-size); /** 14px */
  --text-ui-label-sm-line-height: 1.4;
  --text-ui-label-sm-letter-spacing: 0.01em;
  --text-ui-caption-size: 0.75rem; /** 12px — Timestamps, helper text, fine print */
  --text-ui-caption-line-height: 1.4;
  --text-ui-caption-letter-spacing: 0.02em;
  --text-ui-overline-size: 0.75rem; /** 12px — All caps. Category tags, section labels */
  --text-ui-overline-line-height: 1.4;
  --text-ui-overline-letter-spacing: 0.08em;
  --text-ui-overline-text-transform: uppercase;
  --text-measure-prose: 65ch; /** Optimal for running text (Bringhurst 45-75ch) */
  --text-measure-narrow: 45ch; /** Captions, sidebars, constrained layouts */
  --text-measure-wide: 80ch; /** Code blocks, tables, technical content */
  --responsive-heading-1: clamp(2rem, 1.5rem + 2vw, 2.5rem); /** 32px → 40px across viewport range */
  --responsive-heading-2: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); /** 24px → 32px across viewport range */
  --responsive-heading-3: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /** 20px → 24px across viewport range */
  --responsive-body-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /** 16px → 18px across viewport range */
}

/* Dark mode link color overrides — USWDS compliant */
[data-mode="dark"] {
  --color-utility-link: var(--color-utility-link-dark);
  --color-utility-link-hover: var(--color-utility-link-hover-dark);
  --color-utility-link-visited: var(--color-utility-link-visited-dark);
}

/* Dark mode utility color overrides — lighter fills, darker indicators for contrast */
[data-mode="dark"] {
  --color-utility-error-emphasis: var(--color-utility-error-muted);
  --color-utility-success-emphasis: var(--color-utility-success-muted);
  --color-utility-caution-emphasis: var(--color-utility-caution-muted);
  --color-utility-notification-emphasis: var(--color-utility-notification-muted);
  /* On-fill text/indicators swap to near-black in dark mode — the fill
     itself is now the light -muted tint, so on-fill needs a dark
     foreground to stay readable (same near-black as --color-text-on-muted). */
  --color-utility-error-on-fill: var(--color-text-on-muted);
  --color-utility-success-on-fill: var(--color-text-on-muted);
  --color-utility-caution-on-fill: var(--color-text-on-muted);
  /* Colored-fill surfaces (toast): in dark mode the border collapses into
     the fill color, matching Marina's real behavior. This isn't invisible —
     WCAG 1.4.11 measures the border against what's outside the component
     (the page background), and a -muted fill against the dark page
     background clears 3:1 by a wide margin (10.78–18.14:1), same mechanism
     that makes the fill itself a visible card on the page. */
  --color-utility-success-stroke: var(--color-utility-success-muted);
  --color-utility-error-stroke: var(--color-utility-error-muted);
  --color-utility-caution-stroke: var(--color-utility-caution-muted);
}