/*
  tokens.css — Design token system for averagejoematt.com
  NOTE: The /experiments page exists at site/experiments/index.html
  and is served at averagejoematt.com/experiments/
  Signal aesthetic: dark biopunk data terminal → Signal Doctrine
  Board directive: "Bloomberg Terminal × Patagonia documentary"
  
  HOW TO USE:
    All pages import this file first.
    Never hardcode a color, font, or spacing value outside this file.
    Journal pages use --accent-journal instead of --accent.
    Story pages use .body-story class (Lora serif).
    Signal/data pages use .body-signal class (Inter sans).
    
  SECTIONS:
    1. Color primitives
    2. Semantic tokens (light/dark mode)
    3. Typography
    4. Spacing
    5. Animation
    6. Z-index
*/

/* ── 1. Color primitives ─────────────────────────────────── */
:root {
  /* Base */
  --c-black:          #080c0a;
  --c-surface-1:      #0f1612;  /* DB-01: +2% brightness for card separation */
  --c-surface-2:      #141f17;
  --c-surface-3:      #1a2c1e;

  /* SLOP-1 ROLLBACK: Original neon green values
     --c-green-500: #00e5a0;
     --c-green-400: #00c98c;
     --c-green-300: #00a370;
     --c-green-200: #007a50;
     --c-green-100: rgba(0, 229, 160, 0.12);
     --c-green-050: rgba(0, 229, 160, 0.06);
     --accent-rgb: 0, 229, 160;
     To rollback: replace current values with these originals */

  /* Signal green (primary accent) — SLOP-1: desaturated warm teal */
  --c-green-500:      #3db88a;
  --c-green-400:      #2fa37a;
  --c-green-300:      #258a68;
  --c-green-200:      #1a6b50;
  --c-green-100:      rgba(61, 184, 138, 0.12);
  --c-green-050:      rgba(61, 184, 138, 0.06);

  /* Journal amber (journal/blog accent) */
  --c-amber-500:      #c8843a;
  --c-amber-400:      #e09a4a;
  --c-amber-300:      #a06820;
  --c-amber-100:      rgba(200, 132, 58, 0.12);
  --c-amber-050:      rgba(200, 132, 58, 0.06);

  /* DB-02: CTA coral (subscribe, follow, try-this — distinct from data green) */
  --c-coral-500:      #ff6b6b;
  --c-coral-400:      #ee5a5a;
  --c-coral-300:      #cc4444;
  --c-coral-100:      rgba(255, 107, 107, 0.12);
  --c-coral-050:      rgba(255, 107, 107, 0.06);
  --coral-rgb:        255, 107, 107;

  /* Text scale */
  --c-text-primary:   #e8ede9;
  --c-text-secondary: #8aaa90;  /* PRE-5 ROLLBACK: was #7a9080 */
  --c-text-muted:     #5a7565;
  --c-text-disabled:  #2a3c30;

  /* Borders */
  --c-border-strong:  rgba(0, 229, 160, 0.25);
  --c-border-mid:     rgba(0, 229, 160, 0.12);
  --c-border-subtle:  rgba(0, 229, 160, 0.06);
  --c-border-neutral: rgba(255, 255, 255, 0.06);

  /* RGB triplets for rgba() usage */
  --accent-rgb:       61, 184, 138;  /* SLOP-1: was 0, 229, 160 */
  --amber-rgb:        200, 132, 58;

  /* Status */
  --c-green-status:   #22f574;
  --c-yellow-status:  #f5a623;
  --c-red-status:     #ff4d4d;

  /* DB-03: Seven pillar colors — Character Score, challenges, habits, observatories */
  --pillar-movement:   #3ecf8e;
  --pillar-nutrition:  #f59e0b;
  --pillar-sleep:      #818cf8;
  --pillar-mind:       #a78bfa;
  --pillar-body:       #ef4444;
  --pillar-social:     #06b6d4;
  --pillar-discipline: #f97316;
}

/* ── 2. Semantic tokens ──────────────────────────────────── */
:root {
  --bg:               var(--c-black);
  --surface:          var(--c-surface-1);
  --surface-raised:   var(--c-surface-2);
  --surface-high:     var(--c-surface-3);

  --accent:           var(--c-green-500);
  --accent-dim:       var(--c-green-300);
  --accent-bg:        var(--c-green-100);
  --accent-bg-subtle: var(--c-green-050);

  /* CTA accent — used for subscribe, follow, conversion buttons */
  --cta:              var(--c-coral-500);
  --cta-dim:          var(--c-coral-300);
  --cta-bg:           var(--c-coral-100);
  --cta-bg-subtle:    var(--c-coral-050);

  /* Journal pages override these two */
  --accent-journal:        var(--c-amber-500);
  --accent-journal-dim:    var(--c-amber-300);
  --accent-journal-bg:     var(--c-amber-100);

  --text:             var(--c-text-primary);
  --text-muted:       var(--c-text-secondary);
  --text-faint:       var(--c-text-muted);

  --border:           var(--c-border-mid);
  --border-strong:    var(--c-border-strong);
  --border-subtle:    var(--c-border-subtle);
}

