:root {
  /* ============================================================
     CORE COLOR SYSTEM
     ============================================================ */
  --ink:        #eef3ff;
  --ink-dim:    #cfd3e1;
  --ink-muted:  #c8d1e6;
  --bg:         #0b0f15;
  --panel:      #0f1522;
  --panel-2:    #131a28;
  --panel-3:    #101521;
  --stroke:     rgba(255,255,255,.12);
  --stroke-2:   rgba(255,255,255,.08);

  /* Accent colors */
  --blue:       #0A84FF;
  --green:      #32d74b;
  --red:        #ff3b30;
  --orange:     #ff9f0a;
  --yellow:     #ffd60a;
  --purple:     #bf5af2;

  /* State colors */
  --info:       var(--blue);
  --success:    var(--green);
  --danger:     var(--red);
  --warning:    var(--orange);

  /* ============================================================
     SURFACES / ELEVATION
     ============================================================ */
  --shadow:         0 14px 42px rgba(0,0,0,.55);
  --shadow-strong:  0 18px 40px rgba(0,0,0,.45);
  --shadow-soft:    0 10px 24px rgba(10,132,255,.35);
  --elev-1:         color-mix(in srgb, var(--panel-2) 92%, #000);
  --elev-2:         color-mix(in srgb, var(--panel-3) 94%, #000);

  /* Frosted blur strength (used by menu, headers, modals) */
  --blur: 14px;

  /* ============================================================
     GEOMETRY / TYPOGRAPHY
     ============================================================ */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font: system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Base sizing */
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;

  /* ============================================================
     ANIMATION / TIMING
     ============================================================ */
  --t-fast: 0.15s ease;
  --t-med:  0.3s ease;
  --t-slow: 0.6s ease;

  /* ============================================================
     MENU & LAYOUT
     ============================================================ */
  --menu-width: 296px;
  --menu-z:     10000;
  --menu-z-btn: 10001;

  /* ============================================================
     GRID / SPACING
     ============================================================ */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 14px;
  --gap-lg: 20px;
  --pad-xs: 6px;
  --pad-sm: 10px;
  --pad-md: 14px;
  --pad-lg: 20px;

  /* ============================================================
     LIGHT MODE OVERRIDES (future-ready)
     ============================================================ */
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f7f8fb;
      --ink: #1a1a1c;
      --ink-dim: #45454a;
      --panel: #fff;
      --panel-2: #f2f3f6;
      --stroke: rgba(0,0,0,.12);
      --stroke-2: rgba(0,0,0,.08);
      --shadow: 0 10px 20px rgba(0,0,0,.15);
    }
  }
}