/* prisma-tokens.css — canonical design tokens for the prisma product surface.
   Source of truth for typography, colour, spacing, radius and shadow across
   all 17 pages.

   Authority: this file supersedes any per-page :root block. Pages still
   carrying inline tokens are migrating off them — until they do, their
   inline rules override these (later rule wins), so this file remains
   non-breaking when extended.

   Loaded BEFORE prisma-base.css so component primitives can reference these.
   See audits/16-ui-ux-design-audit.md Section 7 for the full rationale. */

:root {
  /* ── 1. Type families ──────────────────────────────────────── */
  /* Display now resolves to the same family as UI (Geist) — Fraunces was
     dropped in the redesign sweep because at small sizes it read as
     editorial. The token name is kept so existing rules don't break. */
  --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:    var(--font-ui); /* alias used by some auth pages */

  /* ── 2. Type scale (size + line-height + weight) ───────────── */
  --text-micro-size:    9.5px;  --text-micro-lh:    10px;  --text-micro-weight:    600;
  --text-label-size:    11px;   --text-label-lh:    13px;  --text-label-weight:    600;
  --text-body-size:     13px;   --text-body-lh:     1.5;   --text-body-weight:     400;
  --text-strong-size:   13px;   --text-strong-lh:   1.4;   --text-strong-weight:   600;
  --text-title-size:    15px;   --text-title-lh:    1.3;   --text-title-weight:    600;
  --text-display-size:  22px;   --text-display-lh:  1.1;   --text-display-weight:  500;
  --text-hero-size:     30px;   --text-hero-lh:     1.05;  --text-hero-weight:     400;
  --tracking-tight:     -0.02em;
  --tracking-loose:     0.06em;

  /* ── 3. Spacing scale (use everywhere) ─────────────────────── */
  --pad-3xs: 2px 6px;     /* micro pills (sentiment, tag-ai) */
  --pad-2xs: 4px 8px;     /* badges, meta chips */
  --pad-xs:  6px 10px;    /* filter chips, secondary mini-buttons */
  --pad-sm:  8px 12px;    /* form inputs, card buttons, table cells */
  --pad-md:  10px 16px;   /* primary buttons, mode pills, dropdowns */
  --pad-lg:  14px 20px;   /* modal headers/footers */
  --pad-xl:  20px 24px;   /* card containers */

  --gap-1:  4px;
  --gap-2:  6px;
  --gap-3:  8px;
  --gap-4:  10px;
  --gap-5:  12px;
  --gap-6:  14px;
  --gap-8:  18px;
  --gap-10: 20px;
  --gap-14: 28px;

  /* ── 4. Border-radius scale ────────────────────────────────── */
  --radius-xs:   3px;   /* focus-visible outline */
  --radius-sm:   6px;   /* small chips, app-nav items */
  --radius-md:   8px;   /* form inputs, card buttons */
  --radius-lg:   10px;  /* primary buttons, cards, modals */
  --radius-pill: 999px; /* badges, true pill chips */
  /* legacy alias — ~30 rule sites still use --radius without suffix */
  --radius:      8px;

  /* ── 5. Surfaces (dark, default) ───────────────────────────── */
  --bg:            #0a0a0d;
  --surface:       #101014;
  --surface-2:     #15151b;
  --surface-3:     #1b1b22;
  --surface-hover: rgba(255,255,255,.04);
  --border:        #1e1e26;
  --border-2:      #2a2a34;

  /* ── 6. Text colours (4 levels) ────────────────────────────── */
  --text:    #e9e9ee;     /* primary */
  --text-2:  #a8a8b5;     /* body-secondary: card meta, table cells, descriptions */
  --text-3:  #7c7c90;     /* captions: chip count, plan-name uppercase mono */
  --text-4:  #5a5a68;     /* placeholder dashes, sparkline scale (raised for AA) */
  /* legacy aliases — keep for migration period, delete after sweep */
  --text-muted: var(--text-2);
  --text-faint: var(--text-4);

  /* ── 7. Brand accent ───────────────────────────────────────── */
  --accent:      #2dd4bf;
  --accent-2:    #14b8a6;
  --accent-ink:  #07070a;             /* readable on top of --accent */
  --accent-glow: rgba(45,212,191,.12);

  /* ── 8. Semantic state ─────────────────────────────────────── */
  --pass: #5ed39a;  --pass-bg: rgba(94,211,154,.08);
  --warn: #e9b45a;  --warn-bg: rgba(233,180,90,.08);
  --fail: #e06a6a;  --fail-bg: rgba(224,106,106,.08);
  --info: #7aa8ea;  --info-bg: rgba(122,168,234,.08);
  /* aliases used by some legacy pages */
  --err: var(--fail);
  --ok:  var(--pass);

  /* ── 9. LLM brand palette (token, not hex) ─────────────────── */
  --llm-chatgpt:    #10a37f;
  --llm-claude:     #c97740;
  --llm-perplexity: #20b8cd;
  --llm-gemini:     #4285f4;
  --llm-grok:       #1d9bf0;
  --llm-bing:       #008373;
  --llm-google-aio: #ea4335;

  /* ── 10. Elevation ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-lg: 0 0 0 1px var(--border), 0 24px 48px -24px rgba(0,0,0,.7);

  /* ── 11. App shell ─────────────────────────────────────────── */
  --sidebar-w:   248px;
  --topbar-h:    56px;
  --content-max: 1320px;
  --content-pad: 40px;
}

