:root {
  /* ── Base Obsidian ── */
  --bg-primary:      hsl(220, 18%, 8%);     /* #0f1117 — deep obsidian */
  --bg-secondary:    hsl(220, 16%, 12%);    /* #171b24 — panel background */
  --bg-elevated:     hsl(220, 14%, 16%);    /* #1f2430 — card/modal */
  --bg-surface:      hsl(220, 12%, 20%);    /* #282e3a — input fields */
  --bg-glass:        hsla(220, 18%, 10%, 0.85);

  /* ── Emerald Guard (Primary Accent) ── */
  --accent-primary:  hsl(152, 76%, 48%);    /* #1fd17b — emerald green */
  --accent-glow:     hsla(152, 76%, 48%, 0.18);
  --accent-dim:      hsl(152, 50%, 28%);    /* muted emerald */
  --accent-bright:   hsl(152, 85%, 62%);    /* highlight green */

  /* ── Risk Spectrum ── */
  --risk-safe:       hsl(152, 76%, 48%);    /* green — < 5% */
  --risk-caution:    hsl(38, 92%, 55%);     /* amber — 5-25% */
  --risk-warning:    hsl(15, 90%, 55%);     /* orange — 25-50% */
  --risk-danger:     hsl(0, 80%, 58%);      /* red — > 50% */

  /* ── Text Hierarchy ── */
  --text-primary:    hsl(0, 0%, 94%);       /* #f0f0f0 */
  --text-secondary:  hsl(220, 10%, 65%);    /* #9aa3b5 */
  --text-muted:      hsl(220, 8%, 46%);     /* #69707e */

  /* ── Diff Colors ── */
  --diff-add-bg:     hsla(152, 70%, 20%, 0.35);
  --diff-add-text:   hsl(152, 76%, 72%);
  --diff-remove-bg:  hsla(0, 70%, 20%, 0.35);
  --diff-remove-text:hsl(0, 75%, 72%);
  --diff-change-bg:  hsla(38, 70%, 20%, 0.30);
  --diff-change-text:hsl(38, 85%, 72%);

  /* ── Typography (Zero CDN / Fallback Stack) ── */
  --font-mono:       'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

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

  /* ── Border & Radius ── */
  --border-subtle:   1px solid hsl(220, 14%, 22%);
  --border-card:     1px solid hsl(220, 14%, 18%);
  --border-accent:   1px solid var(--accent-primary);
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;

  /* ── Shadows & Glow ── */
  --shadow-card:     0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.6);
  --glow-accent:     0 0 20px var(--accent-glow);
}