/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
  /* Primitive colors — blue-tinted gray scale */
  --gray-1: #08090d;
  --gray-2: #0e1015;
  --gray-3: #151720;
  --gray-4: #1c1e2a;
  --gray-5: #252736;
  --gray-6: #2e3146;
  --gray-7: #3b3f56;
  --gray-8: #4e5270;
  --gray-9: #6b708a;
  --gray-10: #9ba0b8;
  --gray-11: #d0d3e0;
  --gray-12: #f0f1f5;

  /* Accent: Indigo → Violet */
  --indigo-4: #312e81;
  --indigo-5: #3730a3;
  --indigo-6: #4f46e5;
  --indigo-7: #6366f1;
  --indigo-9: #a5b4fc;
  --indigo-a3: rgba(99, 102, 241, .12);
  --indigo-a5: rgba(99, 102, 241, .24);

  --violet-5: #7c3aed;
  --violet-6: #8b5cf6;
  --violet-9: #c4b5fd;

  /* Keep blue for legacy compatibility */
  --blue-5: var(--indigo-5);
  --blue-6: var(--indigo-6);
  --blue-9: var(--indigo-9);
  --blue-a3: var(--indigo-a3);
  --blue-a5: var(--indigo-a5);

  /* Success: Emerald / Teal */
  --green-5: #059669;
  --green-6: #10b981;
  --green-9: #6ee7b7;
  --green-a3: rgba(16, 185, 129, .12);
  --green-a5: rgba(16, 185, 129, .24);

  /* Danger */
  --red-5: #dc2626;
  --red-6: #ef4444;
  --red-9: #fca5a5;
  --red-a3: rgba(239, 68, 68, .10);

  /* Warning */
  --amber-5: #d97706;
  --amber-9: #fcd34d;
  --amber-a3: rgba(245, 158, 11, .10);

  /* ── Semantic tokens ────────────────────────────────────────────── */
  --bg-root: var(--gray-1);
  --bg-surface: var(--gray-2);
  --bg-elevated: var(--gray-3);
  --bg-overlay: var(--gray-4);
  --bg-hover: rgba(255, 255, 255, .04);
  --bg-active: rgba(255, 255, 255, .06);

  --border-default: var(--gray-5);
  --border-subtle: var(--gray-4);
  --border-strong: var(--gray-6);

  --text-primary: var(--gray-12);
  --text-secondary: var(--gray-10);
  --text-tertiary: var(--gray-8);
  --text-link: var(--indigo-9);

  --accent: var(--indigo-6);
  --accent-hover: var(--indigo-5);
  --accent-text: var(--indigo-9);
  --accent-bg: var(--indigo-a3);

  --success: var(--green-6);
  --success-hover: var(--green-5);
  --success-text: var(--green-9);
  --success-bg: var(--green-a3);

  --danger: var(--red-5);
  --danger-hover: var(--red-6);
  --danger-text: var(--red-9);
  --danger-bg: var(--red-a3);

  --warning: var(--amber-5);
  --warning-text: var(--amber-9);
  --warning-bg: var(--amber-a3);

  /* ── Glassmorphism ──────────────────────────────────────────────── */
  --glass-bg: rgba(14, 16, 21, .6);
  --glass-border: rgba(255, 255, 255, .06);
  --glass-blur: 16px;
  --glass-bg-hover: rgba(14, 16, 21, .75);

  /* ── Gradients ──────────────────────────────────────────────────── */
  --gradient-accent: linear-gradient(135deg, #4f46e5, #8b5cf6);
  --gradient-accent-subtle: linear-gradient(135deg, rgba(79, 70, 229, .15), rgba(139, 92, 246, .15));
  --gradient-success: linear-gradient(135deg, #059669, #10b981);
  --gradient-hero-active: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(99, 102, 241, .06));
  --gradient-card-border: linear-gradient(135deg, rgba(99, 102, 241, .3), rgba(139, 92, 246, .1), transparent 60%);
  --gradient-bg-mesh:
    radial-gradient(ellipse at 20% 50%, rgba(79, 70, 229, .08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, .05) 0%, transparent 50%);

  /* ── Spacing ────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

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

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .2);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .4), 0 0 1px rgba(0, 0, 0, .2);
  --shadow-glow-blue: 0 0 0 3px var(--indigo-a3);
  --shadow-glow-green: 0 0 20px var(--green-a3);
  --shadow-glow-accent: 0 0 20px rgba(99, 102, 241, .15), 0 0 60px rgba(99, 102, 241, .05);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .3), 0 0 1px rgba(255, 255, 255, .05);

  /* ── Layout ─────────────────────────────────────────────────────── */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --content-max-w: 1100px;
  --bottom-nav-h: 60px;

  /* ── Transitions ────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}