/**
 * Sovereign design tokens — CSS runtime (marketing site).
 * Source of truth: tokens.tokens.json (DTCG 2025.10). See tokens.md.
 *
 * Prefix --sv- = Sovereign. Prefer semantic names over raw palette in UI CSS.
 *
 * NOTE: this file is manually duplicated to internal/web/static/tokens.css and
 * nothing syncs them — edit both, or run scripts/sync-static.sh. /static/*
 * serves from design/ in dev and from the embedded internal/web/static/ tree in
 * production, so a token added to only one works in dev and silently reverts
 * the moment it ships.
 *
 * Palette construction: every colour below was generated in OKLCH and converted
 * to sRGB, not picked by eye. OKLCH is perceptually uniform, so a lightness ramp
 * reads as evenly spaced and two hues at the same L look equally bright — which
 * HSL cannot do, its L being (max+min)/2 on raw RGB. Colours outside the sRGB
 * gamut had CHROMA reduced with L and H held fixed (the CSS Color 4 approach),
 * never per-channel clipped, which would shift hue. Values ship as plain hex:
 * the contrast checker is hex-based and CSS oklch() is only reliably correct
 * from Chrome 122 / Safari 18.
 *
 * Names describe the ROLE, not the hue. An earlier revision named them after
 * the hues themselves; when the palette moved to slate and lime those names
 * became lies, so they are brand- and accent- prefixed now.
 *
 * Do NOT write a token glob as "prefix-<star><slash>" in a comment here: that
 * sequence closes the comment early, the rest of the header parses as CSS, and
 * error recovery then swallows the :root block below — every token silently
 * undefined, every var() empty, the whole site unstyled. That exact typo
 * shipped once. TestStylesheetsParse guards it.
 */
