/* clay-ui theme — generated by scripts/make-theme.mjs from assets/tokens.json.
 * Brand accent: Clay blueberry (default); fill step 500 = #0382f7; text on fill #ffffff.
 * Do not hand-edit values here: change tokens.json or re-run with --brand. */

:root {
  color-scheme: light;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-nightshade-50: #f7f8f9;
  --color-nightshade-100: #eff1f3;
  --color-nightshade-200: #e6e8ec;
  --color-nightshade-300: #d6d9df;
  --color-nightshade-400: #bfc4cd;
  --color-nightshade-500: #979da9;
  --color-nightshade-600: #717989;
  --color-nightshade-700: #525a69;
  --color-nightshade-800: #3c414d;
  --color-nightshade-900: #282c35;
  --color-nightshade-950: #16181f;
  --color-blueberry-50: #ecf6ff;
  --color-blueberry-100: #d7ebfe;
  --color-blueberry-200: #b8ddff;
  --color-blueberry-300: #81c2ff;
  --color-blueberry-400: #3ea2fd;
  --color-blueberry-500: #0382f7;
  --color-blueberry-600: #0667d9;
  --color-blueberry-700: #0053b5;
  --color-blueberry-800: #01418d;
  --color-blueberry-900: #002f67;
  --color-blueberry-950: #001e4b;
  --color-matcha-50: #eefff1;
  --color-matcha-100: #dbffe0;
  --color-matcha-200: #bcf4ca;
  --color-matcha-300: #84e7a5;
  --color-matcha-400: #3ece82;
  --color-matcha-500: #0dac65;
  --color-matcha-600: #078a52;
  --color-matcha-700: #02693e;
  --color-matcha-800: #02492a;
  --color-matcha-900: #03331d;
  --color-matcha-950: #002414;
  --color-pomegranate-50: #fff1f2;
  --color-pomegranate-100: #ffe4e6;
  --color-pomegranate-200: #fecdd3;
  --color-pomegranate-300: #fda4af;
  --color-pomegranate-400: #ff7d90;
  --color-pomegranate-500: #e94d68;
  --color-pomegranate-600: #dd2c53;
  --color-pomegranate-700: #b21a3f;
  --color-pomegranate-800: #8e1230;
  --color-pomegranate-900: #630d21;
  --color-pomegranate-950: #450417;
  --color-tangerine-50: #fff3ed;
  --color-tangerine-100: #ffe9d5;
  --color-tangerine-200: #fdd4b7;
  --color-tangerine-300: #ffbe90;
  --color-tangerine-400: #ffa775;
  --color-tangerine-500: #f58c50;
  --color-tangerine-600: #e56e2c;
  --color-tangerine-700: #c34e1b;
  --color-tangerine-800: #9f3e15;
  --color-tangerine-900: #752b12;
  --color-tangerine-950: #431407;
  --color-lemon-50: #fefae8;
  --color-lemon-100: #fff8d2;
  --color-lemon-200: #fef0a4;
  --color-lemon-300: #fadf7c;
  --color-lemon-400: #f8cf65;
  --color-lemon-500: #f6c23d;
  --color-lemon-600: #e6ad1a;
  --color-lemon-700: #d49110;
  --color-lemon-800: #b37601;
  --color-lemon-900: #8a570b;
  --color-lemon-950: #5b3305;
  --color-ube-50: #f5f3ff;
  --color-ube-100: #e9e4ff;
  --color-ube-200: #d8d0ff;
  --color-ube-300: #c1b0ff;
  --color-ube-400: #a789fe;
  --color-ube-500: #8b5cf6;
  --color-ube-600: #7934f0;
  --color-ube-700: #5c15cc;
  --color-ube-800: #43089f;
  --color-ube-900: #32037d;
  --color-ube-950: #230059;
  --color-dragonfruit-50: #fff5fc;
  --color-dragonfruit-100: #ffe5f7;
  --color-dragonfruit-200: #ffd1f1;
  --color-dragonfruit-300: #ffb8e8;
  --color-dragonfruit-400: #ff99df;
  --color-dragonfruit-500: #ff7ad5;
  --color-dragonfruit-600: #ff52c2;
  --color-dragonfruit-700: #f90ba6;
  --color-dragonfruit-800: #cc0687;
  --color-dragonfruit-900: #8b045c;
  --color-dragonfruit-950: #4a0232;
  --color-slushie-50: #f5fdff;
  --color-slushie-100: #e0f8ff;
  --color-slushie-200: #c7f3ff;
  --color-slushie-300: #a3ebff;
  --color-slushie-400: #7ae3ff;
  --color-slushie-500: #3bd3fd;
  --color-slushie-600: #2abeea;
  --color-slushie-700: #02a8d4;
  --color-slushie-800: #0089ad;
  --color-slushie-900: #005870;
  --color-slushie-950: #00303d;
  --color-oat-50: #fffcfa;
  --color-oat-100: #f9f8f6;
  --color-oat-200: #f3f2ed;
  --color-oat-300: #eee9df;
  --color-oat-400: #dad4c8;
  --color-oat-500: #c0bbaf;
  --color-oat-600: #9f9b93;
  --color-oat-700: #85817a;
  --color-oat-800: #55534e;
  --color-oat-900: #363430;
  --color-oat-950: #1b1a18;
  --color-brand-50: #ecf6ff;
  --color-brand-100: #d7ebfe;
  --color-brand-200: #b8ddff;
  --color-brand-300: #81c2ff;
  --color-brand-400: #3ea2fd;
  --color-brand-500: #0382f7;
  --color-brand-600: #0667d9;
  --color-brand-700: #0053b5;
  --color-brand-800: #01418d;
  --color-brand-900: #002f67;
  --color-brand-950: #001e4b;
  --color-alpha-black-50: #16181f0d;
  --color-alpha-black-100: #16181f1a;
  --color-alpha-black-200: #16181f26;
  --color-alpha-black-300: #16181f33;
  --color-alpha-black-400: #16181f4d;
  --color-alpha-black-500: #16181f66;
  --color-alpha-black-600: #16181f80;
  --color-alpha-black-700: #16181f9e;
  --color-alpha-black-800: #16181fb3;
  --color-alpha-black-900: #16181fcc;
  --color-alpha-black-950: #16181fe6;
  --color-alpha-white-50: #ffffff0d;
  --color-alpha-white-100: #ffffff1a;
  --color-alpha-white-200: #ffffff26;
  --color-alpha-white-300: #fff3;
  --color-alpha-white-400: #ffffff4d;
  --color-alpha-white-500: #fff6;
  --color-alpha-white-600: #ffffff80;
  --color-alpha-white-700: #fff9;
  --color-alpha-white-800: #ffffffb3;
  --color-alpha-white-900: #fffc;
  --color-alpha-white-950: #ffffffe6;
  --font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.75rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 2rem;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px 0 #0000000d;
  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-md: 0 2px 4px -2px #0000000a, 0 4px 6px -1px #0000000d;
  --shadow-lg: 0 0 6px 5px #0000000d, 0 10px 15px -3px #0000000d;
  --shadow-xl: 0 8px 10px -6px #0000001a, 0 20px 25px -5px #0000001a;
  --shadow-popover: 0 0 1px #00000080, 0 8px 16px #00000033;
  --shadow-tooltip: 0 4px 7px 0 #16181f66;
  --duration-fast: 100ms;
  --duration: 150ms;
  --duration-slow: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --nav-height: 48px;
  --sidebar-width: 256px;
  --sidebar-rail-width: 48px;
  --panel-width: 480px;
  --panel-width-wide: 640px;
  --toolbar-height: 52px;
  --tabbar-height: 54px;
  --grid-row-height: 34px;
  --grid-header-height: 36px;
  --grid-status-height: 24px;
  --grid-col-width: 200px;
  --grid-leading-width: 100px;
  --color-content-action: var(--color-brand-600);
  --color-content-action-active: var(--color-brand-400);
  --color-content-action-hover: var(--color-brand-500);
  --color-content-danger: var(--color-pomegranate-600);
  --color-content-danger-active: var(--color-pomegranate-400);
  --color-content-danger-hover: var(--color-pomegranate-500);
  --color-content-disabled: var(--color-alpha-black-500);
  --color-content-disabled-hover: var(--color-alpha-black-700);
  --color-content-inverse: var(--color-white);
  --color-content-inverse-active: var(--color-nightshade-100);
  --color-content-inverse-hover: var(--color-nightshade-50);
  --color-content-inverse-subtle: var(--color-nightshade-200);
  --color-content-link: var(--color-brand-600);
  --color-content-link-active: var(--color-brand-400);
  --color-content-link-hover: var(--color-brand-500);
  --color-content-placeholder: var(--color-nightshade-500);
  --color-content-primary: var(--color-black);
  --color-content-primary-active: var(--color-nightshade-900);
  --color-content-primary-hover: var(--color-nightshade-950);
  --color-content-secondary: var(--color-nightshade-800);
  --color-content-secondary-active: var(--color-nightshade-600);
  --color-content-secondary-hover: var(--color-nightshade-700);
  --color-content-selected: var(--color-brand-700);
  --color-content-success: var(--color-matcha-700);
  --color-content-success-active: var(--color-matcha-500);
  --color-content-success-hover: var(--color-matcha-600);
  --color-content-tertiary: var(--color-nightshade-700);
  --color-content-tertiary-active: var(--color-nightshade-500);
  --color-content-tertiary-hover: var(--color-nightshade-600);
  --color-content-warning: var(--color-tangerine-700);
  --color-content-warning-active: var(--color-tangerine-500);
  --color-content-warning-hover: var(--color-tangerine-600);
  --color-icon-subtle: var(--color-nightshade-500);
  --color-icon-success: var(--color-matcha-500);
  --color-icon-warning: var(--color-tangerine-500);
  --color-icon-danger: var(--color-pomegranate-500);
  --color-icon-action: var(--color-brand-500);
  --color-text-blue: var(--color-blueberry-600);
  --color-text-dark-pink: var(--color-dragonfruit-800);
  --color-text-green: var(--color-matcha-600);
  --color-text-orange: var(--color-tangerine-700);
  --color-text-pink: var(--color-dragonfruit-600);
  --color-text-purple: var(--color-ube-600);
  --color-text-red: var(--color-pomegranate-600);
  --color-text-teal: var(--color-slushie-800);
  --color-text-yellow: var(--color-lemon-800);
  --color-bg-action-active: var(--color-brand-500);
  --color-bg-action-inverse: var(--color-brand-500);
  --color-bg-action-inverse-active: var(--color-brand-700);
  --color-bg-action-inverse-disabled: var(--color-brand-300);
  --color-bg-action-inverse-hover: var(--color-brand-600);
  --color-bg-danger: var(--color-pomegranate-50);
  --color-bg-danger-active: var(--color-pomegranate-200);
  --color-bg-danger-hover: var(--color-pomegranate-100);
  --color-bg-danger-inverse: var(--color-pomegranate-600);
  --color-bg-danger-inverse-active: var(--color-pomegranate-800);
  --color-bg-danger-inverse-hover: var(--color-pomegranate-700);
  --color-bg-disabled-selected: var(--color-alpha-black-50);
  --color-bg-emphasis: var(--color-alpha-black-50);
  --color-bg-emphasis-active: var(--color-alpha-black-200);
  --color-bg-emphasis-hover: var(--color-alpha-black-100);
  --color-bg-inverse: var(--color-nightshade-950);
  --color-bg-inverse-active: var(--color-nightshade-800);
  --color-bg-inverse-hover: var(--color-nightshade-900);
  --color-bg-overlay: var(--color-nightshade-100);
  --color-bg-primary: var(--color-white);
  --color-bg-primary-active: var(--color-nightshade-100);
  --color-bg-primary-hover: var(--color-nightshade-50);
  --color-bg-raised: var(--color-white);
  --color-bg-raised-hover: var(--color-nightshade-50);
  --color-bg-scrim: var(--color-alpha-black-800);
  --color-bg-secondary: var(--color-nightshade-50);
  --color-bg-secondary-active: var(--color-nightshade-200);
  --color-bg-secondary-hover: var(--color-nightshade-100);
  --color-bg-selected: var(--color-brand-100);
  --color-bg-selected-hover: var(--color-brand-200);
  --color-bg-success: var(--color-matcha-50);
  --color-bg-success-active: var(--color-matcha-200);
  --color-bg-success-hover: var(--color-matcha-100);
  --color-bg-success-inverse: var(--color-matcha-600);
  --color-bg-success-inverse-active: var(--color-matcha-800);
  --color-bg-success-inverse-hover: var(--color-matcha-700);
  --color-bg-sunken: var(--color-nightshade-50);
  --color-bg-tertiary: var(--color-nightshade-200);
  --color-bg-tertiary-active: var(--color-nightshade-400);
  --color-bg-tertiary-hover: var(--color-nightshade-300);
  --color-bg-warning: var(--color-tangerine-50);
  --color-bg-warning-active: var(--color-tangerine-200);
  --color-bg-warning-hover: var(--color-tangerine-100);
  --color-bg-warning-inverse: var(--color-tangerine-600);
  --color-bg-warning-inverse-active: var(--color-tangerine-800);
  --color-bg-warning-inverse-hover: var(--color-tangerine-700);
  --color-bg-blue: var(--color-blueberry-100);
  --color-bg-blue-active: var(--color-blueberry-600);
  --color-bg-blue-hover: var(--color-blueberry-200);
  --color-bg-blue-light: var(--color-blueberry-50);
  --color-bg-blue-light-hover: var(--color-blueberry-100);
  --color-bg-green: var(--color-matcha-100);
  --color-bg-green-active: var(--color-matcha-600);
  --color-bg-green-hover: var(--color-matcha-200);
  --color-bg-green-light: var(--color-matcha-50);
  --color-bg-green-light-hover: var(--color-matcha-100);
  --color-bg-grey: var(--color-nightshade-100);
  --color-bg-grey-hover: var(--color-nightshade-200);
  --color-bg-grey-light: var(--color-nightshade-50);
  --color-bg-grey-light-hover: var(--color-nightshade-100);
  --color-bg-orange: var(--color-tangerine-100);
  --color-bg-orange-active: var(--color-tangerine-700);
  --color-bg-orange-hover: var(--color-tangerine-200);
  --color-bg-orange-light: var(--color-tangerine-50);
  --color-bg-orange-light-hover: var(--color-tangerine-100);
  --color-bg-pink: var(--color-dragonfruit-100);
  --color-bg-pink-active: var(--color-dragonfruit-600);
  --color-bg-pink-hover: var(--color-dragonfruit-200);
  --color-bg-pink-light: var(--color-dragonfruit-50);
  --color-bg-pink-light-hover: var(--color-dragonfruit-100);
  --color-bg-purple: var(--color-ube-100);
  --color-bg-purple-active: var(--color-ube-600);
  --color-bg-purple-hover: var(--color-ube-200);
  --color-bg-purple-light: var(--color-ube-50);
  --color-bg-purple-light-hover: var(--color-ube-100);
  --color-bg-red: var(--color-pomegranate-100);
  --color-bg-red-active: var(--color-pomegranate-600);
  --color-bg-red-hover: var(--color-pomegranate-200);
  --color-bg-red-light: var(--color-pomegranate-50);
  --color-bg-red-light-hover: var(--color-pomegranate-100);
  --color-bg-teal: var(--color-slushie-100);
  --color-bg-teal-active: var(--color-slushie-600);
  --color-bg-teal-hover: var(--color-slushie-200);
  --color-bg-teal-light: var(--color-slushie-50);
  --color-bg-teal-light-hover: var(--color-slushie-100);
  --color-bg-yellow: var(--color-lemon-100);
  --color-bg-yellow-active: var(--color-lemon-800);
  --color-bg-yellow-hover: var(--color-lemon-200);
  --color-bg-yellow-light: var(--color-lemon-50);
  --color-bg-yellow-light-hover: var(--color-lemon-100);
  --color-border-action: var(--color-brand-400);
  --color-border-action-hover: var(--color-brand-500);
  --color-border-danger: var(--color-pomegranate-500);
  --color-border-danger-hover: var(--color-pomegranate-200);
  --color-border-inverse: var(--color-alpha-white-300);
  --color-border-inverse-hover: var(--color-alpha-white-400);
  --color-border-primary: var(--color-nightshade-300);
  --color-border-primary-hover: var(--color-nightshade-400);
  --color-border-secondary: var(--color-nightshade-200);
  --color-border-secondary-hover: var(--color-nightshade-300);
  --color-border-selected: var(--color-brand-600);
  --color-border-selected-hover: var(--color-brand-700);
  --color-border-strong: var(--color-alpha-black-600);
  --color-border-strong-hover: var(--color-alpha-black-600);
  --color-border-success: var(--color-matcha-500);
  --color-border-success-hover: var(--color-matcha-200);
  --color-border-tertiary: var(--color-nightshade-100);
  --color-border-tertiary-hover: var(--color-nightshade-200);
  --color-border-warning: var(--color-tangerine-500);
  --color-border-warning-hover: var(--color-tangerine-200);
  --color-border-blue: var(--color-blueberry-300);
  --color-border-blue-hover: var(--color-blueberry-700);
  --color-border-blue-light: var(--color-blueberry-200);
  --color-border-green: var(--color-matcha-300);
  --color-border-green-light: var(--color-matcha-200);
  --color-border-grey: var(--color-nightshade-300);
  --color-border-grey-light: var(--color-nightshade-200);
  --color-border-orange: var(--color-tangerine-300);
  --color-border-orange-light: var(--color-tangerine-200);
  --color-border-pink: var(--color-dragonfruit-300);
  --color-border-pink-light: var(--color-dragonfruit-200);
  --color-border-purple: var(--color-ube-300);
  --color-border-purple-light: var(--color-ube-200);
  --color-border-red: var(--color-pomegranate-300);
  --color-border-red-light: var(--color-pomegranate-200);
  --color-border-teal: var(--color-slushie-300);
  --color-border-teal-light: var(--color-slushie-200);
  --color-border-yellow: var(--color-lemon-300);
  --color-border-yellow-light: var(--color-lemon-200);
  --color-outline-focus-ring: var(--color-brand-200);
  --color-chart-0: var(--color-ube-500);
  --color-chart-1: var(--color-blueberry-500);
  --color-chart-2: var(--color-slushie-500);
  --color-chart-3: var(--color-matcha-500);
  --color-chart-4: var(--color-lemon-500);
  --color-chart-5: var(--color-tangerine-500);
  --color-chart-6: var(--color-dragonfruit-500);
  --color-chart-7: var(--color-pomegranate-500);
  --color-content-on-action: var(--color-white);
  --color-bg-row-selected: color-mix(in oklab, var(--color-bg-selected) 50%, var(--color-bg-primary));
  --color-bg-column-selected: color-mix(in oklab, var(--color-bg-selected) 35%, var(--color-bg-primary));
}

