/* GENERATED FILE — do not edit by hand.
 * Source: tokens/*.json (read-only). Build: npm run build:tokens
 * Layers: primitives (:root) -> primary modes ([data-primary]) ->
 * semantic themes ([data-theme]). Defaults: theme=light, primary=blue.
 * The high-contrast theme also applies AUTOMATICALLY under
 * @media (prefers-contrast: more), unless an explicit [data-theme] was set. */

/* ---- tier-1 primitives (literal values) ---- */
:root {
  --red-50: #fff2ef;
  --red-100: #ffd5ce;
  --red-200: #ffb7ac;
  --red-300: #ff9688;
  --red-400: #ff7161;
  --red-500: #ff3b30;
  --red-600: #dc1312;
  --red-700: #b20004;
  --red-800: #880002;
  --red-900: #600001;
  --red-950: #3b0000;
  --orange-50: #fff3e8;
  --orange-100: #ffe1c8;
  --orange-200: #ffd0a7;
  --orange-300: #ffbd82;
  --orange-400: #ffaa58;
  --orange-500: #ff9500;
  --orange-600: #d07800;
  --orange-700: #a35d00;
  --orange-800: #784300;
  --orange-900: #502b00;
  --orange-950: #2b1400;
  --yellow-50: #fbf5e0;
  --yellow-100: #faefc5;
  --yellow-200: #fbe79e;
  --yellow-300: #fcdf71;
  --yellow-400: #fbd847;
  --yellow-500: #f4d038;
  --yellow-600: #c8a700;
  --yellow-700: #9a8000;
  --yellow-800: #6f5c00;
  --yellow-900: #463900;
  --yellow-950: #211a00;
  --green-50: #eff8ef;
  --green-100: #b5f0bb;
  --green-200: #6de682;
  --green-300: #3ad35f;
  --green-400: #18bc4b;
  --green-500: #00a43d;
  --green-600: #008731;
  --green-700: #006c26;
  --green-800: #08511d;
  --green-900: #103718;
  --green-950: #0a200e;
  --mint-50: #ecf8f6;
  --mint-100: #a3f0e4;
  --mint-200: #6ddfd0;
  --mint-300: #3acbbb;
  --mint-400: #18b4a5;
  --mint-500: #009d8f;
  --mint-600: #008276;
  --mint-700: #00675e;
  --mint-800: #084e47;
  --mint-900: #103530;
  --mint-950: #0a1f1c;
  --teal-50: #f1f6f8;
  --teal-100: #c4e5ef;
  --teal-200: #7ed7f0;
  --teal-300: #39c4e6;
  --teal-400: #18aece;
  --teal-500: #0097b5;
  --teal-600: #007d96;
  --teal-700: #006478;
  --teal-800: #084b5a;
  --teal-900: #10333d;
  --teal-950: #0a1e23;
  --cyan-50: #f2f6f8;
  --cyan-100: #cde2ef;
  --cyan-200: #9ad0f0;
  --cyan-300: #4dbff8;
  --cyan-400: #17a9e6;
  --cyan-500: #0093ca;
  --cyan-600: #0079a7;
  --cyan-700: #006186;
  --cyan-800: #084965;
  --cyan-900: #0f3243;
  --cyan-950: #091d27;
  --blue-50: #eff6ff;
  --blue-100: #c8dfff;
  --blue-200: #a1c7ff;
  --blue-300: #78afff;
  --blue-400: #4b96ff;
  --blue-500: #007aff;
  --blue-600: #0065d5;
  --blue-700: #0050ad;
  --blue-800: #003d86;
  --blue-900: #002a61;
  --blue-950: #00183f;
  --indigo-50: #f3f4ff;
  --indigo-100: #cfd5ff;
  --indigo-200: #acb5ff;
  --indigo-300: #8b94ff;
  --indigo-400: #7073f2;
  --indigo-500: #5856d6;
  --indigo-600: #4944be;
  --indigo-700: #3b34a0;
  --indigo-800: #2d287f;
  --indigo-900: #201e5c;
  --indigo-950: #141242;
  --purple-50: #faf2ff;
  --purple-100: #edd1ff;
  --purple-200: #e1b0ff;
  --purple-300: #d58cff;
  --purple-400: #c56bf5;
  --purple-500: #af52de;
  --purple-600: #953ac1;
  --purple-700: #7928a0;
  --purple-800: #5d1b7c;
  --purple-900: #411357;
  --purple-950: #29053a;
  --pink-50: #fff1f1;
  --pink-100: #ffd4d4;
  --pink-200: #ffb5b6;
  --pink-300: #ff9397;
  --pink-400: #ff6b77;
  --pink-500: #ff2d55;
  --pink-600: #da0040;
  --pink-700: #af0031;
  --pink-800: #860023;
  --pink-900: #5e0016;
  --pink-950: #3a000a;
  --brown-50: #faf4ed;
  --brown-100: #e8ddcf;
  --brown-200: #d8c6af;
  --brown-300: #c8af8f;
  --brown-400: #b79973;
  --brown-500: #a2845e;
  --brown-600: #886c48;
  --brown-700: #6e5535;
  --brown-800: #534026;
  --brown-900: #3a2c1a;
  --brown-950: #23180a;
  --gray-50: #f5f5f8;
  --gray-100: #dfdfe2;
  --gray-200: #cacace;
  --gray-300: #b6b6ba;
  --gray-400: #a2a2a6;
  --gray-500: #8e8e92;
  --gray-600: #757579;
  --gray-700: #5c5c60;
  --gray-800: #454548;
  --gray-900: #2f2f32;
  --gray-950: #1a1a1d;
  --white: #ffffff;
  --black: #000000;
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-full: 9999px;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --z-deep: -100;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --icon-size-12: 12px;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-32: 32px;
  --icon-size-48: 48px;
  --opacity-icon-duotone-body: 0.12;
  --aspect-ratio-1-1: 1;
  --aspect-ratio-16-9: 1.777778;
  --aspect-ratio-4-3: 1.333333;
  --aspect-ratio-3-4: 0.75;
  --aspect-ratio-3-2: 1.5;
  --blur-backdrop: 8px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-border-inset: 0.5px;
  --duration-60: 60ms;
  --duration-120: 120ms;
  --duration-160: 160ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-800: 800ms;
  --duration-1000: 1000ms;
  --duration-1400: 1400ms;
  --duration-2000: 2000ms;
  --ease-default: ease;
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: ease-in-out;
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Roboto Mono", "Ubuntu Mono", "Liberation Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  --font-size-7xl: 64px;
  --line-height-body-xs: 16px;
  --line-height-body-sm: 20px;
  --line-height-body-md: 24px;
  --line-height-body-lg: 28px;
  --line-height-body-xl: 28px;
  --line-height-heading-lg: 24px;
  --line-height-heading-xl: 24px;
  --line-height-heading-2xl: 28px;
  --line-height-heading-3xl: 32px;
  --line-height-heading-4xl: 40px;
  --line-height-heading-5xl: 48px;
  --line-height-heading-6xl: 56px;
  --line-height-heading-7xl: 72px;
  --letter-spacing-normal: 0em;
  --letter-spacing-caption: 0.01em;
}

