/* ============================================================================
   CARDSTOCK — DESIGN TOKENS  (the single source of truth for the whole UI)
   ============================================================================

   HOW THIS WORKS (read this before changing anything)
   ---------------------------------------------------------------------------
   TWO layers, on purpose:

     LAYER 1 — PALETTE (raw colours):   --c-ink-900, --c-lime-400, ...
        Named paint. Describes a colour, not a job. Rarely referenced directly.

     LAYER 2 — SEMANTIC ROLES (jobs):   --bg, --surface, --accent, --pos, ...
        Describes what a colour is FOR. Components use ONLY these.
        e.g. a button uses var(--accent), never var(--c-lime-400).

   WHY: components point at the *role*, so re-skinning the whole product =
   remapping the roles once. That's what a "theme" is (see the theme blocks).

   ---------------------------------------------------------------------------
   TO ADD A TOKEN:   add the raw value to LAYER 1, add a role in LAYER 2 that
                     points at it, then var(--your-role) anywhere.
   TO ADD A THEME:   copy a [data-theme="..."] block, rename, remap the roles,
                     set <html data-theme="yourtheme">. Zero component edits.
   CURRENT THEMES:   terminal (dark, DEFAULT) · terminal-light (light)
   ============================================================================ */


/* ============================================================================
   LAYER 1 — PALETTE  (raw colours, theme-agnostic)
   ============================================================================ */
:root {
  /* Neutrals — DARK "charcoal" ramp (lifted off pure black, clear steps) */
  --c-ink-950: #0d0f14;   /* darkest — headers/elevated bars */
  --c-ink-900: #12141a;   /* page background */
  --c-ink-800: #1a1d26;   /* cards / panels (clearly above the page) */
  --c-ink-700: #232734;   /* nested / hover surface */
  --c-ink-600: #2c313d;   /* hairline borders */
  --c-ink-500: #3a4150;   /* stronger borders */
  --c-ink-400: #626b7d;   /* text: tertiary / dim */
  --c-ink-300: #9aa2b3;   /* text: secondary / muted */
  --c-ink-100: #e9ebf1;   /* text: primary */

  /* Neutrals — LIGHT "paper" ramp (grey page, white cards pop) */
  --c-paper-0:   #ffffff;  /* cards / elevated */
  --c-paper-50:  #f3f5f9;  /* nested / hover surface */
  --c-paper-100: #eceff4;  /* page background (soft grey, not white) */
  --c-paper-200: #dde2ea;  /* hairline borders */
  --c-paper-300: #c6cdd8;  /* stronger borders */
  --c-paper-400: #8a93a2;  /* text: tertiary / dim */
  --c-paper-600: #5a6473;  /* text: secondary / muted */
  --c-paper-900: #12151c;  /* text: primary */

  /* Brand / accent hues (each theme picks ONE as its accent) */
  --c-lime-400:   #c6f24e;   /* Terminal accent (fills) */
  --c-lime-500:   #a9db2f;   /* accent hover */
  --c-lime-700:   #5c7c00;   /* dark lime — accent TEXT on light backgrounds */
  --c-violet-400: #8b7bff;   /* reserved: "Booster" theme accent */
  --c-violet-300: #c17bff;
  --c-gold-400:   #d8b25f;   /* reserved: "Foil" theme accent */

  /* Price signals (up / down) — dark + light-safe variants */
  --c-green-400: #2fd08a;   /* up on dark */
  --c-green-600: #0f9d63;   /* up on light (darker for contrast) */
  --c-red-400:   #ff5470;   /* down on dark */
  --c-red-600:   #dc3350;   /* down on light */

  /* Ink that sits ON TOP of a bright accent fill (for contrast) */
  --c-on-lime:   #0f1406;
  --c-on-violet: #0d0a17;
  --c-on-gold:   #17140c;


  /* ==========================================================================
     NON-COLOUR PRIMITIVES  (type, space, radius, motion — theme-agnostic)
     ========================================================================== */
  --font-display: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp) */
  --fs-900: clamp(2.75rem, 2.1rem + 2.9vw, 4.75rem);
  --fs-800: clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --fs-700: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-600: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --fs-500: 1.0625rem;
  --fs-400: 0.9375rem;
  --fs-300: 0.8125rem;
  --fs-200: 0.6875rem;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --content-max: min(1520px, 92vw);  /* fluid: fills big screens, keeps side breathing room; text blocks cap their own measure */

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --hairline: 1px;

  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 1px 0 rgba(0,0,0,.4);
  --elevation-2: 0 8px 24px rgba(0,0,0,.35);
  --elevation-accent: 0 8px 24px rgba(198,242,78,.18);

  /* Motion */
  --dur-fast: .12s; --dur-med: .22s; --dur-slow: .5s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.3, 0, 0.2, 1);
}


