/* ═══════════════════════════════════════
   Design Tokens — Dark Theme Only
   ═══════════════════════════════════════ */

:root {
  /* ─── Color Palette ─── */
  --bg:        #0c0e12;
  --surface:   #141820;
  --surface-2: #1c2130;
  --border:    #262d40;
  --border-hover: #3a4560;

  --heading:   #eaeef5;
  --text:      #c8d0dc;
  --text-2:    #7e8aa3;

  --accent:    #7bc4e8;
  --accent-dim:#2d4d6a;
  --accent-glow: rgba(123, 196, 232, 0.08);
  --nav-grad-solid: rgba(12, 14, 18, 0.97);
  --nav-grad-mid: rgba(12, 14, 18, 0.72);
  --nav-grad-soft: rgba(12, 14, 18, 0.22);

  --success:   #4ecdc4;
  --warning:   #ffd93d;
  --error:     #ff6b6b;

  /* ─── Typography ─── */
  --mono: 'JetBrains Mono', 'LXGW WenKai Mono', monospace;
  --sans: 'LXGW WenKai Mono', 'JetBrains Mono', system-ui, sans-serif;

  /* ─── Layout ─── */
  --content-max: 1100px;
  --nav-height: 56px;
  --gap: clamp(1rem, 3vw, 2rem);

  /* ─── Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ─── Shadows ─── */
  --shadow-card: 0 1px 8px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 24px rgba(123, 196, 232, 0.06);
}