/* ============================================================================
   @verseva/design · tokens.css
   THE VERSEVA SIGNATURE. Dark default; [data-theme="light"] is the one flip
   block. Brand themes override values via [data-brand="<slug>"] blocks in
   their own theme.css (living with the brand), never by editing this file.

   Two strata in one file:
   · CRAFT  : roles, scales, states-bearing tokens. Brand-agnostic skeleton.
               Every surface, owned or partner, inherits these.
   · SIGNATURE: the soft-glass material values (glass fills, catch-light,
               navshell tiers, accent bloom). VERSEVA's own language; the
               default clothing for owned surfaces. Partner themes may
               re-value or null these (white-label: craft yes, credit no).

   Laws in force (full text: docs/laws.md): TYPE LAW (mono-is-for-machines),
   SEAM LAW (sections-must-breathe), matte-is-not-flat, hierarchy-from-fill,
   nav-tier-brightness (mode-specific), hairlines-are-decoration (contract
   boundaries come from the text ladder), one accent per view, contrast
   floors 4.5:1 body / 3:1 large + UI parts.

   Provenance: extracted 2026-08-22 from design-core token-architecture.md +
   the design board (ratified VERSEVA Design architecture, 2026-08-22).
   Zero visual change from the pre-package Baseline.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---- CRAFT · color roles (canvas / hairline / text ladders) ---- */
  --bg: #0B0D10;
  --surface: #111318;
  --surface-2: #16181F;
  --hairline-soft: rgba(255, 255, 255, .06);
  --hairline: rgba(255, 255, 255, .08);
  --hairline-strong: rgba(255, 255, 255, .16);
  --text-1: #F4F5F7;
  --text-2: #9CA3AF;
  --text-3: #6B7280;

  /* ---- CRAFT · accent roles (one accent per brand; themes re-value) ---- */
  --accent: #E8352E;
  --accent-hover: #EF5A54;
  --accent-ink: #1A0605;
  --focus: #E8352E;
  --accent-2: transparent;
  --highlight: transparent;

  /* ---- CRAFT · status (never color-alone) ---- */
  --success: #8FCEA8; --success-bg: rgba(133, 199, 161, .10);
  --warn: #E3B95F;    --warn-bg: rgba(227, 185, 95, .10);
  --danger: #F2ABA0;  --danger-bg: rgba(242, 171, 160, .10);

  /* ---- CRAFT · type (the trio; themes may mandate their own faces) ---- */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: 'Archivo', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;
  --display-weight: 650;
  --heading-weight: 620;
  --btn-weight: 600;

  /* ---- CRAFT · spacing (4px base; the only source of spatial values) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container-prose: 65ch;
  --container-content: 72rem;
  --container-wide: 80rem;

  /* ---- CRAFT · radius (posture: soft-large; themes re-map, one posture) ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --r-btn: var(--r-md);

  /* ---- CRAFT · elevation (hairline-first; shadows reinforce) ---- */
  --e-1: 0 1px 2px rgba(0, 0, 0, .24);
  --e-2: 0 6px 20px -6px rgba(0, 0, 0, .28);
  --e-3: 0 20px 48px -12px rgba(0, 0, 0, .36);

  /* ---- CRAFT · motion (transform + opacity only; reduced-motion honored) ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emph: cubic-bezier(.3, 0, .1, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.3, 0, 1, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- CRAFT · data-viz (single-hue magnitude ladder; volume, never type).
     Series identity: --data-3 (accent) is series one, --data-alt the fixed
     second hue (validator-proven CVD-safe against the accent in both modes);
     a third series folds to small multiples, never a generated hue. ---- */
  --data-0: color-mix(in srgb, var(--text-1) 8%, transparent);
  --data-1: color-mix(in srgb, var(--accent) 36%, transparent);
  --data-2: color-mix(in srgb, var(--accent) 64%, transparent);
  --data-3: var(--accent);
  --data-alt: #3B82C4;
  --chart-grid: var(--hairline);
  --chart-label: var(--text-3);

  /* ---- SIGNATURE · soft-glass material (one overhead light source) ---- */
  --glass-fill-3: rgba(15, 17, 22, .70);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-blur: 26px;
  --glass-sat: 1.45;
  --glass-shadow: 0 1px 2px -1px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6), 0 24px 60px -26px rgba(0, 0, 0, .8);
  --glass-glow: 0 0 0 1px rgba(255, 255, 255, .055), 0 8px 40px -18px rgba(255, 255, 255, .11);
  --glass-inset: inset 0 1px 0 0 rgba(255, 255, 255, .34), inset 1px 0 0 0 rgba(255, 255, 255, .08), inset 0 -1px 0 0 rgba(0, 0, 0, .30), inset 0 10px 26px -16px rgba(255, 255, 255, .20);
  --surface-body: linear-gradient(168deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .022) 26%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .06) 100%);

  /* ---- SIGNATURE · navshell tiers (nav-tier-brightness law, dark = inverted:
          frame a shade LIGHTER, main pill DARKER, recessed-in) ---- */
  --nav-gap: 6px;
  --nav-frame: rgba(255, 255, 255, .11);
  --nav-main: rgba(8, 10, 13, .62);
  --nav-pill-inset: inset 0 1px 0 0 rgba(255, 255, 255, .10), inset 0 -1px 0 0 rgba(0, 0, 0, .35), 0 2px 8px -3px rgba(0, 0, 0, .5);

  /* ---- SIGNATURE · accent bloom (generic derivations; themes may supply
          verbatim brand values) ---- */
  --accent-on: color-mix(in srgb, var(--accent) 55%, white);
  --accent-bloom: radial-gradient(120% 150% at 50% 50%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 28%, transparent) 42%, color-mix(in srgb, var(--accent) 10%, transparent) 70%, transparent 100%);
  --accent-active-glow: 0 0 18px -2px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ============ LIGHT · the one flip block (nothing per-screen) ============ */
