:root {
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;

  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-green));
  --color-bg: oklch(var(--lch-white));
  --color-bg-subtle: oklch(97% 0.002 264);
  --color-surface: oklch(var(--lch-gray));
  --color-canvas: oklch(var(--lch-gray) / 0.35);
  --color-nav-bg: oklch(var(--lch-white) / 0.88);
  --color-overlay: oklch(var(--lch-black) / 0.25);
  --color-text: oklch(var(--lch-black));
  --color-text-muted: oklch(var(--lch-gray-darker));
  --color-text-reversed: oklch(var(--lch-white));
  --color-link: oklch(var(--lch-blue));
  --color-border: oklch(var(--lch-gray));
  --color-border-dark: oklch(var(--lch-gray-dark));
  --color-border-darker: oklch(var(--lch-gray-darker));
  --color-selected: oklch(var(--lch-blue-light));
  --color-selected-dark: oklch(var(--lch-blue-dark));
  --color-alert: oklch(var(--lch-orange));
  --color-log-bg: oklch(18% 0.01 255);
  --color-log-border: oklch(30% 0.01 255);
  --color-log-muted: oklch(60% 0.01 255);
  --btn-secondary-bg: oklch(var(--lch-white));
  --btn-secondary-color: oklch(var(--lch-black));

  --block-space: 1rem;
  --block-space-double: 2rem;
  --inline-space: 1.25rem;
  --content-width: 72rem;
  --nav-height: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Deep blue base + Apple Music layered greys (#1C1C1E / #2C2C2E / #98989D) */
    --lch-black: 98.5% 0.006 264;
    --lch-white: 9.5% 0.045 258;
    --lch-gray: 17.2% 0.016 264;
    --lch-gray-dark: 24.8% 0.014 264;
    --lch-gray-darker: 68% 0.01 270;
    --lch-blue: 67% 0.19 252;
    --lch-blue-light: 21% 0.06 252;
    --lch-blue-dark: 55% 0.12 252;
    --lch-red: 73.8% 0.184 29.18;
    --lch-green: 75% 0.21 141.89;

    --color-bg-subtle: oklch(21% 0.018 264);
    --color-canvas: oklch(11.5% 0.042 258);
    --color-nav-bg: oklch(17.2% 0.016 264 / 0.92);
    --color-overlay: oklch(4% 0.045 258 / 0.72);
    --color-text-reversed: oklch(98.5% 0.006 264);
    --color-log-bg: oklch(8% 0.038 258);
    --color-log-border: oklch(24.8% 0.014 264);
    --color-log-muted: oklch(52% 0.01 270);
    --input-background: oklch(24.8% 0.014 264 / 0.55);
    --btn-secondary-bg: oklch(var(--lch-gray-dark));
    --btn-secondary-color: oklch(var(--lch-black));
  }
}

:root[data-theme="dark"] {
  --lch-black: 98.5% 0.006 264;
  --lch-white: 9.5% 0.045 258;
  --lch-gray: 17.2% 0.016 264;
  --lch-gray-dark: 24.8% 0.014 264;
  --lch-gray-darker: 68% 0.01 270;
  --lch-blue: 67% 0.19 252;
  --lch-blue-light: 21% 0.06 252;
  --lch-blue-dark: 55% 0.12 252;
  --lch-red: 73.8% 0.184 29.18;
  --lch-green: 75% 0.21 141.89;

  --color-bg-subtle: oklch(21% 0.018 264);
  --color-canvas: oklch(11.5% 0.042 258);
  --color-nav-bg: oklch(17.2% 0.016 264 / 0.92);
  --color-overlay: oklch(4% 0.045 258 / 0.72);
  --color-text-reversed: oklch(98.5% 0.006 264);
  --color-log-bg: oklch(8% 0.038 258);
  --color-log-border: oklch(24.8% 0.014 264);
  --color-log-muted: oklch(52% 0.01 270);
  --input-background: oklch(24.8% 0.014 264 / 0.55);
  --btn-secondary-bg: oklch(var(--lch-gray-dark));
  --btn-secondary-color: oklch(var(--lch-black));
}