/* ── Design Tokens ──────────────────────────────────── */
:root {
  /* ── Colors: Dark Theme ──────────────────────────── */
  --color-bg-primary:     hsl(225, 25%, 8%);
  --color-bg-secondary:   hsl(225, 22%, 11%);
  --color-bg-tertiary:    hsl(225, 20%, 14%);
  --color-bg-elevated:    hsl(225, 20%, 16%);
  --color-bg-hover:       hsl(225, 20%, 18%);
  --color-bg-active:      hsl(225, 20%, 21%);

  --color-surface:        hsl(225, 18%, 12%);
  --color-surface-hover:  hsl(225, 18%, 16%);
  --color-surface-active: hsl(225, 18%, 20%);

  --color-border:         hsl(225, 15%, 18%);
  --color-border-subtle:  hsl(225, 12%, 14%);
  --color-border-strong:  hsl(225, 15%, 26%);

  /* Text */
  --color-text-primary:   hsl(220, 20%, 92%);
  --color-text-secondary: hsl(220, 15%, 65%);
  --color-text-tertiary:  hsl(220, 12%, 48%);
  --color-text-muted:     hsl(220, 10%, 38%);

  /* Accent — Antigravity Violet */
  --color-accent:         hsl(252, 78%, 62%);
  --color-accent-hover:   hsl(252, 82%, 70%);
  --color-accent-muted:   hsl(252, 50%, 24%);
  --color-accent-subtle:  hsl(252, 35%, 15%);
  --color-accent-text:    hsl(252, 90%, 82%);

  /* Memory — Teal */
  --color-memory:         hsl(175, 65%, 50%);
  --color-memory-hover:   hsl(175, 70%, 58%);
  --color-memory-muted:   hsl(175, 45%, 20%);
  --color-memory-subtle:  hsl(175, 30%, 14%);
  --color-memory-text:    hsl(175, 80%, 68%);

  /* Storage — Amber */
  --color-storage:        hsl(35, 90%, 55%);
  --color-storage-hover:  hsl(35, 92%, 62%);
  --color-storage-muted:  hsl(35, 50%, 20%);
  --color-storage-subtle: hsl(35, 35%, 14%);
  --color-storage-text:   hsl(35, 95%, 70%);

  /* Semantic */
  --color-success:        hsl(145, 65%, 52%);
  --color-success-bg:     hsl(145, 40%, 12%);
  --color-warning:        hsl(38, 95%, 60%);
  --color-warning-bg:     hsl(38, 40%, 12%);
  --color-error:          hsl(0, 75%, 60%);
  --color-error-bg:       hsl(0, 40%, 12%);
  --color-info:           hsl(210, 80%, 60%);
  --color-info-bg:        hsl(210, 40%, 12%);

  /* ── Typography ──────────────────────────────────── */
  --font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  0.875rem;  /* 14px */
  --text-md:    1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */

  --font-light:   300;
  --font-regular: 400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── 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 */

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

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:   0 1px 2px hsla(0, 0%, 0%, 0.3);
  --shadow-md:   0 4px 12px hsla(0, 0%, 0%, 0.4);
  --shadow-lg:   0 8px 24px hsla(0, 0%, 0%, 0.5);
  --shadow-xl:   0 16px 48px hsla(0, 0%, 0%, 0.6);
  --shadow-glow: 0 0 20px hsla(252, 78%, 62%, 0.15);

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout — IDE 3-Panel ────────────────────────── */
  --activity-bar-width: 48px;
  --sidebar-width:      260px;
  --panel-width:        380px;
  --chat-panel-width:   380px;
  --header-height:      52px;
  --nav-width:          56px;
  --content-max:        1200px;
  --editor-tab-height:  36px;
  --splitter-width:     4px;

  /* ── Z-Index ─────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  line-height: var(--leading-normal);
}