:root {
  --chalk-100: oklch(0.98 0 90);
  --chalk-200: oklch(0.96 0 90);
  --chalk-300: oklch(0.94 0 90);
  --chalk-400: oklch(0.90 0 90);
  --chalk-500: oklch(0.82 0 90);
  --chalk-600: oklch(0.72 0 90);
  --chalk-700: oklch(0.65 0 90);
  --chalk-800: oklch(0.59 0 90);
  --chalk-900: oklch(0.54 0 90);

  --slate-100: oklch(0.46 0 90);
  --slate-200: oklch(0.41 0 90);
  --slate-300: oklch(0.35 0 90);
  --slate-400: oklch(0.28 0 90);
  --slate-500: oklch(0.23 0 90);
  --slate-600: oklch(0.20 0 90);
  --slate-700: oklch(0.16 0 90);
  --slate-800: oklch(0.14 0 90);
  --slate-900: oklch(0.12 0 90);

  --forest-100: oklch(0.98 0.0061 137.77);
  --forest-200: oklch(0.96 0.0106 136.56);
  --forest-300: oklch(0.94 0.0181 134.92);
  --forest-400: oklch(0.89 0.0274 134.98);
  --forest-500: oklch(0.81 0.0512 135.15);
  --forest-600: oklch(0.72 0.0773 134.99);
  --forest-700: oklch(0.64 0.0913 135.14);
  --forest-800: oklch(0.58 0.0836 135.09);
  --forest-900: oklch(0.54 0.0753 134.98);

  --bone-100: oklch(0.9789 0.0013 106.42);
  --bone-200: oklch(0.9646 0.0017 67.80);
  --bone-300: oklch(0.9390 0.0053 106.50);
  --bone-400: oklch(0.8966 0.0082 98.89);
  --bone-500: oklch(0.8191 0.0139 97.48);
  --bone-600: oklch(0.7221 0.0206 90.59);
  --bone-700: oklch(0.6456 0.0280 94.88);
  --bone-800: oklch(0.5853 0.0286 94.93);
  --bone-900: oklch(0.5415 0.0249 92.67);

  --warmluft-red: oklch(0.6 0.2 30);
  --blue-600: oklch(0.55 0.15 250);
  --green-600: oklch(0.54 0.15 145);
  --red-600: oklch(0.57 0.15 30);
  --amber-600: oklch(0.72 0.15 75);

  /* Light Mode (default) - NEUTRAL backgrounds */
  --color-bg-dark: var(--bone-300);      /* darkest = base layer in light mode */
  --color-bg-base: var(--bone-200);      /* cards/surfaces */
  --color-bg-light: var(--bone-100);      /* lightest = raised/important elements, also this is a very bad color */

  --color-text-primary: var(--slate-200);    /* headings */
  --color-text-secondary: var(--chalk-900);  /* body text - muted but legible */
  --color-text-tertiary: var(--chalk-600);

  --color-border: var(--bone-500);
  --color-border-highlight: var(--bone-400);  /* top border for subtle depth */

  /* Semantic Colors */
  --color-primary: var(--forest-700);
  --color-secondary: var(--forest-900);
  --color-on-primary: var(--chalk-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);
  --color-warning: var(--amber-600);
  --color-info: var(--blue-600);

  /* Applied to UI */
  --color-background: var(--color-bg-dark);
  --color-surface: var(--color-bg-base);
  --color-text: var(--color-text-primary);
  --color-text-muted: var(--color-text-secondary);
  --color-text-semimuted: var(--color-text-tertiary);

  /* Overlays & shadows */
  --color-overlay: oklch(0 0 0 / 0.5);
  --color-shadow: oklch(0 0 0 / 0.1);

  /* Interactive states */
  --color-primary-hover: var(--forest-600);
  --color-today: var(--forest-300);

  /* Disabled / muted elements */
  --color-disabled-bg: var(--chalk-200);
  --color-disabled-border: var(--chalk-500);
  --color-disabled-text: var(--chalk-600);
  --color-disabled: var(--chalk-500);

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --weight-normal: 400;
  --weight-medium: 550;
  --weight-bold: 700;
  --weight-fat: 900;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;
  --text-5xl: 2.5rem;

  /* Spacing (Content-driven) */
  --inline-space: 1ch;
  --block-space: 1rem;
  --container-width: 100ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark Mode - NEUTRAL backgrounds */
    --color-bg-dark: var(--slate-300);    /* darkest = base layer in dark mode */
    --color-bg-base: var(--slate-200);    /* cards/surfaces */
    --color-bg-light: var(--slate-100);   /* raised/important elements */

    --color-text-primary: var(--chalk-100);   /* headings */
    --color-text-secondary: var(--chalk-300); /* body text */
    --color-text-tertiary: var(--chalk-900);

    --color-text: var(--color-text-primary);
    --color-text-muted: var(--color-text-secondary);
    --color-text-semimuted: var(--color-text-tertiary);

    --color-border: var(--slate-400);
    --color-border-highlight: var(--slate-400);

    /* Semantic colors adjusted for dark mode */
    --color-primary: var(--forest-700);
    --color-secondary: var(--forest-900);
    --color-on-primary: var(--chalk-100);
    --color-negative: var(--red-600);
    --color-positive: var(--green-600);

    /* Interactive states */
    --color-today: var(--slate-100);

    /* Disabled / muted elements */
    --color-disabled-bg: var(--slate-300);
    --color-disabled-border: var(--slate-500);
    --color-disabled-text: var(--chalk-400);
  }
}