/* ============================================
   POSTMORTEM CHESS — Design Tokens (v2)
   Dark consumer dashboard with horror-noir chess branding.
   Pink = brand/chrome. Green/Red = semantic good/bad.
   Horror motifs = light touch accents, not the whole UI.
   ============================================ */

:root {
  /* ---- Color: Backgrounds ---- */
  --bg-void: #060507;          /* page background */
  --bg-panel: #0c0a0d;         /* sidebar */
  --bg-card: #1a1520;          /* default card surface */
  --bg-card-active: #1f0414;   /* active sidebar item / selected state (pink) */
  --bg-card-hover: #221c29;    /* card hover */

  /* ---- Color: Borders ---- */
  --border-subtle: #2e2733;    /* default card border / inner dividers */
  --border-card: #332d38;      /* card/panel outlines (stronger than subtle) */
  --border-pink: #3a0e1f;      /* pink-tinted border accent (brand emphasis) */
  --border-pink-active: #5c1530;

  /* ---- Color: Brand Pink (chrome, nav, identity — NOT status) ---- */
  --brand-pink: #e21e63;
  --brand-pink-bright: #fc4d96;
  --brand-pink-deep: #8c0c3b;
  --brand-pink-muted: #b6346a;
  --brand-pink-wash: rgba(226, 30, 99, 0.12);

  /* ---- Color: Semantic Status (good/bad — drives data, deltas, verdicts) ---- */
  --status-good: #2ecc71;        /* victory, positive delta, strong stat */
  --status-good-bright: #4ade80;
  --status-good-wash: rgba(46, 204, 113, 0.14);
  --status-good-border: #1e5c3a;

  --status-bad: #ef4444;         /* defeat, negative delta, weak stat */
  --status-bad-bright: #f87171;
  --status-bad-wash: rgba(239, 68, 68, 0.14);
  --status-bad-border: #5c1e1e;

  --status-neutral: #facc15;     /* inaccuracy / "okay-ish" middle state, optional */

  /* ---- Color: Track / Neutral ---- */
  --track-gray: #221f23;       /* progress bar unfilled track */

  /* ---- Color: Text ---- */
  --text-primary: #f5f3f4;
  --text-secondary: #9a9499;
  --text-muted: #7a7480;
  --text-ghost: #3d3448;     /* placeholder text, disabled labels */
  --text-on-pink: #1a0008;
  --text-on-good: #04210f;
  --text-on-bad: #240505;

  /* ---- Glow effects (used sparingly — hero stat, brand button, key callouts) ---- */
  --glow-pink-sm: 0 0 8px rgba(226, 30, 99, 0.3);
  --glow-pink-md: 0 0 20px rgba(226, 30, 99, 0.4);
  --glow-good-sm: 0 0 8px rgba(46, 204, 113, 0.3);
  --glow-bad-sm: 0 0 8px rgba(239, 68, 68, 0.3);
  --glow-text-pink: 0 0 10px rgba(252, 77, 150, 0.5);

  /* ---- Typography ---- */
  --font-display:  'Creepster', cursive;                         /* USE SPARINGLY: wordmark + verdict word only */
  --font-ui:       'Space Grotesk', 'Inter', sans-serif;         /* headings, labels, UI chrome */
  --font-body:     'Inter', sans-serif;                          /* body text */
  --font-notation: 'JetBrains Mono', 'Fira Code', monospace;    /* PGN, eval scores, chess notation */

  --fs-display-md: 30px;   /* verdict word */
  --fs-h1: 26px;
  --fs-eyebrow: 11px;
  --fs-stat: 34px;
  --fs-card-title: 16px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-eval-lg: 36px;      /* large eval / KPI number display */
  --fs-eval-sm: 14px;      /* inline eval score (+1.2, -0.3) */
  --fs-notation: 13px;     /* PGN move text */

  --tracking-eyebrow: 0.1em;
  --tracking-button: 0.04em;

  /* ---- Radius ---- */
  --radius-card: 14px;
  --radius-button: 999px;
  --radius-sm: 8px;
  --radius-pill-sm: 6px;

  /* ---- Layout ---- */
  --content-max: 1200px;       /* max-width for .page-wrap containers */

  /* ---- Spacing (8px grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- Elevation / Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 28px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-pink: 0 4px 20px rgba(226,30,99,0.18), 0 1px 6px rgba(226,30,99,0.1);

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms ease;
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Typography expansion ---- */
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fs-stat-lg: 42px;
  --lh-tight: 1.25;

  /* ---- Move Classification Colors ---- */
  --move-brilliant:   #00d4ff;   /* !! cyan — electric, rare */
  --move-great:       #22c55e;   /* !  strong green */
  --move-best:        #4ade80;   /* best — engine-approved */
  --move-good:        #86efac;   /* good — solid */
  --move-inaccuracy:  #fb923c;   /* ?  orange */
  --move-mistake:     #f97316;   /* ?? deep orange */
  --move-blunder:     #ef4444;   /* ??? red */

  /* ---- Data Source Badges (Lichess, Chess.com, Bot, PGN) ---- */
  /* These are distinct from good/bad status — they're just data-source labels */
  --source-lichess: #5a9e4e;
  --source-chesscom: #6a5acd;
  --source-bot: #b06820;
  --source-pgn: #2a8a6c;
  --source-other: #666666;
}