:root {
  /* ── Tier 1: color primitives ── */
  /* No pure white anywhere in the canvas ramp: #FFFFFF is harsh over a long
     working session. NB this does NOT help the accent's contrast and slightly
     hurts it — lime sits at luminance 0.693, so moving a background down from
     white moves it TOWARD the accent (1.41:1 on white, 1.31:1 here, 1.05:1 on
     mid-grey). No light canvas can carry the bright accent; accent-edge exists
     for that. */
  --sv-color-canvas-000: #fafbfd;
  --sv-color-canvas-050: #f4f6f8;
  --sv-color-canvas-100: #edeff2;
  --sv-color-ink-400: #636d79;
  --sv-color-ink-600: #485462;
  --sv-color-ink-900: #182535;
  --sv-color-line-200: #e0e3e7;
  --sv-color-line-400: #c1c4c9;
  /* Interactive borders — anything that BOUNDS a control. Fitted to clear 3:1
     on canvas (WCAG 1.4.11, which is not rounded: 2.99:1 fails). line-200/400
     are decorative rule work and exempt. */
  --sv-color-line-600: #8a8e93;
  --sv-color-brand-700: #414854;
  --sv-color-brand-800: #2c333e;
  --sv-color-brand-900: #1e252d;
  /* Deep ground for full-bleed inverse bands. Darker than brand-900 so a
     brand-800 panel still reads as a raised surface against it. */
  --sv-color-deep-950: #0e1217;
  /* Accent — the one loud colour, reserved for CTAs and indicators. It is a
     FILL, not ink: it carries dark text (accent-ink), and it is invisible as
     text or as a hairline on any light surface. */
  --sv-color-accent-300: #cefdaa;
  --sv-color-accent-400: #bbf679;
  --sv-color-accent-500: #b0eb52;
  --sv-color-accent-600: #a1d13e;
  /* The accent's EDGE and its focus ring: fitted to 3:1 on canvas. A bright
     accent makes a fine button fill while having no perceivable boundary
     against a near-white page — the boundary needs its own token. */
  --sv-color-accent-edge: #6d9c00;
  /* Accent that is legible AS TEXT on a light accent tint — the "coming soon"
     badge ink. Fitted against the 16% wash it actually renders on, not against
     canvas: measuring against canvas is how the previous palette shipped a
     3.95:1 badge that read as passing. */
  --sv-color-accent-800: #4f7300;
  --sv-color-accent-ink: #101a0b;
  --sv-color-success-600: #1a7f51;
  /* Light mint for DEEP grounds only — the "in beta" badge ink and checklist
     ticks on inverse bands, where success-600 is far too dark to read. */
  --sv-color-success-300: #97e5b8;
  /* Ditto, on the 12% success tint used by the "in beta" badge. */
  --sv-color-success-800: #007245;
  --sv-color-warning-600: #ac7300;
  --sv-color-danger-600: #bf3f38;
  --sv-color-white: #ffffff;
  --sv-color-brand-800-a08: rgba(44, 51, 62, 0.08);
  --sv-color-brand-800-a12: rgba(44, 51, 62, 0.12);

  /* ── Tier 1: space (8px rhythm) ── */
  --sv-space-0: 0;
  --sv-space-1: 0.25rem; /* 4 */
  --sv-space-2: 0.5rem;  /* 8 */
  --sv-space-3: 0.75rem; /* 12 */
  --sv-space-4: 1rem;    /* 16 */
  --sv-space-5: 1.5rem;  /* 24 */
  --sv-space-6: 2rem;    /* 32 */
  --sv-space-7: 3rem;    /* 48 */
  --sv-space-8: 4rem;    /* 64 */
  --sv-space-9: 6rem;    /* 96 */
  --sv-space-10: 8rem;   /* 128 */

  /* ── Tier 1: type ── */
  --sv-font-family-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sv-font-family-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sv-font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sv-font-size-100: 0.75rem;   /* 12 */
  --sv-font-size-200: 0.875rem;  /* 14 */
  --sv-font-size-300: 1rem;      /* 16 */
  --sv-font-size-400: 1.125rem;  /* 18 */
  --sv-font-size-500: 1.25rem;   /* 20 */
  --sv-font-size-600: 1.5rem;    /* 24 */
  --sv-font-size-700: 2rem;      /* 32 */
  --sv-font-size-800: 2.5rem;    /* 40 */
  --sv-font-size-900: 3rem;      /* 48 */
  --sv-font-size-1000: 3.75rem;  /* 60 */
  --sv-font-weight-regular: 400;
  --sv-font-weight-medium: 500;
  --sv-font-weight-semibold: 600;
  --sv-font-weight-bold: 700;
  --sv-font-line-tight: 1.2;
  --sv-font-line-snug: 1.35;
  --sv-font-line-body: 1.5;
  --sv-font-feature-tabular: "tnum" 1;

  /* ── Tier 1: shape / motion / layout ── */
  --sv-radius-sm: 6px;
  --sv-radius-md: 8px;
  --sv-radius-lg: 12px;
  --sv-radius-xl: 18px;
  --sv-radius-pill: 999px;
  --sv-border-width-hairline: 1px;
  --sv-border-width-focus: 2px;
  --sv-elevation-1: 0 1px 2px var(--sv-color-brand-800-a08);
  --sv-elevation-2: 0 2px 4px var(--sv-color-brand-800-a08), 0 8px 20px -12px var(--sv-color-brand-800-a12);
  --sv-elevation-3: 0 4px 8px var(--sv-color-brand-800-a08), 0 24px 48px -24px rgba(44, 51, 62, 0.22);
  --sv-duration-instant: 0ms;
  --sv-duration-fast: 120ms;
  --sv-duration-normal: 150ms;
  --sv-duration-slow: 260ms;
  --sv-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sv-focus-ring-offset: 2px;
  --sv-layout-max-content: 1080px;
  /* Wider container for marketing bands; max-content stays the denser width. */
  --sv-layout-max-wide: 1200px;
  --sv-layout-max-narrow: 44rem;
  --sv-layout-max-prose: 40rem;
  --sv-layout-header-height: 64px;
  --sv-hit-target-min: 44px;

  /* ── Tier 2: semantic color ── */
  --sv-color-bg-canvas: var(--sv-color-canvas-100);
  --sv-color-bg-surface: var(--sv-color-canvas-000);
  --sv-color-bg-surface-subtle: var(--sv-color-canvas-050);
  --sv-color-bg-inverse: var(--sv-color-brand-800);
  --sv-color-bg-inverse-hover: var(--sv-color-brand-700);
  --sv-color-bg-inverse-press: var(--sv-color-brand-900);
  --sv-color-bg-deep: var(--sv-color-deep-950);
  --sv-color-text-primary: var(--sv-color-ink-900);
  --sv-color-text-secondary: var(--sv-color-ink-600);
  --sv-color-text-muted: var(--sv-color-ink-400);
  --sv-color-text-on-inverse: var(--sv-color-white);
  --sv-color-text-on-deep: rgba(255, 255, 255, 0.92);
  --sv-color-text-on-deep-secondary: rgba(255, 255, 255, 0.70);
  --sv-color-text-on-deep-muted: rgba(255, 255, 255, 0.50);
  --sv-color-text-brand: var(--sv-color-brand-800);
  --sv-color-text-brand-hover: var(--sv-color-brand-700);
  --sv-color-border-default: var(--sv-color-line-200);
  --sv-color-border-control: var(--sv-color-line-600);
  --sv-color-border-on-deep: rgba(255, 255, 255, 0.14);
  /* The focus ring is accent-EDGE, not accent-500: the bright accent measures
     1.31:1 on canvas, so a ring drawn in it would be invisible exactly when a
     keyboard user needs it. */
  --sv-color-border-focus: var(--sv-color-accent-edge);
  --sv-color-accent-indicator: var(--sv-color-accent-500);
  /* Accent that is legible AS TEXT — on deep grounds, and on light tints. */
  --sv-color-accent-on-deep: var(--sv-color-accent-300);
  --sv-color-accent-on-light: var(--sv-color-accent-800);
  --sv-color-status-success: var(--sv-color-success-600);
  --sv-color-status-warning: var(--sv-color-warning-600);
  --sv-color-status-danger: var(--sv-color-danger-600);
  --sv-color-status-success-on-deep: var(--sv-color-success-300);

  /* ── Tier 2: semantic space ── */
  --sv-space-inset-xs: var(--sv-space-2);
  --sv-space-inset-sm: var(--sv-space-3);
  --sv-space-inset-md: var(--sv-space-4);
  --sv-space-inset-lg: var(--sv-space-5);
  --sv-space-stack-sm: var(--sv-space-2);
  --sv-space-stack-md: var(--sv-space-4);
  --sv-space-stack-lg: var(--sv-space-6);
  --sv-space-section: var(--sv-space-7);
  /* Marketing band rhythm — fluid so a short viewport does not burn a screen
     on padding, and a wide one still breathes. */
  --sv-space-band: clamp(3.5rem, 7vw, 7rem);
  --sv-space-gutter: var(--sv-space-4);

  /* ── Tier 2: motion ── */
  --sv-motion-duration-ui: var(--sv-duration-fast);
  --sv-motion-duration-reveal: var(--sv-duration-slow);
  --sv-motion-easing-ui: var(--sv-easing-standard);

  /* ── Tier 3: component seeds ── */
  /* Buttons are flat: solid fills, hairline borders, a ring on focus, and no
     gradient, lift or drop shadow. Movement on press is the only motion. */
  --sv-button-radius: var(--sv-radius-sm);
  --sv-button-primary-bg: var(--sv-color-bg-inverse);
  --sv-button-primary-bg-hover: var(--sv-color-bg-inverse-hover);
  --sv-button-primary-bg-press: var(--sv-color-bg-inverse-press);
  --sv-button-primary-fg: var(--sv-color-text-on-inverse);
  --sv-button-secondary-border: var(--sv-color-border-control);
  --sv-button-secondary-fg: var(--sv-color-text-brand);
  --sv-button-accent-bg: var(--sv-color-accent-500);
  --sv-button-accent-bg-hover: var(--sv-color-accent-600);
  --sv-button-accent-fg: var(--sv-color-accent-ink);
  --sv-button-accent-border: var(--sv-color-accent-edge);
  --sv-card-bg: var(--sv-color-bg-surface);
  --sv-card-border: var(--sv-color-border-default);
  --sv-card-radius: var(--sv-radius-lg);
  --sv-card-elevation: var(--sv-elevation-1);
  --sv-card-elevation-hover: var(--sv-elevation-2);
  --sv-card-padding: var(--sv-space-inset-lg);
  --sv-header-bg: var(--sv-color-bg-inverse);
  --sv-header-height: var(--sv-layout-header-height);
  --sv-header-nav-active-indicator: var(--sv-color-accent-indicator);
  --sv-input-bg: var(--sv-color-bg-surface);
  --sv-input-border: var(--sv-color-border-control);
  --sv-input-radius: var(--sv-radius-sm);
  --sv-hero-total-fg: var(--sv-color-text-brand);
  --sv-hero-total-rule: var(--sv-color-accent-indicator);
  /* Availability badges. Both inks are fitted against the tint they render on,
     not against canvas — the tint is darker, and measuring against canvas is
     how a 3.95:1 badge once shipped reading as a pass. */
  --sv-badge-soon-bg: rgba(176, 235, 82, 0.16);
  --sv-badge-soon-fg: var(--sv-color-accent-on-light);
  --sv-badge-soon-border: rgba(109, 156, 0, 0.55);
  --sv-badge-now-bg: rgba(26, 127, 81, 0.12);
  --sv-badge-now-fg: var(--sv-color-success-800);
  --sv-badge-now-border: rgba(26, 127, 81, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-motion-duration-ui: var(--sv-duration-instant);
    --sv-motion-duration-reveal: var(--sv-duration-instant);
    --sv-duration-fast: var(--sv-duration-instant);
    --sv-duration-normal: var(--sv-duration-instant);
    --sv-duration-slow: var(--sv-duration-instant);
  }
}