[data-theme="dark"], .dark {
  color-scheme: dark;
  --color-content-action: var(--color-brand-200);
  --color-content-action-active: var(--color-brand-400);
  --color-content-action-hover: var(--color-brand-300);
  --color-content-danger: var(--color-pomegranate-200);
  --color-content-danger-active: var(--color-pomegranate-400);
  --color-content-danger-hover: var(--color-pomegranate-300);
  --color-content-disabled: var(--color-alpha-white-500);
  --color-content-disabled-hover: var(--color-alpha-white-500);
  --color-content-inverse: var(--color-black);
  --color-content-inverse-active: var(--color-nightshade-900);
  --color-content-inverse-hover: var(--color-nightshade-950);
  --color-content-inverse-subtle: var(--color-nightshade-700);
  --color-content-link: var(--color-brand-200);
  --color-content-link-active: var(--color-brand-400);
  --color-content-link-hover: var(--color-brand-300);
  --color-content-placeholder: var(--color-nightshade-500);
  --color-content-primary: var(--color-white);
  --color-content-primary-active: var(--color-nightshade-100);
  --color-content-primary-hover: var(--color-nightshade-50);
  --color-content-secondary: var(--color-nightshade-100);
  --color-content-secondary-active: var(--color-nightshade-300);
  --color-content-secondary-hover: var(--color-nightshade-200);
  --color-content-selected: var(--color-brand-200);
  --color-content-success: var(--color-matcha-200);
  --color-content-success-active: var(--color-matcha-400);
  --color-content-success-hover: var(--color-matcha-300);
  --color-content-tertiary: var(--color-nightshade-200);
  --color-content-tertiary-active: var(--color-nightshade-400);
  --color-content-tertiary-hover: var(--color-nightshade-300);
  --color-content-warning: var(--color-tangerine-200);
  --color-content-warning-active: var(--color-tangerine-400);
  --color-content-warning-hover: var(--color-tangerine-300);
  --color-icon-subtle: var(--color-nightshade-400);
  --color-icon-success: var(--color-matcha-400);
  --color-icon-warning: var(--color-tangerine-400);
  --color-icon-danger: var(--color-pomegranate-400);
  --color-icon-action: var(--color-brand-400);
  --color-text-blue: var(--color-blueberry-200);
  --color-text-dark-pink: var(--color-dragonfruit-800);
  --color-text-green: var(--color-matcha-200);
  --color-text-orange: var(--color-tangerine-200);
  --color-text-pink: var(--color-dragonfruit-200);
  --color-text-purple: var(--color-ube-200);
  --color-text-red: var(--color-pomegranate-200);
  --color-text-teal: var(--color-slushie-200);
  --color-text-yellow: var(--color-lemon-200);
  --color-bg-action-active: var(--color-brand-500);
  --color-bg-action-inverse: var(--color-brand-400);
  --color-bg-action-inverse-active: var(--color-brand-600);
  --color-bg-action-inverse-disabled: var(--color-brand-900);
  --color-bg-action-inverse-hover: var(--color-brand-500);
  --color-bg-danger: var(--color-pomegranate-950);
  --color-bg-danger-active: var(--color-pomegranate-800);
  --color-bg-danger-hover: var(--color-pomegranate-900);
  --color-bg-danger-inverse: var(--color-pomegranate-400);
  --color-bg-danger-inverse-active: var(--color-pomegranate-200);
  --color-bg-danger-inverse-hover: var(--color-pomegranate-300);
  --color-bg-disabled-selected: var(--color-alpha-white-50);
  --color-bg-emphasis: var(--color-alpha-white-50);
  --color-bg-emphasis-active: var(--color-alpha-white-200);
  --color-bg-emphasis-hover: var(--color-alpha-white-100);
  --color-bg-inverse: var(--color-nightshade-50);
  --color-bg-inverse-active: var(--color-nightshade-200);
  --color-bg-inverse-hover: var(--color-nightshade-100);
  --color-bg-overlay: var(--color-nightshade-950);
  --color-bg-primary: var(--color-nightshade-950);
  --color-bg-primary-active: var(--color-nightshade-800);
  --color-bg-primary-hover: var(--color-nightshade-900);
  --color-bg-raised: var(--color-nightshade-900);
  --color-bg-raised-hover: var(--color-nightshade-800);
  --color-bg-scrim: var(--color-alpha-black-800);
  --color-bg-secondary: var(--color-nightshade-900);
  --color-bg-secondary-active: var(--color-nightshade-600);
  --color-bg-secondary-hover: var(--color-nightshade-700);
  --color-bg-selected: var(--color-brand-900);
  --color-bg-selected-hover: var(--color-brand-900);
  --color-bg-success: var(--color-matcha-950);
  --color-bg-success-active: var(--color-matcha-800);
  --color-bg-success-hover: var(--color-matcha-900);
  --color-bg-success-inverse: var(--color-matcha-400);
  --color-bg-success-inverse-active: var(--color-matcha-200);
  --color-bg-success-inverse-hover: var(--color-matcha-300);
  --color-bg-sunken: var(--color-nightshade-900);
  --color-bg-tertiary: var(--color-nightshade-800);
  --color-bg-tertiary-active: var(--color-nightshade-600);
  --color-bg-tertiary-hover: var(--color-nightshade-700);
  --color-bg-warning: var(--color-tangerine-950);
  --color-bg-warning-active: var(--color-tangerine-800);
  --color-bg-warning-hover: var(--color-tangerine-900);
  --color-bg-warning-inverse: var(--color-tangerine-400);
  --color-bg-warning-inverse-active: var(--color-tangerine-200);
  --color-bg-warning-inverse-hover: var(--color-tangerine-300);
  --color-bg-blue: var(--color-blueberry-950);
  --color-bg-blue-active: var(--color-blueberry-400);
  --color-bg-blue-hover: var(--color-blueberry-900);
  --color-bg-blue-light: var(--color-blueberry-800);
  --color-bg-blue-light-hover: var(--color-blueberry-700);
  --color-bg-green: var(--color-matcha-950);
  --color-bg-green-active: var(--color-matcha-400);
  --color-bg-green-hover: var(--color-matcha-900);
  --color-bg-green-light: var(--color-matcha-800);
  --color-bg-green-light-hover: var(--color-matcha-700);
  --color-bg-grey: var(--color-nightshade-950);
  --color-bg-grey-hover: var(--color-nightshade-900);
  --color-bg-grey-light: var(--color-nightshade-800);
  --color-bg-grey-light-hover: var(--color-nightshade-700);
  --color-bg-orange: var(--color-tangerine-950);
  --color-bg-orange-active: var(--color-tangerine-500);
  --color-bg-orange-hover: var(--color-tangerine-900);
  --color-bg-orange-light: var(--color-tangerine-800);
  --color-bg-orange-light-hover: var(--color-tangerine-700);
  --color-bg-pink: var(--color-dragonfruit-950);
  --color-bg-pink-active: var(--color-dragonfruit-400);
  --color-bg-pink-hover: var(--color-dragonfruit-900);
  --color-bg-pink-light: var(--color-dragonfruit-800);
  --color-bg-pink-light-hover: var(--color-dragonfruit-700);
  --color-bg-purple: var(--color-ube-950);
  --color-bg-purple-active: var(--color-ube-400);
  --color-bg-purple-hover: var(--color-ube-900);
  --color-bg-purple-light: var(--color-ube-800);
  --color-bg-purple-light-hover: var(--color-ube-700);
  --color-bg-red: var(--color-pomegranate-950);
  --color-bg-red-active: var(--color-pomegranate-400);
  --color-bg-red-hover: var(--color-pomegranate-900);
  --color-bg-red-light: var(--color-pomegranate-800);
  --color-bg-red-light-hover: var(--color-pomegranate-700);
  --color-bg-teal: var(--color-slushie-950);
  --color-bg-teal-active: var(--color-slushie-400);
  --color-bg-teal-hover: var(--color-slushie-900);
  --color-bg-teal-light: var(--color-slushie-800);
  --color-bg-teal-light-hover: var(--color-slushie-700);
  --color-bg-yellow: var(--color-lemon-950);
  --color-bg-yellow-active: var(--color-lemon-600);
  --color-bg-yellow-hover: var(--color-lemon-900);
  --color-bg-yellow-light: var(--color-lemon-800);
  --color-bg-yellow-light-hover: var(--color-lemon-700);
  --color-border-action: var(--color-brand-300);
  --color-border-action-hover: var(--color-brand-200);
  --color-border-danger: var(--color-pomegranate-200);
  --color-border-danger-hover: var(--color-pomegranate-300);
  --color-border-inverse: var(--color-alpha-black-300);
  --color-border-inverse-hover: var(--color-alpha-black-400);
  --color-border-primary: var(--color-alpha-white-300);
  --color-border-primary-hover: var(--color-alpha-white-400);
  --color-border-secondary: var(--color-alpha-white-200);
  --color-border-secondary-hover: var(--color-alpha-white-300);
  --color-border-selected: var(--color-brand-200);
  --color-border-selected-hover: var(--color-brand-300);
  --color-border-strong: var(--color-alpha-white-700);
  --color-border-strong-hover: var(--color-alpha-white-600);
  --color-border-success: var(--color-matcha-200);
  --color-border-success-hover: var(--color-matcha-300);
  --color-border-tertiary: var(--color-alpha-white-100);
  --color-border-tertiary-hover: var(--color-alpha-white-200);
  --color-border-warning: var(--color-tangerine-200);
  --color-border-warning-hover: var(--color-tangerine-300);
  --color-border-blue: var(--color-blueberry-100);
  --color-border-blue-hover: var(--color-blueberry-200);
  --color-border-blue-light: var(--color-blueberry-600);
  --color-border-green: var(--color-matcha-300);
  --color-border-green-light: var(--color-matcha-600);
  --color-border-grey: var(--color-nightshade-100);
  --color-border-grey-light: var(--color-nightshade-400);
  --color-border-orange: var(--color-tangerine-300);
  --color-border-orange-light: var(--color-tangerine-600);
  --color-border-pink: var(--color-dragonfruit-300);
  --color-border-pink-light: var(--color-dragonfruit-600);
  --color-border-purple: var(--color-ube-300);
  --color-border-purple-light: var(--color-ube-600);
  --color-border-red: var(--color-pomegranate-300);
  --color-border-red-light: var(--color-pomegranate-600);
  --color-border-teal: var(--color-slushie-300);
  --color-border-teal-light: var(--color-slushie-400);
  --color-border-yellow: var(--color-lemon-300);
  --color-border-yellow-light: var(--color-lemon-600);
  --color-outline-focus-ring: var(--color-brand-200);
  --color-chart-0: var(--color-ube-500);
  --color-chart-1: var(--color-blueberry-500);
  --color-chart-2: var(--color-slushie-500);
  --color-chart-3: var(--color-matcha-500);
  --color-chart-4: var(--color-lemon-500);
  --color-chart-5: var(--color-tangerine-500);
  --color-chart-6: var(--color-dragonfruit-500);
  --color-chart-7: var(--color-pomegranate-500);
  --color-bg-row-selected: color-mix(in oklab, var(--color-bg-selected) 50%, var(--color-bg-primary));
  --color-bg-column-selected: color-mix(in oklab, var(--color-bg-selected) 35%, var(--color-bg-primary));
  --color-content-on-action: var(--color-black);
}