/* ── 2b. Light mode overrides ─────────────────────────────── */
:root[data-theme="light"] {
  /* DB-04: Warm off-white surfaces (was cool-green #f4f7f5 — now warm neutral) */
  --c-black:          #fafaf8;
  --c-surface-1:      #f0eeeb;
  --c-surface-2:      #e8e5e0;
  --c-surface-3:      #dddad4;

  /* Signal green — SLOP-1: desaturated warm teal for light mode (was #008f5f) */
  --c-green-500:      #2a8a62;
  --c-green-400:      #237a55;
  --c-green-300:      #1c6a48;
  --c-green-100:      rgba(42, 138, 98, 0.10);
  --c-green-050:      rgba(42, 138, 98, 0.05);

  /* Journal amber — richer for light mode */
  --c-amber-500:      #a06820;
  --c-amber-400:      #c8843a;
  --c-amber-300:      #7a5018;
  --c-amber-100:      rgba(160, 104, 32, 0.10);
  --c-amber-050:      rgba(160, 104, 32, 0.05);

  /* CTA coral — darker for light bg (5.8:1 on #fafaf8 ✅) */
  --c-coral-500:      #cc4444;
  --c-coral-400:      #b83a3a;
  --c-coral-300:      #a03030;
  --c-coral-100:      rgba(204, 68, 68, 0.10);
  --c-coral-050:      rgba(204, 68, 68, 0.05);
  --coral-rgb:        204, 68, 68;

  /* Text — dark greens on warm light */
  --c-text-primary:   #1a2c1e;   /* 13.2:1 on #fafaf8 ✅ */
  --c-text-secondary: #4a6050;   /* 5.6:1 ✅ */
  --c-text-muted:     #556a62;   /* 5.1:1 ✅ */
  --c-text-disabled:  #b0c0b5;

  /* Borders — stronger for card/surface visibility on warm bg */
  --c-border-strong:  rgba(0, 108, 74, 0.40);
  --c-border-mid:     rgba(0, 108, 74, 0.22);
  --c-border-subtle:  rgba(0, 108, 74, 0.10);
  --c-border-neutral: rgba(0, 0, 0, 0.10);

  /* RGB triplets — light mode */
  --accent-rgb:       42, 138, 98;  /* SLOP-1: was 0, 143, 95 */
  --amber-rgb:        160, 104, 32;

  /* Status — adjusted for light bg readability */
  --c-green-status:   #008f5f;
  --c-yellow-status:  #c47d10;
  --c-red-status:     #d43030;

  /* DB-06: Pillar colors — slightly deeper for light backgrounds */
  --pillar-movement:   #1a9e6a;
  --pillar-nutrition:  #c47d10;
  --pillar-sleep:      #6366f1;
  --pillar-mind:       #7c3aed;
  --pillar-body:       #dc2626;
  --pillar-social:     #0891b2;
  --pillar-discipline: #ea580c;
}

/* ── 3. Typography ───────────────────────────────────────── */
:root {
  /* Fonts */
  --font-display:  'Bebas Neue', 'Impact', sans-serif;
  --font-nav:      'Barlow Condensed', 'Arial Narrow', sans-serif; /* DB-22: wayfinding voice — nav, CTAs, footers */
  --font-mono:     'Space Mono', 'Courier New', monospace;
  --font-serif:    'Lora', 'Georgia', 'Times New Roman', serif;
  --font-sans:     'Inter', system-ui, sans-serif;

  /* Scale (display) */
  --text-hero:     clamp(72px, 9vw, 140px);
  --text-h1:       clamp(48px, 6vw, 88px);
  --text-h2:       clamp(36px, 4vw, 56px);
  --text-h3:       clamp(24px, 3vw, 36px);

  /* Scale (body) */
  --text-xl:       20px;
  --text-lg:       16px;
  --text-base:     14px;
  --text-sm:       12px;
  --text-xs:       11px;
  --text-2xs:      10px;
  --text-3xs:      9px;

  /* DB-07: Two-mode body typography */
  --text-body-signal: 15px;
  --text-body-story:  17px;

  /* Line heights */
  --lh-display:    0.92;
  --lh-heading:    1.05;
  --lh-body:       1.75;
  --lh-mono:       1.6;
  --lh-signal:     1.65;
  --lh-story:      1.85;

  /* Letter spacing */
  --ls-display:    0.02em;
  --ls-heading:    0.01em;
  --ls-label:      0.12em;
  --ls-wide:       0.1em;
  --ls-subtle:     0.06em;
  --ls-tag:        0.2em;
}

/* ── 4. Spacing ──────────────────────────────────────────── */
:root {
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* Layout */
  --nav-height:     64px;
  --max-width:      1280px;
  --content-width:  1100px;
  --prose-width:    680px;
  --page-padding:   48px;
  --page-padding-sm: 24px;
}

/* ── 5. Animation ────────────────────────────────────────── */
:root {
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:     120ms;
  --dur-mid:      240ms;
  --dur-slow:     400ms;
  --dur-page:     600ms;
}

/* ── 6. Z-index ──────────────────────────────────────────── */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}