:root {
  /* ============================================
     BASE LCH COLOR VALUES
     These define the raw color values used throughout the app
     ============================================ */

  /* Neutrals */
  --lch-white: 100% 0 0;
  --lch-black: 0% 0 0;
  --lch-always-white: 100% 0 0;
  --lch-always-black: 0% 0 0;
  --lch-cream: 97% 0.02 91;

  /* Grays - lightest to darkest */
  --lch-gray-lightest: 98.5% 0.0025 96;
  --lch-gray-light: 96% 0.005 96;
  --lch-gray: 92% 0.005 96;
  --lch-gray-dark: 75% 0.005 96;
  --lch-gray-medium: 44% 0.01 0;
  --lch-gray-darker: 25% 0.012 0;
  --lch-gray-darkest: 16% 0.01 0;

  /* Blues */
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-bright: 82% 0.15 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-blue: 54% 0.15 255;

  /* Reds/Pinks */
  --lch-pink-lightest: 98% 0.015 31;
  --lch-pink-light: 95% 0.05 31;
  --lch-red: 51% 0.2 31;
  --lch-red-dark: 40% 0.18 31;

  /* Orange */
  --lch-orange: 70% 0.2 44;
  --lch-orange-dark: 55% 0.18 44;

  /* Greens */
  --lch-green-light: 95% 0.03 142.49;
  --lch-green: 52% 0.18 155;
  --lch-green-dark: 40% 0.1 142;

  /* Yellows */
  --lch-yellow-light: 92.62% 0.1 91.5;
  --lch-yellow: 85% 0.15 91;
  --lch-yellow-dark: 55% 0.15 85;

  /* ============================================
     COLOR ABSTRACTIONS
     Simple, straightforward color names
     ============================================ */

  /* Background colors */
  --color-bg: oklch(var(--lch-white));
  --color-bg-secondary: oklch(var(--lch-cream));
  --color-surface: oklch(var(--lch-white));
  --color-white: oklch(var(--lch-white));
  --color-always-black: oklch(var(--lch-always-black));
  --color-always-white: oklch(var(--lch-always-white));

  /* Text/Ink colors */
  --color-ink: oklch(var(--lch-black));
  --color-ink-reversed: oklch(var(--lch-white));
  --color-ink-dark: oklch(var(--lch-gray-darkest));
  --color-ink-body: oklch(var(--lch-gray-darker));
  --color-ink-muted: oklch(var(--lch-gray-medium));
  --color-ink-light: oklch(var(--lch-gray-dark));

  /* Gray scale (for backgrounds, borders, dividers) */
  --color-gray-lightest: oklch(var(--lch-gray-lightest));
  --color-gray-light: oklch(var(--lch-gray-light));
  --color-gray: oklch(var(--lch-gray));
  --color-gray-dark: oklch(var(--lch-gray-dark));

  /* Blue */
  --color-blue: oklch(var(--lch-blue));
  --color-blue-light: oklch(var(--lch-blue-light));
  --color-blue-bright: oklch(var(--lch-blue-bright));
  --color-blue-dark: oklch(var(--lch-blue-dark));

  /* Red */
  --color-red: oklch(var(--lch-red));
  --color-red-light: oklch(var(--lch-pink-light));
  --color-red-lightest: oklch(var(--lch-pink-lightest));
  --color-red-dark: oklch(var(--lch-red-dark));

  /* Green */
  --color-green: oklch(var(--lch-green));
  --color-green-light: oklch(var(--lch-green-light));
  --color-green-dark: oklch(var(--lch-green-dark));

  /* Orange */
  --color-orange: oklch(var(--lch-orange));
  --color-orange-dark: oklch(var(--lch-orange-dark));

  /* Yellow */
  --color-yellow: oklch(var(--lch-yellow));
  --color-yellow-light: oklch(var(--lch-yellow-light));
  --color-yellow-dark: oklch(var(--lch-yellow-dark));

}

/* ============================================
   DARK MODE
   Explicit user choice via data-theme attribute
   ============================================ */

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

html[data-theme="dark"] {
  color-scheme: dark;
  --lch-black: 100% 0 0;
  --lch-white: 0% 0 0;

  --lch-gray-lightest: 15% 0 0;
  --lch-gray-light: 25.2% 0 0;
  --lch-gray: 30.12% 0 0;
  --lch-gray-dark: 44.95% 0 0;
  --lch-gray-medium: 65% 0 0;
  --lch-gray-darker: 85% 0 0;
  --lch-gray-darkest: 90% 0 0;

  --lch-blue-light: 28.11% 0.053 248;
  --lch-blue-bright: 75% 0.18 248;
  --lch-blue-dark: 42.25% 0.07 248;
  --lch-blue: 72.25% 0.16 248;

  --lch-pink-lightest: 20% 0.04 31;
  --lch-pink-light: 25% 0.05 31;
  --lch-red: 73.8% 0.184 29.18;
  --lch-red-dark: 55% 0.16 31;

  --lch-orange: 72% 0.18 44;
  --lch-orange-dark: 58% 0.16 44;

  --lch-green-light: 28.11% 0.02 142.49;
  --lch-green: 65% 0.16 155;
  --lch-green-dark: 50% 0.12 150;

  --lch-yellow-light: 40.9% 0.06 88.9;
  --lch-yellow: 75% 0.12 88.9;
  --lch-yellow-dark: 75% 0.15 85;

  --lch-cream: 12% 0.01 0;

  --color-surface: oklch(18% 0 0);
}

/* System preference fallback (only when no explicit choice) */

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-black: 100% 0 0;
    --lch-white: 0% 0 0;

    --lch-gray-lightest: 15% 0 0;
    --lch-gray-light: 25.2% 0 0;
    --lch-gray: 30.12% 0 0;
    --lch-gray-dark: 44.95% 0 0;
    --lch-gray-medium: 65% 0 0;
    --lch-gray-darker: 85% 0 0;
    --lch-gray-darkest: 90% 0 0;

    --lch-blue-light: 28.11% 0.053 248;
    --lch-blue-bright: 75% 0.18 248;
    --lch-blue-dark: 42.25% 0.07 248;
    --lch-blue: 72.25% 0.16 248;

    --lch-pink-lightest: 20% 0.04 31;
    --lch-pink-light: 25% 0.05 31;
    --lch-red: 73.8% 0.184 29.18;
    --lch-red-dark: 55% 0.16 31;

    --lch-orange: 72% 0.18 44;
    --lch-orange-dark: 58% 0.16 44;

    --lch-green-light: 28.11% 0.02 142.49;
    --lch-green: 65% 0.16 155;
    --lch-green-dark: 50% 0.12 150;

    --lch-yellow-light: 40.9% 0.06 88.9;
    --lch-yellow: 75% 0.12 88.9;
    --lch-yellow-dark: 75% 0.15 85;

    --lch-cream: 12% 0.01 0;

    --color-surface: oklch(18% 0 0);
  }
}