:root {
  /* ── Palette ──────────────────────────────────────────────────────────────
   * Atlantis    #9DD341  — primary / action
   * Outer Space #2D3339  — text / surfaces
   * Kimberly    #6650C0  — accent / info / muted text
   * Powder Ash  #AFBFB9  — borders / neutral
   * ──────────────────────────────────────────────────────────────────────── */

  /* Primary — Atlantis */
  --color-primary: #9DD341;
  --color-primary-hover: #8ABD2E;
  --color-primary-active: #77A320;
  --color-primary-fg: #2D3339;   /* Outer Space on bright green */

  /* Secondary — Kimberly tint */
  --color-secondary: #EDEAF8;
  --color-secondary-hover: #DDD8F2;
  --color-secondary-active: #CCC5EB;
  --color-secondary-fg: #6650C0;   /* Kimberly */
  --color-secondary-border: #B8B0E0;

  /* Danger */
  --color-danger: #D94F4F;
  --color-danger-hover: #C03A3A;
  --color-danger-fg: #ffffff;

  /* Semantic */
  --color-success-bg: #EEF8D6;   /* Atlantis tint */
  --color-success-fg: #3E6010;
  --color-error-bg: #FAEAEA;
  --color-error-fg: #8B2020;
  --color-warning-bg: #FEF5E0;
  --color-warning-fg: #7A4E00;
  --color-info-bg: #EEEDF6;      /* Kimberly tint */
  --color-info-fg: #4A4270;
  --color-neutral-bg: #EDF1EF;   /* Powder Ash tint */
  --color-neutral-fg: #4D6059;
  --color-running-bg: #FEF9C3;
  --color-running-fg: #6B4A00;

  /* Text & Surface — Outer Space */
  --color-link: #5240A8;         /* Kimberly, darkened for contrast on light bg */
  --color-link-hover: #3D2F80;

  --color-text: #2D3339;
  --color-text-muted: #6650C0;   /* Kimberly */
  --color-border: #AFBFB9;       /* Powder Ash */
  --color-bg: #E6EDEA;          /* Powder Ash tint */
  --color-bg-subtle: #D8E2DE;   /* Powder Ash tint, 1 step darker */

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

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 13px;
  --font-size-sm: 15px;
  --font-size-md: 17px;
  --font-size-lg: 20px;

  /* Borders */
  --border-width: 1.5px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition: 150ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-link-hover);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Primary — Atlantis unchanged, pops well on dark */
  --color-primary: #9DD341;
  --color-primary-hover: #AEDE55;
  --color-primary-active: #8ABD2E;
  --color-primary-fg: #1A1F24;

  /* Secondary — dark Kimberly tint */
  --color-secondary: #2A2548;
  --color-secondary-hover: #352F58;
  --color-secondary-active: #403868;
  --color-secondary-fg: #A9A3C9;   /* lightened Kimberly */
  --color-secondary-border: #5A538A;

  /* Danger */
  --color-danger: #E06060;
  --color-danger-hover: #CC4A4A;
  --color-danger-fg: #1A1F24;

  /* Semantic */
  --color-success-bg: #1A3410;
  --color-success-fg: #9DD341;
  --color-error-bg: #3A1212;
  --color-error-fg: #F08888;
  --color-warning-bg: #3A2800;
  --color-warning-fg: #F0C860;
  --color-info-bg: #1E1A38;
  --color-info-fg: #B0AAD6;   /* lightened Kimberly */
  --color-neutral-bg: #2D3339;
  --color-neutral-fg: #AFBFB9;
  --color-running-bg: #382E00;
  --color-running-fg: #F0D060;

  /* Text & Surface */
  --color-link: #B0AAD6;         /* lightened Kimberly, readable on dark bg */
  --color-link-hover: #CCC8E8;

  --color-text: #E2EAE6;
  --color-text-muted: #A9A3C9;  /* lightened Kimberly */
  --color-border: #3D4850;
  --color-bg: #1A1F24;          /* deeper than Outer Space */
  --color-bg-subtle: #2D3339;   /* Outer Space */
}