/* ============================================================================
   LAYER 2 — SEMANTIC ROLES
   ============================================================================ */

/* ---- THEME: terminal (DARK, default) — "Charcoal" ------------------------- */
:root,
:root[data-theme="terminal"] {
  color-scheme: dark;

  --bg:          var(--c-ink-900);
  --bg-elevated: var(--c-ink-950);
  --surface:     var(--c-ink-800);
  --surface-2:   var(--c-ink-700);
  --border:      var(--c-ink-600);
  --border-strong: var(--c-ink-500);

  --text:        var(--c-ink-100);
  --text-muted:  var(--c-ink-300);
  --text-dim:    var(--c-ink-400);

  --accent:      var(--c-lime-400);   /* accent FILLS (buttons) */
  --accent-hover:var(--c-lime-500);
  --accent-ink:  var(--c-on-lime);    /* text/icon ON an accent fill */
  --accent-text: var(--c-lime-400);   /* accent as TEXT (readable on dark) */
  --accent-glow: var(--elevation-accent);

  --pos:         var(--c-green-400);
  --neg:         var(--c-red-400);
  --focus:       var(--c-lime-400);

  --elevation-shadow: var(--elevation-2);
}

/* ---- THEME: terminal-light (LIGHT) — "Paper" ------------------------------ */
:root[data-theme="terminal-light"] {
  color-scheme: light;

  --bg:          var(--c-paper-100);
  --bg-elevated: var(--c-paper-0);
  --surface:     var(--c-paper-0);
  --surface-2:   var(--c-paper-50);
  --border:      var(--c-paper-200);
  --border-strong: var(--c-paper-300);

  --text:        var(--c-paper-900);
  --text-muted:  var(--c-paper-600);
  --text-dim:    var(--c-paper-400);

  --accent:      var(--c-lime-400);   /* lime fills still work with dark ink */
  --accent-hover:var(--c-lime-500);
  --accent-ink:  var(--c-on-lime);
  --accent-text: var(--c-lime-700);   /* dark lime so accent TEXT is readable on white */
  --accent-glow: 0 8px 24px rgba(92,124,0,.15);

  --pos:         var(--c-green-600);
  --neg:         var(--c-red-600);
  --focus:       var(--c-lime-700);

  --elevation-shadow: 0 8px 24px rgba(18,21,28,.10);
}


/* ============================================================================
   RESERVED THEME STUBS (remap ONLY the roles above; ~15 lines each).
   Uncomment + set <html data-theme="booster"|"foil"> to use.
   ============================================================================ */

/* :root[data-theme="booster"] {
  color-scheme: dark;
  --bg:#0c0a17; --bg-elevated:#08060f; --surface:#161329; --surface-2:#1e1a38;
  --border:#2a2550; --border-strong:#3a3468;
  --text:#efecfb; --text-muted:#9a93c2; --text-dim:#655e8f;
  --accent:var(--c-violet-400); --accent-hover:var(--c-violet-300); --accent-ink:var(--c-on-violet);
  --accent-text:var(--c-violet-400); --pos:var(--c-green-400); --neg:var(--c-red-400); --focus:var(--c-violet-400);
} */

/* :root[data-theme="foil"] {
  color-scheme: dark;
  --bg:#0a0a0b; --bg-elevated:#050505; --surface:#131210; --surface-2:#1b1915;
  --border:#28251f; --border-strong:#3a352b;
  --text:#f2ede2; --text-muted:#a49a86; --text-dim:#6b6455;
  --accent:var(--c-gold-400); --accent-hover:#e6c47a; --accent-ink:var(--c-on-gold);
  --accent-text:var(--c-gold-400); --pos:#5bbf8a; --neg:#e0655f; --focus:var(--c-gold-400);
  --font-display:"Fraunces", Georgia, serif;
} */