:root {
  /* ── Colors (cool slate/blue palette) ───────────────────── */
  --bg:            #eef2f7;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --border:        #dce3ed;
  --border-strong: #b8c5d6;
  --text:          #0f172a;
  --text-muted:    #5b6b82;
  --text-subtle:   #8896a8;

  --accent:        #2563eb;
  --accent-dark:   #1d4ed8;
  --accent-tint:   #eff6ff;

  --green:         #059669;
  --green-tint:    #ecfdf5;
  --green-bg:      #f0fdf8;

  --amber:         #b45309;
  --amber-tint:    #fffbeb;
  --amber-bg:      #fef9ee;

  --red:           #dc2626;
  --red-tint:      #fef2f2;
  --red-bg:        #fff5f5;

  --blue:          #2563eb;
  --blue-tint:     #eff6ff;

  --purple:        #7c3aed;
  --purple-tint:   #f5f3ff;

  --teal:          #0d9488;
  --teal-tint:     #f0fdfa;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.14);

  /* ── Border radii ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Typography ──────────────────────────────────────────── */
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 58px;
  --page-padding-top: 28px;
  --page-padding-x:   24px;
  --page-padding-bottom: 48px;
  --page-content-gap: 20px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d1117;
  --surface:       #161b22;
  --surface-2:     #1c2128;
  --border:        #30363d;
  --border-strong: #484f58;
  --text:          #e6edf3;
  --text-muted:    #8b949e;
  --text-subtle:   #6e7681;

  --accent:        #58a6ff;
  --accent-dark:   #388bfd;
  --accent-tint:   #1c2d41;

  --green:         #3fb950;
  --green-tint:    #1a2e22;
  --green-bg:      #122117;

  --amber:         #d29922;
  --amber-tint:    #2d2414;
  --amber-bg:      #241c0f;

  --red:           #f85149;
  --red-tint:      #3d1c1c;
  --red-bg:        #2a1414;

  --blue:          #58a6ff;
  --blue-tint:     #1c2d41;

  --purple:        #a371f7;
  --purple-tint:   #2a1f3d;

  --teal:          #39d353;
  --teal-tint:     #132820;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] {
  color-scheme: light;
}