/* ═══════════════════════════════════════════════
   DESIGN TOKENS — CSS Custom Properties
   Single source of truth for colours, spacing,
   typography, and shadow scales.
   ═══════════════════════════════════════════════ */

/* ─── Light Mode (default) ─── */
:root {
  /* Backgrounds */
  --void:    #f4f5f9;
  --abyss:   #ffffff;
  --deep:    #eef0f6;
  --panel:   #ffffff;
  --surface: #f4f5f9;
  --surface2:#e8eaf2;

  /* Borders */
  --border:        rgba(0,0,0,0.07);
  --border-bright: rgba(0,0,0,0.14);

  /* Brand — Gold */
  --gold:      #9a6f1e;
  --gold-light:#b8870f;
  --gold-dim:  rgba(154,111,30,0.10);
  --gold-glow: rgba(154,111,30,0.05);

  /* Semantic colours */
  --cyan:      #0077cc;
  --cyan-dim:  rgba(0,119,204,0.09);
  --red:       #d93025;
  --red-dim:   rgba(217,48,37,0.09);
  --green:     #1a8a4a;
  --green-dim: rgba(26,138,74,0.09);
  --amber:     #c4780a;
  --amber-dim: rgba(196,120,10,0.10);

  /* Text */
  --text-primary:   #0f1624;
  --text-secondary: #4a5568;
  --text-muted:     #8896aa;
  --text-gold:      #9a6f1e;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-serif:   'Instrument Serif', serif;

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  60px;

  /* Shape */
  --radius:    12px;
  --radius-sm: 8px;

  /* Elevation (light only) */
  --shadow-card:    0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-sidebar: 2px 0 12px rgba(0,0,0,0.06);
}

/* ─── Dark Mode ─── */
:root.dark {
  --void:    #05070f;
  --abyss:   #080c18;
  --deep:    #0d1225;
  --panel:   #111827;
  --surface: #161e30;
  --surface2:#1c2640;

  --border:        rgba(255,255,255,0.06);
  --border-bright: rgba(255,255,255,0.12);

  --gold:      #c9a84c;
  --gold-light:#e8c97a;
  --gold-dim:  rgba(201,168,76,0.15);
  --gold-glow: rgba(201,168,76,0.08);

  --cyan:      #00d4ff;
  --cyan-dim:  rgba(0,212,255,0.1);
  --red:       #ff4757;
  --red-dim:   rgba(255,71,87,0.12);
  --green:     #2ed573;
  --green-dim: rgba(46,213,115,0.1);
  --amber:     #ffa502;
  --amber-dim: rgba(255,165,2,0.12);

  --text-primary:   #f0f2f8;
  --text-secondary: #8892a4;
  --text-muted:     #4a5568;
  --text-gold:      #c9a84c;

  --shadow-card:    none;
  --shadow-sidebar: none;
}