:root {
  /* Brand — a distinctive electric indigo-violet that reads as a developer tool,
     not a generic bootstrap blue. The one bold color in the system. */
  --primary-color: #5b4ee6;
  --primary-strong: #4a3fd1;
  --primary-soft: rgba(91, 78, 230, 0.12);
  --primary-ring: rgba(91, 78, 230, 0.35);
  --secondary-color: #5b6472;
  --secondary-strong: #454c58;
  --secondary-soft: rgba(91, 100, 114, 0.12);
  --success-color: #14a06b;
  --success-strong: #0f8155;
  --success-soft: rgba(20, 160, 107, 0.13);
  --danger-color: #e5484d;
  --danger-strong: #c23b40;
  --danger-soft: rgba(229, 72, 77, 0.13);
  --warning-color: #d98c0a;
  --warning-strong: #b8740a;
  --warning-soft: rgba(217, 140, 10, 0.13);
  --info-color: #0e9db5;
  --info-strong: #0b7d92;
  --info-soft: rgba(14, 157, 181, 0.13);
  --light-color: #f4f5f9;
  --dark-color: #1c1f2b;

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f5f9;
  --bg-dark: #1c1f2b;
  --bg-darker: #12141c;

  /* Text */
  --text-primary: #1a1d29;
  --text-secondary: #5b6472;
  --text-light: #f4f5f9;
  --text-dark: #343a40;

  /* Border */
  --border-color: #e3e6ee;
  --border-radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --border-width: 1px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Typography — a modern system stack, intentionally chosen, not a webfont link
     (keeps the app offline-safe and file://-safe). */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;

  /* Shadow — layered, soft, cool-tinted (no flat single drop). */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.06);
  --transition: all 0.2s ease;

  /* Heatmap colors (light theme) — functional density ramp, left intact. */
  --heat-0: #ebedf0;
  --heat-1: #9be9a8;
  --heat-2: #40c463;
  --heat-3: #30a14e;
  --heat-4: #216e39;
}

[data-theme="dark"] {
  --bg-primary: #12141c;
  --bg-secondary: #1a1d28;
  --bg-dark: #0d0f16;
  --bg-darker: #08090d;
  --text-primary: #e7e9f0;
  --text-secondary: #9aa3b5;
  --text-light: #ffffff;
  --text-dark: #e9ecef;
  --border-color: #2a2f3d;

  /* Soft tints read brighter on a dark base, so they don't wash out. */
  --primary-soft: rgba(120, 108, 255, 0.16);
  --secondary-soft: rgba(150, 160, 180, 0.14);
  --success-soft: rgba(45, 200, 140, 0.16);
  --danger-soft: rgba(235, 100, 105, 0.16);
  --warning-soft: rgba(230, 170, 60, 0.16);
  --info-soft: rgba(60, 190, 215, 0.16);
  --primary-ring: rgba(120, 108, 255, 0.45);

  /* Heatmap colors (dark theme) */
  --heat-0: #1b1f24;
  --heat-1: #0e4429;
  --heat-2: #006d32;
  --heat-3: #26a641;
  --heat-4: #39d353;
}