/* Light theme — used by the admin pages and anywhere a customer flips to
   light mode. Same token names, swapped values. AA-cleared on cream. */
[data-theme="light"] {
  --bg:            #f5f2ea;
  --surface:       #fdfcf8;
  --surface-2:     #eee9de;
  --surface-3:     #e0dbcd;
  --surface-hover: rgba(0,0,0,.03);
  --border:        #d6d0bf;
  --border-2:      #bdb6a4;

  --text:    #15151a;
  --text-2:  #4a4a52;     /* ≥4.5:1 on cream */
  --text-3:  #6a665d;
  --text-4:  #8a857d;     /* AA-borderline; reserve for non-content */

  --accent:      #0f766e;
  --accent-2:    #115e59;
  --accent-ink:  #fdfcf8;
  --accent-glow: rgba(15,118,110,.10);

  --pass: #3a8a5c;  --pass-bg: rgba(58,138,92,.08);
  --warn: #b07a28;  --warn-bg: rgba(176,122,40,.08);
  --fail: #a94444;  --fail-bg: rgba(169,68,68,.06);
  --info: #395e96;  --info-bg: rgba(57,94,150,.06);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px -4px rgba(0,0,0,.10);
  --shadow-lg: 0 0 0 1px var(--border), 0 24px 48px -24px rgba(0,0,0,.16);
}

/* Light theme — admin "financial terminal" variant.
   Set on <html data-theme="light" data-variant="terminal"> when admin pages
   want the warm-cream Bloomberg aesthetic specifically. */
[data-theme="light"][data-variant="terminal"] {
  --bg:        #faf7f0;
  --surface:   #fff;
  --surface-2: #f6f2e7;
  --surface-3: #efeadb;
  --border:    #e6e1d2;
  --border-2:  #cfc8b6;
  --text:      #121212;
  --text-2:    #3d3a35;
  --text-3:    #6e6a60;
  --text-4:    #8a857d;
  --accent:    #0a3a2f;
  --accent-2:  #07251e;
  --accent-ink:#faf7f0;
  --accent-glow:rgba(10,58,47,.10);
  --pass:#1e6b3c; --warn:#8a5a00; --fail:#9a1b1b; --info:#0c4e8a;
  --font-ui:    'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
}

/* ── Legacy admin alias namespace ────────────────────────────────
   admin-dashboard.html historically used --ink / --paper / --rule
   etc. Aliasing them onto the canonical tokens keeps the ~80 rule
   sites working without a rewrite. */
:root {
  --ink:          var(--text);
  --ink-soft:     var(--text-muted);
  --ink-faint:    var(--text-faint);
  --ink-faintest: var(--text-faint);
  --ink-muted:    var(--text-muted);
  --paper:        var(--bg);
  --surface-alt:  var(--surface-2);
  --rule:         var(--border);
  --rule-strong:  var(--border-2);
  --accent-soft:  var(--accent-glow);
  --accent-line:  var(--border-2);
  --ok:           var(--pass);
  --err:          var(--fail);
}

/* ── Type-scale utility classes — drop-in replacements for the 19
   distinct font-size literals across the 3 pages. ──────────────── */
.t-micro   { font: var(--text-micro-weight) var(--text-micro-size)/var(--text-micro-lh) var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
.t-label   { font: var(--text-label-weight) var(--text-label-size)/var(--text-label-lh) var(--font-mono); letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
.t-body    { font: var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font-ui); color: var(--text); }
.t-body-2  { font: var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font-ui); color: var(--text-2); }
.t-strong  { font: var(--text-strong-weight) var(--text-strong-size)/var(--text-strong-lh) var(--font-ui); color: var(--text); }
.t-title   { font: var(--text-title-weight) var(--text-title-size)/var(--text-title-lh) var(--font-display); color: var(--text); letter-spacing: var(--tracking-tight); }
.t-display { font: var(--text-display-weight) var(--text-display-size)/var(--text-display-lh) var(--font-display); color: var(--text); letter-spacing: var(--tracking-tight); }
.t-hero    { font: var(--text-hero-weight) var(--text-hero-size)/var(--text-hero-lh) var(--font-display); color: var(--text); letter-spacing: var(--tracking-tight); }