/* Leitwert color theme
 * Generated from the Python palette definition.
 * Each hue has 10 steps: 50 (lightest) -> 900 (darkest).
 * --<hue>-<step>      : hex value
 * --<hue>-<step>-hsl  : raw HSL channels, for hsl(var(--x) / <alpha>)
 */

:root {
  color-scheme: light dark;

  /* gray */
  --gray-50: #eaeaeb;
  --gray-50-hsl: 240 2.44% 91.96%;
  --gray-100: #d5d5d8;
  --gray-100-hsl: 240 3.7% 84.12%;
  --gray-200: #abacb2;
  --gray-200-hsl: 231 4.35% 68.43%;
  --gray-300: #81838b;
  --gray-300-hsl: 228 4.13% 52.55%;
  --gray-400: #575a65;
  --gray-400-hsl: 227 7.45% 36.86%;
  --gray-500: #2E313F;
  --gray-500-hsl: 229 15.6% 21.37%;
  --gray-600: #242732;
  --gray-600-hsl: 227 16.28% 16.86%;
  --gray-700: #1b1d25;
  --gray-700-hsl: 228 15.63% 12.55%;
  --gray-800: #121319;
  --gray-800-hsl: 231 16.28% 8.43%;
  --gray-900: #09090c;
  --gray-900-hsl: 240 14.29% 4.12%;

  /* blue */
  --blue-50: #f4f9fe;
  --blue-50-hsl: 210 83.33% 97.65%;
  --blue-100: #eaf3fe;
  --blue-100-hsl: 213 90.91% 95.69%;
  --blue-200: #d5e8fd;
  --blue-200-hsl: 212 90.91% 91.37%;
  --blue-300: #c1dcfd;
  --blue-300-hsl: 213 93.75% 87.45%;
  --blue-400: #acd1fc;
  --blue-400-hsl: 212 93.02% 83.14%;
  --blue-500: #98C6FC;
  --blue-500-hsl: 212 94.34% 79.22%;
  --blue-600: #799ec9;
  --blue-600-hsl: 212 42.55% 63.14%;
  --blue-700: #5b7697;
  --blue-700-hsl: 213 24.79% 47.45%;
  --blue-800: #3c4f64;
  --blue-800-hsl: 212 25.0% 31.37%;
  --blue-900: #1e2732;
  --blue-900-hsl: 213 25.0% 15.69%;

  /* green */
  --green-50: #f5f9e9;
  --green-50-hsl: 75 57.14% 94.51%;
  --green-100: #ebf3d4;
  --green-100-hsl: 75 56.36% 89.22%;
  --green-200: #d7e8a9;
  --green-200-hsl: 76 57.8% 78.63%;
  --green-300: #c3dc7f;
  --green-300-hsl: 76 57.06% 68.04%;
  --green-400: #afd154;
  --green-400-hsl: 76 57.6% 57.45%;
  --green-500: #9CC62A;
  --green-500-hsl: 76 65.0% 47.06%;
  --green-600: #7c9e21;
  --green-600-hsl: 76 65.45% 37.45%;
  --green-700: #5d7619;
  --green-700-hsl: 76 65.03% 28.04%;
  --green-800: #3e4f10;
  --green-800-hsl: 76 66.32% 18.63%;
  --green-900: #1f2708;
  --green-900-hsl: 75 65.96% 9.22%;

  /* yellow */
  --yellow-50: #fffaf1;
  --yellow-50-hsl: 39 100.0% 97.25%;
  --yellow-100: #fff5e3;
  --yellow-100-hsl: 39 100.0% 94.51%;
  --yellow-200: #ffebc7;
  --yellow-200-hsl: 39 100.0% 89.02%;
  --yellow-300: #ffe1ac;
  --yellow-300-hsl: 38 100.0% 83.73%;
  --yellow-400: #ffd790;
  --yellow-400-hsl: 38 100.0% 78.24%;
  --yellow-500: #FFCE75;
  --yellow-500-hsl: 39 100.0% 72.94%;
  --yellow-600: #cca45d;
  --yellow-600-hsl: 38 52.11% 58.24%;
  --yellow-700: #997b46;
  --yellow-700-hsl: 38 37.22% 43.73%;
  --yellow-800: #66522e;
  --yellow-800-hsl: 39 37.84% 29.02%;
  --yellow-900: #322917;
  --yellow-900-hsl: 40 36.99% 14.31%;

  /* red */
  --red-50: #fff2ef;
  --red-50-hsl: 11 100.0% 96.86%;
  --red-100: #ffe5e0;
  --red-100-hsl: 10 100.0% 93.92%;
  --red-200: #ffcbc2;
  --red-200-hsl: 9 100.0% 88.04%;
  --red-300: #ffb1a3;
  --red-300-hsl: 9 100.0% 81.96%;
  --red-400: #ff9785;
  --red-400-hsl: 9 100.0% 76.08%;
  --red-500: #FF7E67;
  --red-500-hsl: 9 100.0% 70.2%;
  --red-600: #cc6452;
  --red-600-hsl: 9 54.46% 56.08%;
  --red-700: #994b3d;
  --red-700-hsl: 9 42.99% 41.96%;
  --red-800: #663229;
  --red-800-hsl: 9 42.66% 28.04%;
  --red-900: #321914;
  --red-900-hsl: 10 42.86% 13.73%;

  /* Semantic aliases (light theme) */
  --color-bg: var(--gray-50);
  --color-bg-alt: var(--gray-100);
  --color-surface: #ffffff;
  --color-surface-alt: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--gray-50);
  --color-primary: var(--yellow-500);
  --color-primary-hover: var(--yellow-600);
  --color-primary-active: var(--yellow-700);
  --color-primary-subtle: var(--yellow-100);
  --color-on-primary: var(--gray-900);
  --color-success: var(--green-500);
  --color-success-subtle: var(--green-100);
  --color-warning: var(--red-500);
  --color-warning-subtle: var(--red-100);
  --color-on-warning: var(--gray-900);
  --color-danger: var(--red-700);
  --color-danger-subtle: var(--red-100);
  --color-on-danger: #ffffff;
  --color-focus-ring: var(--gray-900);
}

