/* ─────────────────────────────────────────────────────────────────────────
   ERGIVO — semantic design tokens v1.1

   ⛔ THERE IS NOT ONE HEX VALUE IN THIS FILE, AND THERE MUST NEVER BE.
   Every colour comes from a palette file. Swap the entire brand by linking a
   different palette before this file:

       <link rel="stylesheet" href="/assets/palettes/deep.css">
       <link rel="stylesheet" href="/assets/design-tokens.css">

   Components only ever use the SEMANTIC names below (--bg, --primary, --signal).
   They never touch --brand-500 or a literal. That indirection is what makes a
   rebrand a one-line change instead of a sweep.

   Enforced by scripts/check-tokens.sh, which fails the build on any hex found
   outside assets/palettes/.

   Theme contract: the viewer has THREE states.
     :root                                     complete light palette
     prefers-color-scheme: dark (unstamped)    guarded so an explicit light wins
     [data-theme="dark"]                       explicit toggle wins both ways
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── surfaces + type ────────────────────────────────────────────────── */
  --bg:             var(--n-50);
  --surface:        var(--n-100);
  --surface-raised: var(--n-0);
  --border:         var(--n-300);
  --border-strong:  var(--n-400);
  --text:           var(--n-900);
  --text-muted:     var(--n-600);
  --text-faint:     var(--n-500);

  /* ── brand ──────────────────────────────────────────────────────────── */
  --primary:        var(--brand-500);
  --primary-hover:  var(--brand-600);
  --primary-active: var(--brand-700);
  --primary-soft:   var(--brand-50);
  --on-primary:     var(--n-0);

  /* Signal marks the ONE thing to click on a screen. It never decorates. */
  --signal:        var(--cta-500);
  --signal-hover:  var(--cta-600);
  --signal-active: var(--cta-700);
  --signal-soft:   var(--cta-50);
  --signal-ring:   var(--cta-200);
  --on-signal:     var(--n-900);   /* white on Signal is 3.1:1 — use ink */

  --accent:      var(--accent-500);
  --accent-soft: var(--accent-100);
  --tone:        var(--tone-500);

  /* ── status: separate from brand so it never competes with Signal ───── */
  --success: var(--ok-500);   --success-soft: var(--ok-soft);
  --warning: var(--warn-500); --warning-soft: var(--warn-soft);
  --error:   var(--err-500);  --error-soft:   var(--err-soft);
  --info:    var(--info-500); --info-soft:    var(--info-soft);

  /* ── type ───────────────────────────────────────────────────────────── */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Public Sans', -apple-system, system-ui, sans-serif;
  --font-data:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-h1: clamp(2.125rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.6875rem, 3.4vw, 2.375rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.625rem);
  --fs-h4: clamp(1.125rem, 1.6vw, 1.25rem);
  --fs-lg: 1.1875rem; --fs-md: 1.0625rem; --fs-sm: .875rem; --fs-xs: .75rem;

  --lh-tight: 1.05; --lh-head: 1.18; --lh-body: 1.6;
  --tr-h1: -.02em;  --tr-h2: -.015em; --tr-label: .14em; --tr-wordmark: -.03em;

  /* ── space, measure, radius, motion ─────────────────────────────────── */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;  --s-8:4rem;   --s-9:6rem; --s-10:8rem;
  --measure: 65ch;
  --wrap: 72rem;
  --r-sm:3px; --r-md:5px; --r-lg:10px; --r-full:9999px;
  --dur:160ms; --ease:cubic-bezier(.2,.6,.3,1);

  /* Shadows are tinted by the palette's ink, not a generic black. */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--n-900) 6%, transparent);
  --shadow-2: 0 1px 2px color-mix(in srgb, var(--n-900) 6%, transparent),
              0 8px 24px -14px color-mix(in srgb, var(--n-900) 22%, transparent);
  --shadow-3: 0 2px 4px color-mix(in srgb, var(--n-900) 7%, transparent),
              0 18px 40px -20px color-mix(in srgb, var(--n-900) 30%, transparent);
  --ring: 0 0 0 3px var(--signal-ring);
}

/* ── dark: system default (unstamped); an explicit light choice still wins ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             var(--dk-bg);
    --surface:        var(--dk-surface);
    --surface-raised: var(--dk-raised);
    --border:         var(--dk-border);
    --border-strong:  var(--dk-border-strong);
    --text:           var(--dk-text);
    --text-muted:     var(--dk-muted);
    --text-faint:     var(--dk-faint);

    --primary:        var(--brand-lifted);
    --primary-hover:  var(--brand-lifted-hi);
    --primary-active: var(--brand-lifted-lo);
    --primary-soft:   var(--dk-surface);
    --on-primary:     var(--n-950);

    --signal:        var(--cta-lifted);
    --signal-hover:  var(--cta-lifted-hi);
    --signal-active: var(--cta-lifted-lo);
    --signal-soft:   var(--dk-surface);
    --signal-ring:   var(--cta-700);
    --on-signal:     var(--n-950);

    --success: var(--ok-lifted);   --success-soft: var(--ok-soft-dk);
    --warning: var(--warn-lifted); --warning-soft: var(--warn-soft-dk);
    --error:   var(--err-lifted);  --error-soft:   var(--err-soft-dk);
    --info:    var(--info-lifted); --info-soft:    var(--info-soft-dk);

    --shadow-1: 0 1px 2px color-mix(in srgb, var(--n-950) 45%, transparent);
    --shadow-2: 0 1px 2px color-mix(in srgb, var(--n-950) 45%, transparent),
                0 8px 24px -14px color-mix(in srgb, var(--n-950) 75%, transparent);
    --shadow-3: 0 2px 4px color-mix(in srgb, var(--n-950) 55%, transparent),
                0 18px 40px -20px color-mix(in srgb, var(--n-950) 85%, transparent);
  }
}

/* ── dark: explicit toggle, wins in both directions ───────────────────── */
:root[data-theme="dark"] {
  --bg:             var(--dk-bg);
  --surface:        var(--dk-surface);
  --surface-raised: var(--dk-raised);
  --border:         var(--dk-border);
  --border-strong:  var(--dk-border-strong);
  --text:           var(--dk-text);
  --text-muted:     var(--dk-muted);
  --text-faint:     var(--dk-faint);

  --primary:        var(--brand-lifted);
  --primary-hover:  var(--brand-lifted-hi);
  --primary-active: var(--brand-lifted-lo);
  --primary-soft:   var(--dk-surface);
  --on-primary:     var(--n-950);

  --signal:        var(--cta-lifted);
  --signal-hover:  var(--cta-lifted-hi);
  --signal-active: var(--cta-lifted-lo);
  --signal-soft:   var(--dk-surface);
  --signal-ring:   var(--cta-700);
  --on-signal:     var(--n-950);

  --success: var(--ok-lifted);   --success-soft: var(--ok-soft-dk);
  --warning: var(--warn-lifted); --warning-soft: var(--warn-soft-dk);
  --error:   var(--err-lifted);  --error-soft:   var(--err-soft-dk);
  --info:    var(--info-lifted); --info-soft:    var(--info-soft-dk);

  --shadow-1: 0 1px 2px color-mix(in srgb, var(--n-950) 45%, transparent);
  --shadow-2: 0 1px 2px color-mix(in srgb, var(--n-950) 45%, transparent),
              0 8px 24px -14px color-mix(in srgb, var(--n-950) 75%, transparent);
  --shadow-3: 0 2px 4px color-mix(in srgb, var(--n-950) 55%, transparent),
              0 18px 40px -20px color-mix(in srgb, var(--n-950) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}