/*
 * tokens.css — single source of truth for design tokens.
 * Layer 1: primitives (raw). Layer 2: semantic (roles).
 * Components reference only semantic tokens; theme = re-bind semantic.
 * Themes: :root (light), [data-theme="dark"], [data-theme="system"] under prefers-color-scheme:dark.
 */

/* ---------- Layer 1: primitives ---------- */
:root {
  /* Brand */
  --brand-teal:      #2B8A94;
  --brand-teal-dk:   #1e6970;
  --brand-teal-bri:  #3ecbd8;
  --brand-lime:      #B4C878;
  --brand-lime-dk:   #8fa050;
  --brand-lime-bri:  #c8d88a;

  /* Ink (text) primitives — light scale */
  --ink-100:  #1a2332;
  --ink-200:  #2c3a4f;
  --ink-300:  #475569;
  --ink-400:  #64748b;
  --ink-500:  #94a3b8;

  /* Paper (surface) primitives — light scale */
  --paper-100: #ffffff;
  --paper-200: #f7f9fc;
  --paper-300: #eef2f7;

  /* Dark-side primitives (declared but not yet bound to semantic tokens here) */
  --ink-dark-100:  #e6edf3;
  --ink-dark-300:  #b1bac4;
  --ink-dark-500:  #8b949e;
  --paper-dark-100:#0d1117;
  --paper-dark-200:#161b22;
  --paper-dark-300:#21262d;

  /* Signal */
  --signal-ok-light:   #2B8A94;
  --signal-ok-dark:    #3db8c5;
  --signal-warn-light: #b8860b;
  --signal-warn-dark:  #ffb454;
  --signal-err-light:  #b91c1c;
  --signal-err-dark:   #ff6b6b;
  --signal-info-light: #2563eb;
  --signal-info-dark:  #6ab7ff;

  /* Type */
  --font-sans: "Inter", "Inter Tight", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace,
               "SFMono-Regular", Menlo, Consolas, monospace;
  --type-xs:   0.75rem;
  --type-sm:   0.875rem;
  --type-base: 1rem;
  --type-lg:   1.125rem;
  --type-xl:   1.25rem;
  --type-2xl:  1.5rem;
  --type-3xl:  2rem;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Space (4px scale) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
  --duration-fast: 180ms;
  --duration-mid:  320ms;
  --duration-slow: 640ms;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-3: 0 16px 32px rgba(0,0,0,0.12);

  /* Z */
  --z-base:    1;
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
  --z-toast:   400;

  /* ---------- Layer 2: semantic — light bindings ---------- */
  --color-bg-page:       var(--paper-100);
  --color-bg-elevated:   var(--paper-200);
  --color-bg-sunken:     var(--paper-300);
  --color-text-body:     var(--ink-100);
  --color-text-muted:    var(--ink-400);
  --color-border:        rgba(26, 35, 50, 0.10);
  --color-border-strong: rgba(26, 35, 50, 0.20);
  --color-link:          var(--brand-teal);
  --color-link-hover:    var(--brand-teal-dk);
  --color-cta-bg:        var(--brand-teal);
  --color-cta-fg:        var(--paper-100);
  --color-focus-ring:    var(--brand-teal);
  --color-signal-ok:     var(--signal-ok-light);
  --color-signal-warn:   var(--signal-warn-light);
  --color-signal-err:    var(--signal-err-light);
  --color-signal-info:   var(--signal-info-light);

  /* Glow stops (used by hero mesh + gradient text) */
  --glow-a: var(--brand-teal);
  --glow-b: var(--brand-lime-dk);
  --glow-c: var(--brand-lime);
  --glow-d: var(--brand-teal-dk);

  --rhythm-section: clamp(1.5rem, 3vw, 3rem);
  --rhythm-block:   clamp(1rem, 2vw, 1.5rem);
  --rhythm-tight:   var(--space-3);
  --prose-measure:  68ch;

  /* Legacy aliases (light) — must live alongside the [data-theme="dark"]
     overrides below so the cascade resolves correctly. Moved here from
     base.css for that reason. */
  --bg:            #ffffff;
  --bg-2:          #f7f9fc;
  --surface:       #eef2f7;
  --border:        #e1e8f0;
  --border-faint:  #f0f4f8;
  --text:          #1a2332;
  --text-muted:    #475467;
  --text-faint:    #5b6577;
  --teal:          #247a83;
  --teal-dark:     #1e6970;
  --teal-hover:    #1e6970;
  --teal-light:    #e6f4f5;
  --teal-lighter:  #f0f9fa;
  --lime:          #B4C878;
  --lime-dark:     #8fa050;
  --lime-bg:       #f5f9eb;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:     0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  /* Footer — same value in both themes; defined once. */
  --footer-bg:     #0a0f18;
  --footer-text:   rgba(255,255,255,.78);
  --footer-faint:  rgba(255,255,255,.65);
  --footer-accent: #3db8c5;

  color-scheme: light;
}