/* Dark theme.
 * Applies when the OS asks for dark, unless the user pinned light,
 * and whenever <html data-theme="dark"> is set explicitly.
 * Keep the two blocks below in sync (generated from one token map).
 * Toggle with <html data-theme="dark">; see theme-toggle.js for a ready-made button.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--gray-900);
    --color-bg-alt: var(--gray-800);
    --color-surface: var(--gray-800);
    --color-surface-alt: var(--gray-700);
    --color-border: var(--gray-700);
    --color-border-strong: var(--gray-600);
    --color-text: var(--gray-100);
    --color-text-muted: var(--gray-300);
    --color-text-inverse: var(--gray-900);
    --color-primary: var(--yellow-400);
    --color-primary-hover: var(--yellow-300);
    --color-primary-active: var(--yellow-200);
    --color-primary-subtle: var(--yellow-900);
    --color-on-primary: var(--gray-900);
    --color-success: var(--green-400);
    --color-success-subtle: var(--green-900);
    --color-warning: var(--red-400);
    --color-warning-subtle: var(--red-900);
    --color-on-warning: var(--gray-900);
    --color-danger: var(--red-500);
    --color-danger-subtle: var(--red-900);
    --color-on-danger: var(--gray-900);
    --color-focus-ring: var(--yellow-400);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--gray-900);
  --color-bg-alt: var(--gray-800);
  --color-surface: var(--gray-800);
  --color-surface-alt: var(--gray-700);
  --color-border: var(--gray-700);
  --color-border-strong: var(--gray-600);
  --color-text: var(--gray-100);
  --color-text-muted: var(--gray-300);
  --color-text-inverse: var(--gray-900);
  --color-primary: var(--yellow-400);
  --color-primary-hover: var(--yellow-300);
  --color-primary-active: var(--yellow-200);
  --color-primary-subtle: var(--yellow-900);
  --color-on-primary: var(--gray-900);
  --color-success: var(--green-400);
  --color-success-subtle: var(--green-900);
  --color-warning: var(--red-400);
  --color-warning-subtle: var(--red-900);
  --color-on-warning: var(--gray-900);
  --color-danger: var(--red-500);
  --color-danger-subtle: var(--red-900);
  --color-on-danger: var(--gray-900);
  --color-focus-ring: var(--yellow-400);
}

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