[data-theme="light"] {
  color-scheme: light;

  --bg: #F4F5F8;
  --surface: #FFFFFF;
  --surface-2: #F1F2F6;
  --hairline-soft: rgba(15, 18, 30, .07);
  --hairline: rgba(15, 18, 30, .10);
  --hairline-strong: rgba(15, 18, 30, .20);
  --text-1: #0E1116;
  --text-2: #5E6573;
  --text-3: #7A828F;

  --accent: #C42B21;
  --accent-hover: #A62119;
  --accent-ink: #FFFFFF;
  --focus: #C42B21;

  --success: #2C6E4B; --success-bg: rgba(44, 110, 75, .10);
  --warn: #8A6512;    --warn-bg: rgba(138, 101, 18, .10);
  --danger: #A33D2E;  --danger-bg: rgba(163, 61, 46, .10);

  --e-1: 0 1px 2px rgba(0, 0, 0, .10);
  --e-2: 0 6px 20px -6px rgba(0, 0, 0, .14);
  --e-3: 0 20px 48px -12px rgba(0, 0, 0, .20);

  /* SIGNATURE · glass, light: white translucency + soft neutral-grey shadow,
     no color in shadows */
  --glass-fill-3: rgba(255, 255, 255, .72);
  --glass-border: rgba(15, 18, 30, .08);
  --glass-shadow: 0 2px 5px -3px rgba(40, 46, 70, .18), 0 7px 16px -11px rgba(40, 46, 70, .28);
  --glass-glow: 0 0 0 1px rgba(15, 18, 30, .03);
  --glass-inset: inset 0 1px 0 0 rgba(255, 255, 255, .95), inset 0 -1px 0 0 rgba(15, 18, 30, .05);
  --surface-body: linear-gradient(168deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, 0) 60%);

  /* SIGNATURE · navshell, light: main pill BRIGHT on recessed grey frame
     (main leads) */
  --nav-frame: rgba(26, 32, 52, .10);
  --nav-main: rgba(255, 255, 255, .92);
  --nav-pill-inset: inset 0 1px 0 0 rgba(255, 255, 255, .9), inset 0 -1px 0 0 rgba(15, 18, 30, .06), 0 3px 8px -3px rgba(40, 46, 70, .16);

  --data-alt: #1D6FD8;

  --accent-on: var(--accent-hover);
  --accent-bloom: radial-gradient(120% 150% at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 44%, color-mix(in srgb, var(--accent) 5%, transparent) 72%, transparent 100%);
  --accent-active-glow: 0 0 16px -2px color-mix(in srgb, var(--accent) 30%, transparent);
}