/* ---- primary shim: 10 swappable modes x 3 theme copies (default blue) ---- */
:root, [data-primary="blue"] {
  --primary-50: var(--blue-50);
  --primary-100: var(--blue-100);
  --primary-200: var(--blue-200);
  --primary-300: var(--blue-300);
  --primary-400: var(--blue-400);
  --primary-500: var(--blue-500);
  --primary-600: var(--blue-600);
  --primary-700: var(--blue-700);
  --primary-800: var(--blue-800);
  --primary-900: var(--blue-900);
  --primary-950: var(--blue-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--blue-50);
  --primary-dark-100: var(--blue-100);
  --primary-dark-200: var(--blue-200);
  --primary-dark-300: var(--blue-300);
  --primary-dark-400: var(--blue-400);
  --primary-dark-500: var(--blue-500);
  --primary-dark-600: var(--blue-600);
  --primary-dark-700: var(--blue-700);
  --primary-dark-800: var(--blue-800);
  --primary-dark-900: var(--blue-900);
  --primary-dark-950: var(--blue-950);
  --primary-high-contrast-50: var(--blue-50);
  --primary-high-contrast-100: var(--blue-100);
  --primary-high-contrast-200: var(--blue-200);
  --primary-high-contrast-300: var(--blue-300);
  --primary-high-contrast-400: var(--blue-400);
  --primary-high-contrast-500: var(--blue-500);
  --primary-high-contrast-600: var(--blue-600);
  --primary-high-contrast-700: var(--blue-700);
  --primary-high-contrast-800: var(--blue-800);
  --primary-high-contrast-900: var(--blue-900);
  --primary-high-contrast-950: var(--blue-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="orange"] {
  --primary-50: var(--orange-50);
  --primary-100: var(--orange-100);
  --primary-200: var(--orange-200);
  --primary-300: var(--orange-300);
  --primary-400: var(--orange-400);
  --primary-500: var(--orange-500);
  --primary-600: var(--orange-600);
  --primary-700: var(--orange-700);
  --primary-800: var(--orange-800);
  --primary-900: var(--orange-900);
  --primary-950: var(--orange-950);
  --primary-on-fill: var(--black);
  --primary-dark-50: var(--orange-50);
  --primary-dark-100: var(--orange-100);
  --primary-dark-200: var(--orange-200);
  --primary-dark-300: var(--orange-300);
  --primary-dark-400: var(--orange-400);
  --primary-dark-500: var(--orange-500);
  --primary-dark-600: var(--orange-600);
  --primary-dark-700: var(--orange-700);
  --primary-dark-800: var(--orange-800);
  --primary-dark-900: var(--orange-900);
  --primary-dark-950: var(--orange-950);
  --primary-high-contrast-50: var(--orange-50);
  --primary-high-contrast-100: var(--orange-100);
  --primary-high-contrast-200: var(--orange-200);
  --primary-high-contrast-300: var(--orange-300);
  --primary-high-contrast-400: var(--orange-400);
  --primary-high-contrast-500: var(--orange-500);
  --primary-high-contrast-600: var(--orange-600);
  --primary-high-contrast-700: var(--orange-700);
  --primary-high-contrast-800: var(--orange-800);
  --primary-high-contrast-900: var(--orange-900);
  --primary-high-contrast-950: var(--orange-950);
  --primary-dark-on-fill: var(--black);
}

[data-primary="green"] {
  --primary-50: var(--green-50);
  --primary-100: var(--green-100);
  --primary-200: var(--green-200);
  --primary-300: var(--green-300);
  --primary-400: var(--green-400);
  --primary-500: var(--green-500);
  --primary-600: var(--green-600);
  --primary-700: var(--green-700);
  --primary-800: var(--green-800);
  --primary-900: var(--green-900);
  --primary-950: var(--green-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--green-50);
  --primary-dark-100: var(--green-100);
  --primary-dark-200: var(--green-200);
  --primary-dark-300: var(--green-300);
  --primary-dark-400: var(--green-400);
  --primary-dark-500: var(--green-500);
  --primary-dark-600: var(--green-600);
  --primary-dark-700: var(--green-700);
  --primary-dark-800: var(--green-800);
  --primary-dark-900: var(--green-900);
  --primary-dark-950: var(--green-950);
  --primary-high-contrast-50: var(--green-50);
  --primary-high-contrast-100: var(--green-100);
  --primary-high-contrast-200: var(--green-200);
  --primary-high-contrast-300: var(--green-300);
  --primary-high-contrast-400: var(--green-400);
  --primary-high-contrast-500: var(--green-500);
  --primary-high-contrast-600: var(--green-600);
  --primary-high-contrast-700: var(--green-700);
  --primary-high-contrast-800: var(--green-800);
  --primary-high-contrast-900: var(--green-900);
  --primary-high-contrast-950: var(--green-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="mint"] {
  --primary-50: var(--mint-50);
  --primary-100: var(--mint-100);
  --primary-200: var(--mint-200);
  --primary-300: var(--mint-300);
  --primary-400: var(--mint-400);
  --primary-500: var(--mint-500);
  --primary-600: var(--mint-600);
  --primary-700: var(--mint-700);
  --primary-800: var(--mint-800);
  --primary-900: var(--mint-900);
  --primary-950: var(--mint-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--mint-50);
  --primary-dark-100: var(--mint-100);
  --primary-dark-200: var(--mint-200);
  --primary-dark-300: var(--mint-300);
  --primary-dark-400: var(--mint-400);
  --primary-dark-500: var(--mint-500);
  --primary-dark-600: var(--mint-600);
  --primary-dark-700: var(--mint-700);
  --primary-dark-800: var(--mint-800);
  --primary-dark-900: var(--mint-900);
  --primary-dark-950: var(--mint-950);
  --primary-high-contrast-50: var(--mint-50);
  --primary-high-contrast-100: var(--mint-100);
  --primary-high-contrast-200: var(--mint-200);
  --primary-high-contrast-300: var(--mint-300);
  --primary-high-contrast-400: var(--mint-400);
  --primary-high-contrast-500: var(--mint-500);
  --primary-high-contrast-600: var(--mint-600);
  --primary-high-contrast-700: var(--mint-700);
  --primary-high-contrast-800: var(--mint-800);
  --primary-high-contrast-900: var(--mint-900);
  --primary-high-contrast-950: var(--mint-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="teal"] {
  --primary-50: var(--teal-50);
  --primary-100: var(--teal-100);
  --primary-200: var(--teal-200);
  --primary-300: var(--teal-300);
  --primary-400: var(--teal-400);
  --primary-500: var(--teal-500);
  --primary-600: var(--teal-600);
  --primary-700: var(--teal-700);
  --primary-800: var(--teal-800);
  --primary-900: var(--teal-900);
  --primary-950: var(--teal-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--teal-50);
  --primary-dark-100: var(--teal-100);
  --primary-dark-200: var(--teal-200);
  --primary-dark-300: var(--teal-300);
  --primary-dark-400: var(--teal-400);
  --primary-dark-500: var(--teal-500);
  --primary-dark-600: var(--teal-600);
  --primary-dark-700: var(--teal-700);
  --primary-dark-800: var(--teal-800);
  --primary-dark-900: var(--teal-900);
  --primary-dark-950: var(--teal-950);
  --primary-high-contrast-50: var(--teal-50);
  --primary-high-contrast-100: var(--teal-100);
  --primary-high-contrast-200: var(--teal-200);
  --primary-high-contrast-300: var(--teal-300);
  --primary-high-contrast-400: var(--teal-400);
  --primary-high-contrast-500: var(--teal-500);
  --primary-high-contrast-600: var(--teal-600);
  --primary-high-contrast-700: var(--teal-700);
  --primary-high-contrast-800: var(--teal-800);
  --primary-high-contrast-900: var(--teal-900);
  --primary-high-contrast-950: var(--teal-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="indigo"] {
  --primary-50: var(--indigo-50);
  --primary-100: var(--indigo-100);
  --primary-200: var(--indigo-200);
  --primary-300: var(--indigo-300);
  --primary-400: var(--indigo-400);
  --primary-500: var(--indigo-500);
  --primary-600: var(--indigo-600);
  --primary-700: var(--indigo-700);
  --primary-800: var(--indigo-800);
  --primary-900: var(--indigo-900);
  --primary-950: var(--indigo-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--indigo-50);
  --primary-dark-100: var(--indigo-100);
  --primary-dark-200: var(--indigo-200);
  --primary-dark-300: var(--indigo-300);
  --primary-dark-400: var(--indigo-400);
  --primary-dark-500: var(--indigo-500);
  --primary-dark-600: var(--indigo-600);
  --primary-dark-700: var(--indigo-700);
  --primary-dark-800: var(--indigo-800);
  --primary-dark-900: var(--indigo-900);
  --primary-dark-950: var(--indigo-950);
  --primary-high-contrast-50: var(--indigo-50);
  --primary-high-contrast-100: var(--indigo-100);
  --primary-high-contrast-200: var(--indigo-200);
  --primary-high-contrast-300: var(--indigo-300);
  --primary-high-contrast-400: var(--indigo-400);
  --primary-high-contrast-500: var(--indigo-500);
  --primary-high-contrast-600: var(--indigo-600);
  --primary-high-contrast-700: var(--indigo-700);
  --primary-high-contrast-800: var(--indigo-800);
  --primary-high-contrast-900: var(--indigo-900);
  --primary-high-contrast-950: var(--indigo-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="purple"] {
  --primary-50: var(--purple-50);
  --primary-100: var(--purple-100);
  --primary-200: var(--purple-200);
  --primary-300: var(--purple-300);
  --primary-400: var(--purple-400);
  --primary-500: var(--purple-500);
  --primary-600: var(--purple-600);
  --primary-700: var(--purple-700);
  --primary-800: var(--purple-800);
  --primary-900: var(--purple-900);
  --primary-950: var(--purple-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--purple-50);
  --primary-dark-100: var(--purple-100);
  --primary-dark-200: var(--purple-200);
  --primary-dark-300: var(--purple-300);
  --primary-dark-400: var(--purple-400);
  --primary-dark-500: var(--purple-500);
  --primary-dark-600: var(--purple-600);
  --primary-dark-700: var(--purple-700);
  --primary-dark-800: var(--purple-800);
  --primary-dark-900: var(--purple-900);
  --primary-dark-950: var(--purple-950);
  --primary-high-contrast-50: var(--purple-50);
  --primary-high-contrast-100: var(--purple-100);
  --primary-high-contrast-200: var(--purple-200);
  --primary-high-contrast-300: var(--purple-300);
  --primary-high-contrast-400: var(--purple-400);
  --primary-high-contrast-500: var(--purple-500);
  --primary-high-contrast-600: var(--purple-600);
  --primary-high-contrast-700: var(--purple-700);
  --primary-high-contrast-800: var(--purple-800);
  --primary-high-contrast-900: var(--purple-900);
  --primary-high-contrast-950: var(--purple-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="brown"] {
  --primary-50: var(--brown-50);
  --primary-100: var(--brown-100);
  --primary-200: var(--brown-200);
  --primary-300: var(--brown-300);
  --primary-400: var(--brown-400);
  --primary-500: var(--brown-500);
  --primary-600: var(--brown-600);
  --primary-700: var(--brown-700);
  --primary-800: var(--brown-800);
  --primary-900: var(--brown-900);
  --primary-950: var(--brown-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--brown-50);
  --primary-dark-100: var(--brown-100);
  --primary-dark-200: var(--brown-200);
  --primary-dark-300: var(--brown-300);
  --primary-dark-400: var(--brown-400);
  --primary-dark-500: var(--brown-500);
  --primary-dark-600: var(--brown-600);
  --primary-dark-700: var(--brown-700);
  --primary-dark-800: var(--brown-800);
  --primary-dark-900: var(--brown-900);
  --primary-dark-950: var(--brown-950);
  --primary-high-contrast-50: var(--brown-50);
  --primary-high-contrast-100: var(--brown-100);
  --primary-high-contrast-200: var(--brown-200);
  --primary-high-contrast-300: var(--brown-300);
  --primary-high-contrast-400: var(--brown-400);
  --primary-high-contrast-500: var(--brown-500);
  --primary-high-contrast-600: var(--brown-600);
  --primary-high-contrast-700: var(--brown-700);
  --primary-high-contrast-800: var(--brown-800);
  --primary-high-contrast-900: var(--brown-900);
  --primary-high-contrast-950: var(--brown-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="gray"] {
  --primary-50: var(--gray-50);
  --primary-100: var(--gray-100);
  --primary-200: var(--gray-200);
  --primary-300: var(--gray-300);
  --primary-400: var(--gray-400);
  --primary-500: var(--gray-500);
  --primary-600: var(--gray-600);
  --primary-700: var(--gray-700);
  --primary-800: var(--gray-800);
  --primary-900: var(--gray-900);
  --primary-950: var(--gray-950);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--gray-50);
  --primary-dark-100: var(--gray-100);
  --primary-dark-200: var(--gray-200);
  --primary-dark-300: var(--gray-300);
  --primary-dark-400: var(--gray-400);
  --primary-dark-500: var(--gray-500);
  --primary-dark-600: var(--gray-600);
  --primary-dark-700: var(--gray-700);
  --primary-dark-800: var(--gray-800);
  --primary-dark-900: var(--gray-900);
  --primary-dark-950: var(--gray-950);
  --primary-high-contrast-50: var(--gray-50);
  --primary-high-contrast-100: var(--gray-100);
  --primary-high-contrast-200: var(--gray-200);
  --primary-high-contrast-300: var(--gray-300);
  --primary-high-contrast-400: var(--gray-400);
  --primary-high-contrast-500: var(--gray-500);
  --primary-high-contrast-600: var(--gray-600);
  --primary-high-contrast-700: var(--gray-700);
  --primary-high-contrast-800: var(--gray-800);
  --primary-high-contrast-900: var(--gray-900);
  --primary-high-contrast-950: var(--gray-950);
  --primary-dark-on-fill: var(--white);
}

[data-primary="black"] {
  --primary-50: var(--gray-50);
  --primary-100: var(--gray-100);
  --primary-200: var(--gray-200);
  --primary-300: var(--gray-400);
  --primary-400: var(--gray-700);
  --primary-500: var(--black);
  --primary-600: var(--gray-900);
  --primary-700: var(--gray-800);
  --primary-800: var(--gray-950);
  --primary-900: var(--gray-600);
  --primary-950: var(--gray-500);
  --primary-on-fill: var(--white);
  --primary-dark-50: var(--gray-500);
  --primary-dark-100: var(--gray-400);
  --primary-dark-200: var(--gray-50);
  --primary-dark-300: var(--gray-200);
  --primary-dark-400: var(--gray-100);
  --primary-dark-500: var(--white);
  --primary-dark-600: var(--gray-300);
  --primary-dark-700: var(--gray-600);
  --primary-dark-800: var(--gray-800);
  --primary-dark-900: var(--gray-900);
  --primary-dark-950: var(--gray-950);
  --primary-high-contrast-50: var(--gray-50);
  --primary-high-contrast-100: var(--gray-100);
  --primary-high-contrast-200: var(--gray-200);
  --primary-high-contrast-300: var(--gray-300);
  --primary-high-contrast-400: var(--gray-600);
  --primary-high-contrast-500: var(--gray-900);
  --primary-high-contrast-600: var(--black);
  --primary-high-contrast-700: var(--gray-950);
  --primary-high-contrast-800: var(--gray-900);
  --primary-high-contrast-900: var(--gray-950);
  --primary-high-contrast-950: var(--gray-700);
  --primary-dark-on-fill: var(--black);
}

/* ---- semantic roles: 3 themes (default light) ---- */
:root, [data-theme="light"] {
  --surface-page: var(--white);
  --surface-default: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-raised: var(--white);
  --surface-backdrop: #1a1a1d80;
  --surface-sunken: var(--gray-100);
  --surface-disabled: var(--gray-50);
  --surface-inverse: var(--gray-900);
  --state-hover: color-mix(in srgb, var(--gray-950) 5%, transparent);
  --state-press: color-mix(in srgb, var(--gray-950) 5%, transparent);
  --state-on: color-mix(in srgb, var(--gray-950) 5%, transparent);
  --state-on-hover: color-mix(in srgb, var(--gray-950) 9.75%, transparent);
  --text-default: var(--gray-950);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-placeholder: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse: var(--gray-50);
  --text-on-fill: var(--gray-950);
  --border-subtle: var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-selected: var(--gray-800);
  --border-inverse: var(--gray-50);
  --border-disabled: var(--gray-100);
  --fill-default: var(--gray-100);
  --fill-hover: var(--gray-200);
  --fill-active: var(--gray-300);
  --fill-selected: var(--gray-300);
  --fill-disabled: var(--gray-100);
  --icon-default: var(--gray-900);
  --icon-secondary: var(--gray-600);
  --icon-tertiary: var(--gray-500);
  --icon-disabled: var(--gray-300);
  --icon-inverse: var(--gray-50);
  --icon-on-fill: var(--text-on-fill);
  --text-accent: var(--primary-600);
  --text-accent-hover: var(--primary-800);
  --text-accent-on-fill: var(--primary-on-fill);
  --border-accent: var(--primary-500);
  --border-accent-focus: var(--primary-500);
  --fill-accent: var(--primary-500);
  --fill-accent-hover: var(--primary-600);
  --fill-accent-active: var(--primary-600);
  --fill-accent-disabled: var(--primary-200);
  --icon-accent: var(--primary-600);
  --icon-accent-on-fill: var(--text-accent-on-fill);
  --state-accent-hover: color-mix(in srgb, var(--primary-600) 10%, transparent);
  --state-accent-press: color-mix(in srgb, var(--primary-600) 10%, transparent);
  --state-accent-on: color-mix(in srgb, var(--primary-600) 10%, transparent);
  --surface-success: var(--green-50);
  --surface-warning: var(--orange-50);
  --surface-error: var(--red-50);
  --surface-info: var(--blue-50);
  --text-success: var(--green-600);
  --text-success-on-fill: var(--white);
  --text-warning: var(--orange-600);
  --text-warning-on-fill: var(--black);
  --text-error: var(--red-600);
  --text-error-on-fill: var(--white);
  --text-info: var(--blue-600);
  --text-info-on-fill: var(--white);
  --border-success: var(--green-300);
  --border-warning: var(--orange-300);
  --border-error: var(--red-600);
  --border-info: var(--blue-300);
  --fill-success: var(--green-600);
  --fill-warning: var(--orange-500);
  --fill-error: var(--red-600);
  --fill-error-hover: var(--red-700);
  --fill-error-active: var(--red-800);
  --fill-info: var(--blue-600);
  --icon-success: var(--green-600);
  --icon-success-on-fill: var(--text-success-on-fill);
  --icon-warning: var(--orange-600);
  --icon-warning-on-fill: var(--text-warning-on-fill);
  --icon-error: var(--red-600);
  --icon-error-on-fill: var(--text-error-on-fill);
  --icon-info: var(--blue-600);
  --icon-info-on-fill: var(--text-info-on-fill);
  --state-error-hover: color-mix(in srgb, var(--red-600) 10%, transparent);
  --state-error-press: color-mix(in srgb, var(--red-600) 10%, transparent);
  --red-surface: var(--red-100);
  --red-text: var(--red-700);
  --red-border: var(--red-400);
  --orange-surface: var(--orange-100);
  --orange-text: var(--orange-800);
  --orange-border: var(--orange-400);
  --yellow-surface: var(--yellow-100);
  --yellow-text: var(--yellow-800);
  --yellow-border: var(--yellow-400);
  --green-surface: var(--green-100);
  --green-text: var(--green-800);
  --green-border: var(--green-400);
  --mint-surface: var(--mint-100);
  --mint-text: var(--mint-800);
  --mint-border: var(--mint-400);
  --teal-surface: var(--teal-100);
  --teal-text: var(--teal-800);
  --teal-border: var(--teal-400);
  --cyan-surface: var(--cyan-100);
  --cyan-text: var(--cyan-800);
  --cyan-border: var(--cyan-400);
  --blue-surface: var(--blue-100);
  --blue-text: var(--blue-700);
  --blue-border: var(--blue-400);
  --indigo-surface: var(--indigo-100);
  --indigo-text: var(--indigo-700);
  --indigo-border: var(--indigo-400);
  --purple-surface: var(--purple-100);
  --purple-text: var(--purple-700);
  --purple-border: var(--purple-400);
  --pink-surface: var(--pink-100);
  --pink-text: var(--pink-700);
  --pink-border: var(--pink-400);
  --brown-surface: var(--brown-100);
  --brown-text: var(--brown-700);
  --brown-border: var(--brown-400);
  --gray-surface: var(--gray-100);
  --gray-text: var(--gray-700);
  --gray-border: var(--gray-400);
  --syntax-surface: var(--gray-50);
  --syntax-keyword: var(--purple-700);
  --syntax-string: var(--green-700);
  --syntax-comment: var(--gray-700);
  --syntax-number: var(--orange-700);
  --syntax-function: var(--blue-700);
  --syntax-class: var(--teal-700);
  --syntax-variable: var(--red-700);
  --syntax-punctuation: var(--gray-800);
  --shadow-none: none;
  --shadow-1: 0px 1px 3px 0px #1a1a1d0f, 0px 1px 2px 0px #1a1a1d0a, 0px 0px 1px 0px #0000001a;
  --shadow-2: 0px 4px 12px -2px #1a1a1d1a, 0px 2px 6px -1px #1a1a1d14, 0px 0px 1px 0px #0000001a;
  --shadow-3: 0px 12px 28px -6px #1a1a1d1f, 0px 6px 16px -4px #1a1a1d1a, 0px 0px 1px 0px #0000001a;
}

[data-theme="dark"] {
  --surface-page: var(--gray-950);
  --surface-default: var(--gray-900);
  --surface-subtle: var(--gray-800);
  --surface-raised: var(--gray-900);
  --surface-backdrop: #00000099;
  --surface-sunken: var(--gray-950);
  --surface-disabled: var(--gray-900);
  --surface-inverse: var(--gray-50);
  --state-hover: color-mix(in srgb, var(--gray-50) 5%, transparent);
  --state-press: color-mix(in srgb, var(--gray-50) 5%, transparent);
  --state-on: color-mix(in srgb, var(--gray-50) 5%, transparent);
  --state-on-hover: color-mix(in srgb, var(--gray-50) 9.75%, transparent);
  --text-default: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-placeholder: var(--gray-500);
  --text-disabled: var(--gray-600);
  --text-inverse: var(--gray-950);
  --text-on-fill: var(--white);
  --border-subtle: var(--gray-700);
  --border-default: var(--gray-600);
  --border-strong: var(--gray-400);
  --border-selected: var(--gray-200);
  --border-inverse: var(--gray-950);
  --border-disabled: var(--gray-900);
  --fill-default: var(--gray-800);
  --fill-hover: var(--gray-700);
  --fill-active: var(--gray-600);
  --fill-selected: var(--gray-600);
  --fill-disabled: var(--gray-900);
  --icon-default: var(--gray-50);
  --icon-secondary: var(--gray-300);
  --icon-tertiary: var(--gray-400);
  --icon-disabled: var(--gray-600);
  --icon-inverse: var(--gray-950);
  --icon-on-fill: var(--text-on-fill);
  --text-accent: var(--primary-dark-400);
  --text-accent-hover: var(--primary-dark-200);
  --text-accent-on-fill: var(--primary-dark-on-fill);
  --border-accent: var(--primary-dark-500);
  --border-accent-focus: var(--primary-dark-500);
  --fill-accent: var(--primary-dark-500);
  --fill-accent-hover: var(--primary-dark-400);
  --fill-accent-active: var(--primary-dark-400);
  --fill-accent-disabled: var(--primary-dark-800);
  --icon-accent: var(--primary-dark-400);
  --icon-accent-on-fill: var(--text-accent-on-fill);
  --state-accent-hover: color-mix(in srgb, var(--primary-dark-500) 10%, transparent);
  --state-accent-press: color-mix(in srgb, var(--primary-dark-500) 10%, transparent);
  --state-accent-on: color-mix(in srgb, var(--primary-dark-500) 10%, transparent);
  --surface-success: var(--green-900);
  --surface-warning: var(--orange-900);
  --surface-error: var(--red-900);
  --surface-info: var(--blue-900);
  --text-success: var(--green-400);
  --text-success-on-fill: var(--white);
  --text-warning: var(--orange-400);
  --text-warning-on-fill: var(--black);
  --text-error: var(--red-400);
  --text-error-on-fill: var(--white);
  --text-info: var(--blue-400);
  --text-info-on-fill: var(--white);
  --border-success: var(--green-500);
  --border-warning: var(--orange-500);
  --border-error: var(--red-400);
  --border-info: var(--blue-500);
  --fill-success: var(--green-500);
  --fill-warning: var(--orange-500);
  --fill-error: var(--red-500);
  --fill-error-hover: var(--red-600);
  --fill-error-active: var(--red-700);
  --fill-info: var(--blue-600);
  --icon-success: var(--green-400);
  --icon-success-on-fill: var(--text-success-on-fill);
  --icon-warning: var(--orange-400);
  --icon-warning-on-fill: var(--text-warning-on-fill);
  --icon-error: var(--red-400);
  --icon-error-on-fill: var(--text-error-on-fill);
  --icon-info: var(--blue-400);
  --icon-info-on-fill: var(--text-info-on-fill);
  --state-error-hover: color-mix(in srgb, var(--red-500) 10%, transparent);
  --state-error-press: color-mix(in srgb, var(--red-500) 10%, transparent);
  --red-surface: var(--red-900);
  --red-text: var(--red-300);
  --red-border: var(--red-500);
  --orange-surface: var(--orange-900);
  --orange-text: var(--orange-300);
  --orange-border: var(--orange-500);
  --yellow-surface: var(--yellow-900);
  --yellow-text: var(--yellow-300);
  --yellow-border: var(--yellow-500);
  --green-surface: var(--green-900);
  --green-text: var(--green-300);
  --green-border: var(--green-500);
  --mint-surface: var(--mint-900);
  --mint-text: var(--mint-300);
  --mint-border: var(--mint-500);
  --teal-surface: var(--teal-900);
  --teal-text: var(--teal-300);
  --teal-border: var(--teal-500);
  --cyan-surface: var(--cyan-900);
  --cyan-text: var(--cyan-300);
  --cyan-border: var(--cyan-500);
  --blue-surface: var(--blue-900);
  --blue-text: var(--blue-300);
  --blue-border: var(--blue-500);
  --indigo-surface: var(--indigo-900);
  --indigo-text: var(--indigo-300);
  --indigo-border: var(--indigo-500);
  --purple-surface: var(--purple-900);
  --purple-text: var(--purple-300);
  --purple-border: var(--purple-500);
  --pink-surface: var(--pink-900);
  --pink-text: var(--pink-300);
  --pink-border: var(--pink-500);
  --brown-surface: var(--brown-900);
  --brown-text: var(--brown-300);
  --brown-border: var(--brown-500);
  --gray-surface: var(--gray-900);
  --gray-text: var(--gray-300);
  --gray-border: var(--gray-500);
  --syntax-surface: var(--gray-950);
  --syntax-keyword: var(--purple-300);
  --syntax-string: var(--green-300);
  --syntax-comment: var(--gray-400);
  --syntax-number: var(--orange-300);
  --syntax-function: var(--blue-300);
  --syntax-class: var(--teal-300);
  --syntax-variable: var(--red-300);
  --syntax-punctuation: var(--gray-300);
  --shadow-none: none;
  --shadow-1: 0px 1px 3px 0px #1a1a1d40, 0px 1px 2px 0px #1a1a1d29, 0px 0px 1px 0px #ffffff26;
  --shadow-2: 0px 4px 12px -2px #1a1a1d4d, 0px 2px 6px -1px #1a1a1d3d, 0px 0px 1px 0px #ffffff26;
  --shadow-3: 0px 12px 28px -6px #1a1a1d59, 0px 6px 16px -4px #1a1a1d4d, 0px 0px 1px 0px #ffffff26;
}

[data-theme="high-contrast"] {
  --surface-page: var(--gray-50);
  --surface-default: var(--gray-50);
  --surface-subtle: var(--gray-100);
  --surface-raised: var(--gray-50);
  --surface-backdrop: #1a1a1d99;
  --surface-sunken: var(--gray-200);
  --surface-disabled: var(--gray-100);
  --surface-inverse: var(--gray-950);
  --state-hover: color-mix(in srgb, var(--gray-950) 13%, transparent);
  --state-press: color-mix(in srgb, var(--gray-950) 26%, transparent);
  --state-on: color-mix(in srgb, var(--gray-950) 38%, transparent);
  --state-on-hover: color-mix(in srgb, var(--gray-950) 38%, transparent);
  --text-default: var(--gray-950);
  --text-secondary: var(--gray-900);
  --text-tertiary: var(--gray-800);
  --text-placeholder: var(--gray-600);
  --text-disabled: var(--gray-500);
  --text-inverse: var(--gray-50);
  --text-on-fill: var(--gray-950);
  --border-subtle: var(--gray-600);
  --border-default: var(--gray-700);
  --border-strong: var(--gray-800);
  --border-selected: var(--gray-900);
  --border-inverse: var(--gray-50);
  --border-disabled: var(--gray-300);
  --fill-default: var(--gray-200);
  --fill-hover: var(--gray-300);
  --fill-active: var(--gray-400);
  --fill-selected: var(--gray-400);
  --fill-disabled: var(--gray-200);
  --icon-default: var(--gray-900);
  --icon-secondary: var(--gray-800);
  --icon-tertiary: var(--gray-700);
  --icon-disabled: var(--gray-400);
  --icon-inverse: var(--gray-50);
  --icon-on-fill: var(--text-on-fill);
  --text-accent: var(--primary-high-contrast-800);
  --text-accent-hover: var(--primary-high-contrast-900);
  --text-accent-on-fill: var(--primary-on-fill);
  --border-accent: var(--primary-high-contrast-700);
  --border-accent-focus: var(--primary-high-contrast-800);
  --fill-accent: var(--primary-high-contrast-600);
  --fill-accent-hover: var(--primary-high-contrast-700);
  --fill-accent-active: var(--primary-high-contrast-800);
  --fill-accent-disabled: var(--primary-high-contrast-300);
  --icon-accent: var(--primary-high-contrast-700);
  --icon-accent-on-fill: var(--text-accent-on-fill);
  --state-accent-hover: color-mix(in srgb, var(--primary-high-contrast-800) 18%, transparent);
  --state-accent-press: color-mix(in srgb, var(--primary-high-contrast-800) 46%, transparent);
  --state-accent-on: color-mix(in srgb, var(--primary-high-contrast-800) 46%, transparent);
  --surface-success: var(--green-100);
  --surface-warning: var(--orange-100);
  --surface-error: var(--red-100);
  --surface-info: var(--blue-100);
  --text-success: var(--green-800);
  --text-success-on-fill: var(--white);
  --text-warning: var(--orange-800);
  --text-warning-on-fill: var(--white);
  --text-error: var(--red-800);
  --text-error-on-fill: var(--white);
  --text-info: var(--blue-800);
  --text-info-on-fill: var(--white);
  --border-success: var(--green-600);
  --border-warning: var(--orange-600);
  --border-error: var(--red-600);
  --border-info: var(--blue-600);
  --fill-success: var(--green-700);
  --fill-warning: var(--orange-700);
  --fill-error: var(--red-700);
  --fill-error-hover: var(--red-800);
  --fill-error-active: var(--red-900);
  --fill-info: var(--blue-700);
  --icon-success: var(--green-700);
  --icon-success-on-fill: var(--text-success-on-fill);
  --icon-warning: var(--orange-700);
  --icon-warning-on-fill: var(--text-warning-on-fill);
  --icon-error: var(--red-700);
  --icon-error-on-fill: var(--text-error-on-fill);
  --icon-info: var(--blue-700);
  --icon-info-on-fill: var(--text-info-on-fill);
  --state-error-hover: color-mix(in srgb, var(--red-800) 18%, transparent);
  --state-error-press: color-mix(in srgb, var(--red-800) 18%, transparent);
  --red-surface: var(--red-100);
  --red-text: var(--red-900);
  --red-border: var(--red-700);
  --orange-surface: var(--orange-100);
  --orange-text: var(--orange-900);
  --orange-border: var(--orange-700);
  --yellow-surface: var(--yellow-100);
  --yellow-text: var(--yellow-900);
  --yellow-border: var(--yellow-700);
  --green-surface: var(--green-100);
  --green-text: var(--green-900);
  --green-border: var(--green-700);
  --mint-surface: var(--mint-100);
  --mint-text: var(--mint-900);
  --mint-border: var(--mint-700);
  --teal-surface: var(--teal-100);
  --teal-text: var(--teal-900);
  --teal-border: var(--teal-700);
  --cyan-surface: var(--cyan-100);
  --cyan-text: var(--cyan-900);
  --cyan-border: var(--cyan-700);
  --blue-surface: var(--blue-100);
  --blue-text: var(--blue-900);
  --blue-border: var(--blue-700);
  --indigo-surface: var(--indigo-100);
  --indigo-text: var(--indigo-900);
  --indigo-border: var(--indigo-700);
  --purple-surface: var(--purple-100);
  --purple-text: var(--purple-900);
  --purple-border: var(--purple-700);
  --pink-surface: var(--pink-100);
  --pink-text: var(--pink-900);
  --pink-border: var(--pink-700);
  --brown-surface: var(--brown-100);
  --brown-text: var(--brown-900);
  --brown-border: var(--brown-700);
  --gray-surface: var(--gray-100);
  --gray-text: var(--gray-900);
  --gray-border: var(--gray-700);
  --syntax-surface: var(--white);
  --syntax-keyword: var(--purple-800);
  --syntax-string: var(--green-800);
  --syntax-comment: var(--gray-700);
  --syntax-number: var(--orange-800);
  --syntax-function: var(--blue-800);
  --syntax-class: var(--teal-800);
  --syntax-variable: var(--red-800);
  --syntax-punctuation: var(--gray-800);
  --shadow-none: none;
  --shadow-1: 0px 1px 2px 0px #1a1a1d1f;
  --shadow-2: 0px 2px 4px 0px #1a1a1d29;
  --shadow-3: 0px 4px 8px 0px #1a1a1d33;
}

/* ---- the OS contrast preference: high contrast, unless a theme was chosen ----
 * `:root:not([data-theme])` — NOT `:root`. A media query adds no specificity, so a
 * bare `:root` here would merely be a later rule of equal weight and would override
 * an EXPLICIT `data-theme="light"`. The `:not()` is what makes an explicit choice
 * win in both directions. See emit_contrast_preference() in the generator. */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --surface-page: var(--gray-50);
    --surface-default: var(--gray-50);
    --surface-subtle: var(--gray-100);
    --surface-raised: var(--gray-50);
    --surface-backdrop: #1a1a1d99;
    --surface-sunken: var(--gray-200);
    --surface-disabled: var(--gray-100);
    --surface-inverse: var(--gray-950);
    --state-hover: color-mix(in srgb, var(--gray-950) 13%, transparent);
    --state-press: color-mix(in srgb, var(--gray-950) 26%, transparent);
    --state-on: color-mix(in srgb, var(--gray-950) 38%, transparent);
    --state-on-hover: color-mix(in srgb, var(--gray-950) 38%, transparent);
    --text-default: var(--gray-950);
    --text-secondary: var(--gray-900);
    --text-tertiary: var(--gray-800);
    --text-placeholder: var(--gray-600);
    --text-disabled: var(--gray-500);
    --text-inverse: var(--gray-50);
    --text-on-fill: var(--gray-950);
    --border-subtle: var(--gray-600);
    --border-default: var(--gray-700);
    --border-strong: var(--gray-800);
    --border-selected: var(--gray-900);
    --border-inverse: var(--gray-50);
    --border-disabled: var(--gray-300);
    --fill-default: var(--gray-200);
    --fill-hover: var(--gray-300);
    --fill-active: var(--gray-400);
    --fill-selected: var(--gray-400);
    --fill-disabled: var(--gray-200);
    --icon-default: var(--gray-900);
    --icon-secondary: var(--gray-800);
    --icon-tertiary: var(--gray-700);
    --icon-disabled: var(--gray-400);
    --icon-inverse: var(--gray-50);
    --icon-on-fill: var(--text-on-fill);
    --text-accent: var(--primary-high-contrast-800);
    --text-accent-hover: var(--primary-high-contrast-900);
    --text-accent-on-fill: var(--primary-on-fill);
    --border-accent: var(--primary-high-contrast-700);
    --border-accent-focus: var(--primary-high-contrast-800);
    --fill-accent: var(--primary-high-contrast-600);
    --fill-accent-hover: var(--primary-high-contrast-700);
    --fill-accent-active: var(--primary-high-contrast-800);
    --fill-accent-disabled: var(--primary-high-contrast-300);
    --icon-accent: var(--primary-high-contrast-700);
    --icon-accent-on-fill: var(--text-accent-on-fill);
    --state-accent-hover: color-mix(in srgb, var(--primary-high-contrast-800) 18%, transparent);
    --state-accent-press: color-mix(in srgb, var(--primary-high-contrast-800) 46%, transparent);
    --state-accent-on: color-mix(in srgb, var(--primary-high-contrast-800) 46%, transparent);
    --surface-success: var(--green-100);
    --surface-warning: var(--orange-100);
    --surface-error: var(--red-100);
    --surface-info: var(--blue-100);
    --text-success: var(--green-800);
    --text-success-on-fill: var(--white);
    --text-warning: var(--orange-800);
    --text-warning-on-fill: var(--white);
    --text-error: var(--red-800);
    --text-error-on-fill: var(--white);
    --text-info: var(--blue-800);
    --text-info-on-fill: var(--white);
    --border-success: var(--green-600);
    --border-warning: var(--orange-600);
    --border-error: var(--red-600);
    --border-info: var(--blue-600);
    --fill-success: var(--green-700);
    --fill-warning: var(--orange-700);
    --fill-error: var(--red-700);
    --fill-error-hover: var(--red-800);
    --fill-error-active: var(--red-900);
    --fill-info: var(--blue-700);
    --icon-success: var(--green-700);
    --icon-success-on-fill: var(--text-success-on-fill);
    --icon-warning: var(--orange-700);
    --icon-warning-on-fill: var(--text-warning-on-fill);
    --icon-error: var(--red-700);
    --icon-error-on-fill: var(--text-error-on-fill);
    --icon-info: var(--blue-700);
    --icon-info-on-fill: var(--text-info-on-fill);
    --state-error-hover: color-mix(in srgb, var(--red-800) 18%, transparent);
    --state-error-press: color-mix(in srgb, var(--red-800) 18%, transparent);
    --red-surface: var(--red-100);
    --red-text: var(--red-900);
    --red-border: var(--red-700);
    --orange-surface: var(--orange-100);
    --orange-text: var(--orange-900);
    --orange-border: var(--orange-700);
    --yellow-surface: var(--yellow-100);
    --yellow-text: var(--yellow-900);
    --yellow-border: var(--yellow-700);
    --green-surface: var(--green-100);
    --green-text: var(--green-900);
    --green-border: var(--green-700);
    --mint-surface: var(--mint-100);
    --mint-text: var(--mint-900);
    --mint-border: var(--mint-700);
    --teal-surface: var(--teal-100);
    --teal-text: var(--teal-900);
    --teal-border: var(--teal-700);
    --cyan-surface: var(--cyan-100);
    --cyan-text: var(--cyan-900);
    --cyan-border: var(--cyan-700);
    --blue-surface: var(--blue-100);
    --blue-text: var(--blue-900);
    --blue-border: var(--blue-700);
    --indigo-surface: var(--indigo-100);
    --indigo-text: var(--indigo-900);
    --indigo-border: var(--indigo-700);
    --purple-surface: var(--purple-100);
    --purple-text: var(--purple-900);
    --purple-border: var(--purple-700);
    --pink-surface: var(--pink-100);
    --pink-text: var(--pink-900);
    --pink-border: var(--pink-700);
    --brown-surface: var(--brown-100);
    --brown-text: var(--brown-900);
    --brown-border: var(--brown-700);
    --gray-surface: var(--gray-100);
    --gray-text: var(--gray-900);
    --gray-border: var(--gray-700);
    --syntax-surface: var(--white);
    --syntax-keyword: var(--purple-800);
    --syntax-string: var(--green-800);
    --syntax-comment: var(--gray-700);
    --syntax-number: var(--orange-800);
    --syntax-function: var(--blue-800);
    --syntax-class: var(--teal-800);
    --syntax-variable: var(--red-800);
    --syntax-punctuation: var(--gray-800);
    --shadow-none: none;
    --shadow-1: 0px 1px 2px 0px #1a1a1d1f;
    --shadow-2: 0px 2px 4px 0px #1a1a1d29;
    --shadow-3: 0px 4px 8px 0px #1a1a1d33;
  }
}

/* ---- state-layer delivery: each wash, pre-wrapped as a background-image layer ----
 * The wash is composited OVER the control's own face, so it CANNOT ride in
 * background-color. It rides in background-image, which paints below the border,
 * below an inset focus ring and below every child — unlike a ::before overlay,
 * which is a child and repaints the ring.
 * ⚠️ The `background` SHORTHAND resets background-image and therefore DELETES the
 * wash. It is banned on any box that carries one; scripts/check_state_layers.py
 * enforces it. */
:root {
  --state-layer-hover: linear-gradient(var(--state-hover), var(--state-hover));
  --state-layer-press: linear-gradient(var(--state-press), var(--state-press));
  --state-layer-on: linear-gradient(var(--state-on), var(--state-on));
  --state-layer-on-hover: linear-gradient(var(--state-on-hover), var(--state-on-hover));
  --state-layer-accent-hover: linear-gradient(var(--state-accent-hover), var(--state-accent-hover));
  --state-layer-accent-press: linear-gradient(var(--state-accent-press), var(--state-accent-press));
  --state-layer-accent-on: linear-gradient(var(--state-accent-on), var(--state-accent-on));
  --state-layer-error-hover: linear-gradient(var(--state-error-hover), var(--state-error-hover));
  --state-layer-error-press: linear-gradient(var(--state-error-press), var(--state-error-press));
}