/* ---------- Theme: explicit dark ---------- */
[data-theme="dark"] {
  --color-bg-page:       var(--paper-dark-100);
  --color-bg-elevated:   var(--paper-dark-200);
  --color-bg-sunken:     var(--paper-dark-300);
  --color-text-body:     var(--ink-dark-100);
  --color-text-muted:    var(--ink-dark-500);
  --color-border:        rgba(230, 237, 243, 0.10);
  --color-border-strong: rgba(230, 237, 243, 0.22);
  --color-link:          var(--brand-teal-bri);
  --color-link-hover:    var(--brand-lime-bri);
  --color-cta-bg:        var(--brand-teal-bri);
  --color-cta-fg:        var(--paper-dark-100);
  --color-focus-ring:    var(--brand-teal-bri);
  --color-signal-ok:     var(--signal-ok-dark);
  --color-signal-warn:   var(--signal-warn-dark);
  --color-signal-err:    var(--signal-err-dark);
  --color-signal-info:   var(--signal-info-dark);

  --glow-a: var(--brand-teal-bri);
  --glow-b: var(--brand-lime-bri);
  --glow-c: #58e89c;
  --glow-d: var(--brand-teal-dk);

  /* Legacy aliases — Phase 1 of Part A still has ~200 var(--bg|--text|--teal|...)
     references in style.css. They're rebound to dark values here so consumers
     continue to flip per theme until Phase 5 migrates them to semantic tokens. */
  --bg:            #0d1117;
  --bg-2:          #161b22;
  --surface:       #21262d;
  --border:        #30363d;
  --border-faint:  #1c2128;
  --text:          #e6edf3;
  --text-muted:    #8b949e;
  --text-faint:    #a0a8b3;
  --teal:          #3db8c5;
  --teal-dark:     #1e6970;
  --teal-hover:    #4ac8d5;
  --teal-light:    #0e2226;
  --teal-lighter:  #091618;
  --lime:          #c8d88a;
  --lime-dark:     #B4C878;
  --lime-bg:       #141a0d;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.3);
  --shadow:        0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:     0 12px 32px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ---------- Theme: system-followed dark ---------- */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --color-bg-page:       var(--paper-dark-100);
    --color-bg-elevated:   var(--paper-dark-200);
    --color-bg-sunken:     var(--paper-dark-300);
    --color-text-body:     var(--ink-dark-100);
    --color-text-muted:    var(--ink-dark-500);
    --color-border:        rgba(230, 237, 243, 0.10);
    --color-border-strong: rgba(230, 237, 243, 0.22);
    --color-link:          var(--brand-teal-bri);
    --color-link-hover:    var(--brand-lime-bri);
    --color-cta-bg:        var(--brand-teal-bri);
    --color-cta-fg:        var(--paper-dark-100);
    --color-focus-ring:    var(--brand-teal-bri);
    --color-signal-ok:     var(--signal-ok-dark);
    --color-signal-warn:   var(--signal-warn-dark);
    --color-signal-err:    var(--signal-err-dark);
    --color-signal-info:   var(--signal-info-dark);

    --glow-a: var(--brand-teal-bri);
    --glow-b: var(--brand-lime-bri);
    --glow-c: #58e89c;
    --glow-d: var(--brand-teal-dk);

    /* Legacy aliases — see note in [data-theme="dark"] block above. */
    --bg:            #0d1117;
    --bg-2:          #161b22;
    --surface:       #21262d;
    --border:        #30363d;
    --border-faint:  #1c2128;
    --text:          #e6edf3;
    --text-muted:    #8b949e;
    --text-faint:    #a0a8b3;
    --teal:          #3db8c5;
    --teal-dark:     #1e6970;
    --teal-hover:    #4ac8d5;
    --teal-light:    #0e2226;
    --teal-lighter:  #091618;
    --lime:          #c8d88a;
    --lime-dark:     #B4C878;
    --lime-bg:       #141a0d;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.3);
    --shadow:        0 4px 12px rgba(0,0,0,.4);
    --shadow-lg:     0 12px 32px rgba(0,0,0,.5);

    color-scheme: dark;
  }
}