/* ============================================================
   DESIGN TOKENS — all colors, fonts, and spacing live here.
   Never hardcode any of these values in other CSS files.
   ============================================================ */

:root {
  /* ── Background ─────────────────────────────────────────── */
  --bg:           #0a0a0f;
  --bg-elevated:  #0f0f1a;
  --surface:      #14141f;
  --surface-2:    #1a1a2e;
  --surface-3:    #1f1f38;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ── Accent — Purple (NEVER blue) ──────────────────────── */
  --accent:       #7c3aed;
  --accent-hover: #6d28d9;
  --accent-light: rgba(124, 58, 237, 0.15);
  --accent-glow:  rgba(124, 58, 237, 0.35);

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary:   #f0f0f8;
  --text-secondary: #9090b0;
  --text-muted:     #606080;
  --text-disabled:  #3a3a55;

  /* ── Semantic ───────────────────────────────────────────── */
  --green:       #10b981;
  --green-light: rgba(16, 185, 129, 0.15);
  --red:         #ef4444;
  --red-light:   rgba(239, 68, 68, 0.15);
  --amber:       #f59e0b;
  --amber-light: rgba(245, 158, 11, 0.15);

  /* ── Typography ─────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Shape ──────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg:     0 10px 20px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-xl:     0 20px 40px rgba(0,0,0,0.6), 0 10px 10px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 24px var(--accent-glow);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition:      200ms ease;
  --transition-slow: 300ms ease;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-raised:   10;
  --z-nav:      50;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-width:     240px;
  --header-height:     64px;
  --bottom-nav-height: 64px;
  --content-max-width: 1100px;
}

/* ── Light Mode ──────────────────────────────────────────── */
body.light-mode {
  --bg:           #f4f4f8;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f0f0f5;
  --surface-3:    #e6e6f0;
  --border:       rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);

  --text-primary:   #0f0f1a;
  --text-secondary: #50507a;
  --text-muted:     #8080a0;
  --text-disabled:  #c0c0d8;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 20px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.08);
}