/**
 * Undersignal Design Tokens — CSS Custom Properties
 * 
 * Color System v4 — Perplexity spec (exact)
 * Complete rewrite 2026-04-26
 */

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME (default) — Exact Perplexity tokens
   ══════════════════════════════════════════════════════════════════════════ */
#cf-report,
html:not([data-theme='light']) #cf-report {
  /* ─── PRIMARY TOKENS (Perplexity spec) ─── */
  --bg: #0A0C10;
  --bg-elev: #11141B;
  --bg-elev-2: #161A22;
  --bg-quiet: #0E1117;
  
  --hairline: rgba(255,255,255,0.07);
  --hairline-strong: rgba(255,255,255,0.14);
  
  --ink: #E8ECF2;
  --ink-soft: #B7BFCC;
  --ink-mute: #7C8597;
  --ink-faint: #525B6B;
  
  --accent: #D4A032;
  --accent-soft: rgba(233,182,73,.14);
  --accent-line: rgba(233,182,73,.45);
  
  /* Severity spectrum */
  --crit: #F26B5E;
  --crit-bg: rgba(242,107,94,.10);
  --crit-line: rgba(242,107,94,.45);
  
  --high: #E8893A;
  --high-bg: rgba(232,137,58,.10);
  --high-line: rgba(232,137,58,.40);
  
  --med: #eab308;
  --med-bg: rgba(234,179,8,.10);
  --med-line: rgba(234,179,8,.40);
  
  --low: #5DD0AE;
  --low-bg: rgba(93,208,174,.10);
  --low-line: rgba(93,208,174,.40);
  
  --min: #7AA0E0;
  --min-bg: rgba(122,160,224,.10);
  --min-line: rgba(122,160,224,.35);
  
  /* Track & shadow */
  --score-track: rgba(255,255,255,.06);
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px rgba(0,0,0,.35);
  
  /* Gradients */
  --paper: linear-gradient(180deg,#13171F 0%,#0E1218 100%);
  --hero-grad: radial-gradient(1200px 600px at 80% -10%, rgba(233,182,73,.10), transparent 60%),
               radial-gradient(800px 500px at 0% 0%, rgba(122,160,224,.06), transparent 60%);

  /* ─── LEGACY ALIASES (backward compat with JS) ─── */
  /* Surface aliases */
  --navy: var(--bg);
  --navy-card: var(--bg-elev);
  --navy-card2: var(--bg-elev-2);
  --bg-elevated: var(--bg-elev);
  --card: var(--bg-elev);
  --card-2: var(--bg-elev-2);
  --card-3: var(--bg-elev-2);
  
  /* Border aliases */
  --border: var(--hairline);
  --border-soft: var(--hairline-strong);
  --rail: var(--hairline);
  --rail-soft: var(--hairline-strong);
  
  /* Typography aliases */
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-mute);
  --label: var(--ink-mute);
  --muted: var(--ink-mute);
  
  /* Accent aliases */
  --ui-accent: var(--accent);
  --ui-accent-hover: #F0C05A;
  --ui-accent-dim: var(--accent-soft);
  --ui-accent-border: var(--accent-line);
  --amber: var(--accent);
  --amber-dim: var(--accent-soft);
  --amber-border: var(--accent-line);
  --focus: var(--accent);
  
  /* Score severity aliases */
  --score-low: var(--low);
  --score-mid: var(--med);
  --score-high: var(--high);
  --score-critical: var(--crit);
  --gap-low: var(--low);
  
  /* Status / validation */
  --status-pass: var(--low);
  --status-neutral: var(--ink-mute);
  --status-warning: var(--high);
  --status-alert: var(--crit);
  
  /* Structural hues */
  --structure-editorial: var(--min);
  --structure-ideological: #8777cf;
  --structure-government: #4e9094;
  --structure-social: #8b6fc1;

  /* Device-type tag hues — categorical, OFF the heat ramp (blue/purple/pink) */
  --type-fallacy: #60a5fa;
  --type-bias: #a78bfa;
  --type-rhetoric: #f472b6;
  
  /* Mono font stack */
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* ─── FONT STACK (single source of truth) ─── */
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'General Sans', 'Satoshi', sans-serif;
  /* ─── SURFACE DEPTH (signal-deck compat) ─── */
  --bg-deep: #080A0E;
  --card-elevated: var(--bg-elev-2);
  --border-hover: rgba(255,255,255,0.22);
  --section-alt: #0D1015;
  --text-bright: var(--ink);
  background: var(--bg);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — Exact Perplexity tokens
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme='light'] #cf-report {
  /* ─── PRIMARY TOKENS (Perplexity spec) ─── */
  --bg: #F4F1EA;
  --bg-elev: #FFFDF7;
  --bg-elev-2: #FBF8F1;
  --bg-quiet: #EFEBE2;
  
  --hairline: rgba(20,24,32,.10);
  --hairline-strong: rgba(20,24,32,.18);
  
  --ink: #15181D;
  --ink-soft: #3A4150;
  --ink-mute: #6B7384;
  --ink-faint: #9098A8;
  
  --accent: #A8761A;
  --accent-soft: rgba(168,118,26,.10);
  --accent-line: rgba(168,118,26,.35);
  
  /* Severity spectrum */
  --crit: #C4452F;
  --crit-bg: rgba(196,69,47,.08);
  --crit-line: rgba(196,69,47,.30);
  
  --high: #B8651D;
  --high-bg: rgba(184,101,29,.08);
  --high-line: rgba(184,101,29,.30);
  
  --med: #eab308;
  --med-bg: rgba(234,179,8,.10);
  --med-line: rgba(234,179,8,.30);
  
  --low: #1F8769;
  --low-bg: rgba(31,135,105,.08);
  --low-line: rgba(31,135,105,.28);
  
  --min: #3F6CB6;
  --min-bg: rgba(63,108,182,.08);
  --min-line: rgba(63,108,182,.28);
  
  /* Track & shadow */
  --score-track: rgba(20,24,32,.08);
  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(20,24,32,.06);
  
  /* Gradients */
  --paper: linear-gradient(180deg,#FFFDF7 0%,#FAF6EC 100%);
  --hero-grad: radial-gradient(1200px 600px at 80% -10%, rgba(168,118,26,.10), transparent 60%),
               radial-gradient(800px 500px at 0% 0%, rgba(63,108,182,.05), transparent 60%);

  /* ─── LEGACY ALIASES (backward compat with JS) ─── */
  /* Surface aliases */
  --navy: var(--bg);
  --navy-card: var(--bg-elev);
  --navy-card2: var(--bg-elev-2);
  --bg-elevated: var(--bg-elev);
  --card: var(--bg-elev);
  --card-2: var(--bg-elev-2);
  --card-3: var(--bg-elev-2);
  
  /* Border aliases */
  --border: var(--hairline);
  --border-soft: var(--hairline-strong);
  --rail: var(--hairline);
  --rail-soft: var(--hairline-strong);
  
  /* Typography aliases */
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-mute);
  --label: var(--ink-mute);
  --muted: var(--ink-mute);
  
  /* Accent aliases */
  --ui-accent: var(--accent);
  --ui-accent-hover: #8A5F14;
  --ui-accent-dim: var(--accent-soft);
  --ui-accent-border: var(--accent-line);
  --amber: var(--accent);
  --amber-dim: var(--accent-soft);
  --amber-border: var(--accent-line);
  --focus: var(--accent);
  
  /* Score severity aliases */
  --score-low: var(--low);
  --score-mid: var(--med);
  --score-high: var(--high);
  --score-critical: var(--crit);
  --gap-low: var(--low);
  
  /* Status / validation */
  --status-pass: var(--low);
  --status-neutral: var(--ink-mute);
  --status-warning: var(--high);
  --status-alert: var(--crit);
  
  /* Structural hues */
  --structure-editorial: var(--min);
  --structure-ideological: #675cad;
  --structure-government: #3f7278;
  --structure-social: #71549d;

  /* Device-type tag hues — categorical, OFF the heat ramp (blue/purple/pink) */
  --type-fallacy: #2563eb;
  --type-bias: #7c3aed;
  --type-rhetoric: #db2777;

  /* Mono font stack */
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* ─── FONT STACK (single source of truth — signal-deck-dark.css defers here) ─── */
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'General Sans', 'Satoshi', sans-serif;
  
  /* ─── SURFACE DEPTH (signal-deck compat) ─── */
  --bg-deep: #080A0E;
  --card-elevated: var(--bg-elev-2);
  --border-hover: rgba(255,255,255,0.22);
  --section-alt: #0D1015;
  --text-bright: var(--ink);
  
  background: var(--bg);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS THEME — alias of light theme for app3's focus mode
   app3 uses data-theme="focus" (light cream body, dark nav)
   cf-report inside focus mode uses the same light token values
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme='focus'] #cf-report {
  /* Identical to light theme tokens — focus is a light-bg theme */
  --bg: #F4F1EA;
  --bg-elev: #FFFDF7;
  --bg-elev-2: #FBF8F1;
  --bg-quiet: #EFEBE2;
  --hairline: rgba(20,24,32,.10);
  --hairline-strong: rgba(20,24,32,.18);
  --ink: #15181D;
  --ink-soft: #3A4150;
  --ink-mute: #6B7384;
  --ink-faint: #9098A8;
  --accent: #A8761A;
  --accent-soft: rgba(168,118,26,.10);
  --accent-line: rgba(168,118,26,.35);
  --crit: #C4452F;
  --crit-bg: rgba(196,69,47,.08);
  --crit-line: rgba(196,69,47,.30);
  --high: #B8651D;
  --high-bg: rgba(184,101,29,.08);
  --high-line: rgba(184,101,29,.30);
  --med: #eab308;
  --med-bg: rgba(234,179,8,.10);
  --med-line: rgba(234,179,8,.30);
  --low: #1F8769;
  --low-bg: rgba(31,135,105,.08);
  --low-line: rgba(31,135,105,.28);
  --min: #3F6CB6;
  --min-bg: rgba(63,108,182,.08);
  --min-line: rgba(63,108,182,.28);
  --score-track: rgba(20,24,32,.08);
  --shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 20px rgba(20,24,32,.06);
  --paper: linear-gradient(180deg,#FFFDF7 0%,#FAF6EC 100%);
  --hero-grad: radial-gradient(1200px 600px at 80% -10%, rgba(168,118,26,.10), transparent 60%),
               radial-gradient(800px 500px at 0% 0%, rgba(63,108,182,.05), transparent 60%);
  --navy: var(--bg);
  --navy-card: var(--bg-elev);
  --navy-card2: var(--bg-elev-2);
  --bg-elevated: var(--bg-elev);
  --card: var(--bg-elev);
  --card-2: var(--bg-elev-2);
  --card-3: var(--bg-elev-2);
  --border: var(--hairline);
  --border-soft: var(--hairline-strong);
  --rail: var(--hairline);
  --rail-soft: var(--hairline-strong);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--ink-mute);
  --label: var(--ink-mute);
  --muted: var(--ink-mute);
  --ui-accent: var(--accent);
  --ui-accent-hover: #8A5F14;
  --ui-accent-dim: var(--accent-soft);
  --ui-accent-border: var(--accent-line);
  --amber: var(--accent);
  --amber-dim: var(--accent-soft);
  --amber-border: var(--accent-line);
  --focus: var(--accent);
  --score-low: var(--low);
  --score-mid: var(--med);
  --score-high: var(--high);
  --score-critical: var(--crit);
  --gap-low: var(--low);
  --status-pass: var(--low);
  --status-neutral: var(--ink-mute);
  --status-warning: var(--high);
  --status-alert: var(--crit);
  --structure-editorial: var(--min);
  --structure-ideological: #675cad;
  --structure-government: #3f7278;
  --structure-social: #71549d;

  /* Device-type tag hues — categorical, OFF the heat ramp (blue/purple/pink) */
  --type-fallacy: #2563eb;
  --type-bias: #7c3aed;
  --type-rhetoric: #db2777;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  /* ─── FONT STACK ─── */
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'General Sans', 'Satoshi', sans-serif;
  /* ─── SURFACE DEPTH (signal-deck compat) ─── */
  --bg-deep: #EFEBE2;
  --card-elevated: var(--bg-elev-2);
  --border-hover: rgba(20,24,32,0.25);
  --section-alt: #F4F0E8;
  --text-bright: var(--ink);
    background: var(--bg);
  color: var(--ink);
}