:root {
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace;

  --bg-page: #F7F4F6;
  --bg-current: lch(90.295% 0.364 19.724);
  --bg-surface: #FCFBFB;
  --bg-hover: lch(93.695% 0.364 19.724);
  --bg-subtle: lch(95.195% 0.364 19.724);
  --bg-control: lch(100% 0 19.724);
  --bg-control-hover: lch(96.638% 0.364 19.724);
  --bg-control-selected: lch(94.238% 0.364 19.724);
  --border: #E4DEE2;
  --border-strong: #CCC2C9;
  --border-toggle: lch(52.795% 0 19.724);
  --border-toggle-hover: lch(47.295% 0 19.724);
  --border-control: #E4DEE2;
  --border-control-hover: lch(0% 0 0 / 0.149);
  --text: #1C1119;
  --text-muted: #5E515A;
  --text-subtle: lch(39.478% 1.182 19.724);
  --text-disabled: lch(65.139% 1.182 19.724);
  --bg-raised: #FFFFFF;
  --bg-accent: #883A79;
  --bg-accent-hover: lch(31.244% 42.723 333.456);
  --text-accent: #883A79;
  --text-on-accent: #FFFFFF;
  --bg-accent-partner: #883A79;
  --bg-accent-strong: #883A79;
  --text-on-accent-strong: lch(100% 5 333.456);
  --bg-brand: #883A79;
  --text-on-brand: #FFFFFF;
  --bg-accent-soft: lch(37.244% 44.723 333.456 / 0.08);
  --border-accent-soft: lch(37.244% 44.723 333.456 / 0.28);
  --border-focus: #883A79;
  --text-success: lch(39.9% 80 141.95);
  --text-warning: lch(41% 50 74);
  --text-danger: lch(41% 66 20);
  --text-info: lch(34.9% 80 267);
  --bg-primary: lch(9.87% 0 19.724);
  --text-on-primary: #FCFBFB;
  --bg-backdrop: lch(0% 0 0 / 0.25);
  --bg-grid: lch(0% 0 0 / 0.045);
  --bg-glow: lch(37.244% 44.723 333.456 / 0.1);
  --shadow-small: lch(0% 0 0 / 0.02) 0 3px 6px -2px, lch(0% 0 0 / 0.04) 0 1px 1px 0;
  --shadow-medium: lch(0% 0 0 / 0.02) 0 6px 18px 0, lch(0% 0 0 / 0.04) 0 3px 9px 0, lch(0% 0 0 / 0.04) 0 1px 1px 0;
  --shadow-large: lch(0% 0 0 / 0.08) 0 9px 48px 0, lch(0% 0 0 / 0.1) 0 6px 24px 0, lch(0% 0 0 / 0.04) 0 1px 1px 0;
  --shadow-highlight: inset 0 1px 0 lch(100% 0 0 / 0.6);
  --bg-code: lch(95.195% 0.364 19.724);
  --text-code: #24272a;
  --text-code-keyword: #b3398c;
  --text-code-string: #1f7a4d;
  --text-code-number: #b35309;
  --text-code-comment: #868b94;
  --text-code-function: #2958c7;
  --text-code-type: #7c3aed;
  color-scheme: light;
  --bg-success-strong: lch(39.9% 80 141.95);
  --bg-warning-strong: lch(41% 50 74);
  --bg-danger-strong: lch(41% 66 20);
  --border-success-strong: lch(39.9% 80 141.95);
  --border-warning-strong: lch(41% 50 74);
  --border-danger-strong: lch(41% 66 20);
  --border-info-strong: lch(34.9% 80 267);
  --bg-surface-translucent: lch(98.695% 0.364 19.724 / 0.94);
  --bg-page-translucent: lch(96.466% 1.426 335.423 / 0.8);
  --bg-toggle: lch(52.795% 0 19.724);
  --bg-toggle-hover: lch(47.295% 0 19.724);
  --bg-scrollbar: #CCC2C9;
  --bg-knob: #FFFFFF;
  --border-accent: #883A79;
  --text-faded: lch(6.496% 7.507 334.55 / 0.55);
  --bg-primary-hover: #353535;
  --bg-brand-hover: #78346b;
  --bg-success: lch(39.9% 80 141.95 / 0.1);
  --border-success: lch(39.9% 80 141.95 / 0.35);
  --bg-warning: lch(41% 50 74 / 0.1);
  --border-warning: lch(41% 50 74 / 0.35);
  --bg-danger: lch(41% 66 20 / 0.1);
  --border-danger: lch(41% 66 20 / 0.35);
  --bg-info: lch(34.9% 80 267 / 0.1);
  --border-info: lch(34.9% 80 267 / 0.35);
}

:root :is(.dialog, .card > *) {
  --bg-surface: lch(100% 0 19.724);
  --bg-hover: lch(95% 0 19.724);
  --bg-subtle: lch(96.5% 0 19.724);
  --bg-control: lch(100% 0 19.724);
  --bg-control-hover: lch(97.943% 0 19.724);
  --bg-control-selected: lch(95.543% 0 19.724);
  --border: lch(97.3% 0 19.724);
  --border-strong: lch(90.55% 0 19.724);
  --border-toggle: lch(54.1% 0 19.724);
  --border-toggle-hover: lch(48.6% 0 19.724);
  --border-control: lch(0% 0 0 / 0.103);
  --border-control-hover: lch(0% 0 0 / 0.147);
  --text: lch(10% 0 19.724);
  --text-muted: lch(20% 1 19.724);
  --text-subtle: lch(40% 1 19.724);
  --text-disabled: lch(66% 1 19.724);
  --bg-surface-translucent: lch(100% 0 19.724 / 0.94);
  --bg-toggle: lch(54.1% 0 19.724);
  --bg-toggle-hover: lch(48.6% 0 19.724);
  --bg-scrollbar: lch(90.55% 0 19.724);
  --text-faded: lch(10% 0 19.724 / 0.55);
}

:root :is(.kit-menu, .palette, .toast, .tooltip, .popover) {
  --bg-surface: lch(100% 0 19.724);
  --bg-hover: lch(95% 0 19.724);
  --bg-subtle: lch(96.5% 0 19.724);
  --bg-control: lch(100% 0 19.724);
  --bg-control-hover: lch(97.943% 0 19.724);
  --bg-control-selected: lch(95.543% 0 19.724);
  --border: lch(97.3% 0 19.724);
  --border-strong: lch(90.55% 0 19.724);
  --border-toggle: lch(54.1% 0 19.724);
  --border-toggle-hover: lch(48.6% 0 19.724);
  --border-control: lch(0% 0 0 / 0.103);
  --border-control-hover: lch(0% 0 0 / 0.147);
  --text: lch(10% 0 19.724);
  --text-muted: lch(20% 1 19.724);
  --text-subtle: lch(40% 1 19.724);
  --text-disabled: lch(66% 1 19.724);
  --bg-surface-translucent: lch(100% 0 19.724 / 0.94);
  --bg-toggle: lch(54.1% 0 19.724);
  --bg-toggle-hover: lch(48.6% 0 19.724);
  --bg-scrollbar: lch(90.55% 0 19.724);
  --text-faded: lch(10% 0 19.724 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0D080C;
    --bg-current: lch(13.978% 4.133 330.349);
    --bg-surface: #161115;
    --bg-hover: lch(13.753% 3.683 330.349);
    --bg-subtle: lch(9.478% 3.683 330.349);
    --bg-control: lch(10.282% 3.522 330.349);
    --bg-control-hover: lch(14.911% 3.908 330.349);
    --bg-control-selected: lch(16.839% 3.812 330.349);
    --border: #2B2429;
    --border-strong: #40363D;
    --border-toggle: lch(48.853% 4.313 330.349);
    --border-toggle-hover: lch(57.413% 4.313 330.349);
    --border-control: lch(100% 0 0 / 0.091);
    --border-control-hover: lch(100% 0 0 / 0.114);
    --text: #F1EDF0;
    --text-muted: #ABA0A8;
    --text-subtle: lch(61.857% 2.616 330.349);
    --text-disabled: lch(37.063% 2.616 330.349);
    --bg-raised: #1E181C;
    --bg-accent: #DE8FCE;
    --bg-accent-hover: lch(73.745% 44.259 332.35);
    --text-accent: #DE8FCE;
    --text-on-accent: #0D080C;
    --bg-accent-partner: #DE8FCE;
    --bg-accent-strong: #DE8FCE;
    --text-on-accent-strong: lch(9.87% 0 19.724);
    --bg-brand: #DE8FCE;
    --text-on-brand: #0D080C;
    --bg-accent-soft: lch(69.245% 42.459 332.35 / 0.1);
    --border-accent-soft: lch(69.245% 42.459 332.35 / 0.28);
    --border-focus: #DE8FCE;
    --text-success: lch(68.5% 64.37 141.95);
    --text-warning: lch(80% 52 80);
    --text-danger: lch(74% 52 18);
    --text-info: lch(69.2% 70 267);
    --bg-primary: lch(100% 0 330.349);
    --text-on-primary: #161115;
    --bg-backdrop: lch(0% 0 0 / 0.4);
    --bg-grid: lch(100% 0 0 / 0.035);
    --bg-glow: lch(69.245% 42.459 332.35 / 0.08);
    --shadow-small: lch(0% 0 0 / 0.3) 0 0.5px 1px 1px;
    --shadow-medium: lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
    --shadow-large: lch(0% 0 0 / 0.1) 0 4px 40px 0, lch(0% 0 0 / 0.125) 0 3px 20px 0, lch(0% 0 0 / 0.125) 0 3px 12px 0, lch(0% 0 0 / 0.125) 0 2px 8px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
    --shadow-highlight: inset 0 1px 0 lch(100% 0 0 / 0.04);
    --bg-code: lch(9.478% 3.683 330.349);
    --text-code: #d8dbe0;
    --text-code-keyword: #ff7ab2;
    --text-code-string: #7ee2a8;
    --text-code-number: #ffb86b;
    --text-code-comment: #6b7079;
    --text-code-function: #82aaff;
    --text-code-type: #c3a6ff;
    color-scheme: dark;
    --bg-success-strong: lch(68.5% 64.37 141.95);
    --bg-warning-strong: lch(80% 52 80);
    --bg-danger-strong: lch(74% 52 18);
    --border-success-strong: lch(68.5% 64.37 141.95);
    --border-warning-strong: lch(80% 52 80);
    --border-danger-strong: lch(74% 52 18);
    --border-info-strong: lch(69.2% 70 267);
    --bg-surface-translucent: lch(5.653% 3.233 330.349 / 0.94);
    --bg-page-translucent: lch(2.583% 2.133 330.401 / 0.8);
    --bg-toggle: lch(48.853% 4.313 330.349);
    --bg-toggle-hover: lch(57.413% 4.313 330.349);
    --bg-scrollbar: #40363D;
    --bg-knob: #0D080C;
    --border-accent: #DE8FCE;
    --text-faded: lch(94.126% 2.022 331.805 / 0.55);
    --bg-primary-hover: #e2e1e2;
    --bg-brand-hover: #e19dd3;
    --bg-success: lch(68.5% 64.37 141.95 / 0.1);
    --border-success: lch(68.5% 64.37 141.95 / 0.35);
    --bg-warning: lch(80% 52 80 / 0.1);
    --border-warning: lch(80% 52 80 / 0.35);
    --bg-danger: lch(74% 52 18 / 0.1);
    --border-danger: lch(74% 52 18 / 0.35);
    --bg-info: lch(69.2% 70 267 / 0.1);
    --border-info: lch(69.2% 70 267 / 0.35);
  }

  :root:not([data-theme="light"]) :is(.dialog, .card > *) {
    --bg-surface: lch(9.365% 3.683 330.349);
    --bg-hover: lch(17.465% 4.133 330.349);
    --bg-subtle: lch(13.19% 4.133 330.349);
    --bg-control: lch(13.994% 3.972 330.349);
    --bg-control-hover: lch(18.623% 4.358 330.349);
    --bg-control-selected: lch(20.551% 4.262 330.349);
    --border: lch(13.685% 4.763 330.349);
    --border-strong: lch(18.005% 4.763 330.349);
    --border-toggle: lch(52.565% 4.763 330.349);
    --border-toggle-hover: lch(61.125% 4.763 330.349);
    --border-control: lch(100% 0 0 / 0.095);
    --border-control-hover: lch(100% 0 0 / 0.119);
    --text: lch(100% 0 330.349);
    --text-muted: lch(90.839% 2.841 330.349);
    --text-subtle: lch(63.358% 2.841 330.349);
    --text-disabled: lch(39.54% 2.841 330.349);
    --bg-surface-translucent: lch(9.365% 3.683 330.349 / 0.94);
    --bg-toggle: lch(52.565% 4.763 330.349);
    --bg-toggle-hover: lch(61.125% 4.763 330.349);
    --bg-scrollbar: lch(18.005% 4.763 330.349);
    --text-faded: lch(100% 0 330.349 / 0.55);
  }

  :root:not([data-theme="light"]) :is(.kit-menu, .palette, .toast, .tooltip, .popover) {
    --bg-surface: lch(12.853% 3.683 330.349);
    --bg-hover: lch(20.953% 4.133 330.349);
    --bg-subtle: lch(16.678% 4.133 330.349);
    --bg-control: lch(17.482% 3.972 330.349);
    --bg-control-hover: lch(22.111% 4.358 330.349);
    --bg-control-selected: lch(24.039% 4.262 330.349);
    --border: lch(17.173% 4.763 330.349);
    --border-strong: lch(21.493% 4.763 330.349);
    --border-toggle: lch(56.053% 4.763 330.349);
    --border-toggle-hover: lch(64.613% 4.763 330.349);
    --border-control: lch(100% 0 0 / 0.099);
    --border-control-hover: lch(100% 0 0 / 0.124);
    --text: lch(100% 0 330.349);
    --text-muted: lch(91.192% 2.841 330.349);
    --text-subtle: lch(64.767% 2.841 330.349);
    --text-disabled: lch(41.866% 2.841 330.349);
    --bg-surface-translucent: lch(12.853% 3.683 330.349 / 0.94);
    --bg-toggle: lch(56.053% 4.763 330.349);
    --bg-toggle-hover: lch(64.613% 4.763 330.349);
    --bg-scrollbar: lch(21.493% 4.763 330.349);
    --text-faded: lch(100% 0 330.349 / 0.55);
  }
}

:root[data-theme="dark"] {
  --bg-page: #0D080C;
  --bg-current: lch(13.978% 4.133 330.349);
  --bg-surface: #161115;
  --bg-hover: lch(13.753% 3.683 330.349);
  --bg-subtle: lch(9.478% 3.683 330.349);
  --bg-control: lch(10.282% 3.522 330.349);
  --bg-control-hover: lch(14.911% 3.908 330.349);
  --bg-control-selected: lch(16.839% 3.812 330.349);
  --border: #2B2429;
  --border-strong: #40363D;
  --border-toggle: lch(48.853% 4.313 330.349);
  --border-toggle-hover: lch(57.413% 4.313 330.349);
  --border-control: lch(100% 0 0 / 0.091);
  --border-control-hover: lch(100% 0 0 / 0.114);
  --text: #F1EDF0;
  --text-muted: #ABA0A8;
  --text-subtle: lch(61.857% 2.616 330.349);
  --text-disabled: lch(37.063% 2.616 330.349);
  --bg-raised: #1E181C;
  --bg-accent: #DE8FCE;
  --bg-accent-hover: lch(73.745% 44.259 332.35);
  --text-accent: #DE8FCE;
  --text-on-accent: #0D080C;
  --bg-accent-partner: #DE8FCE;
  --bg-accent-strong: #DE8FCE;
  --text-on-accent-strong: lch(9.87% 0 19.724);
  --bg-brand: #DE8FCE;
  --text-on-brand: #0D080C;
  --bg-accent-soft: lch(69.245% 42.459 332.35 / 0.1);
  --border-accent-soft: lch(69.245% 42.459 332.35 / 0.28);
  --border-focus: #DE8FCE;
  --text-success: lch(68.5% 64.37 141.95);
  --text-warning: lch(80% 52 80);
  --text-danger: lch(74% 52 18);
  --text-info: lch(69.2% 70 267);
  --bg-primary: lch(100% 0 330.349);
  --text-on-primary: #161115;
  --bg-backdrop: lch(0% 0 0 / 0.4);
  --bg-grid: lch(100% 0 0 / 0.035);
  --bg-glow: lch(69.245% 42.459 332.35 / 0.08);
  --shadow-small: lch(0% 0 0 / 0.3) 0 0.5px 1px 1px;
  --shadow-medium: lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
  --shadow-large: lch(0% 0 0 / 0.1) 0 4px 40px 0, lch(0% 0 0 / 0.125) 0 3px 20px 0, lch(0% 0 0 / 0.125) 0 3px 12px 0, lch(0% 0 0 / 0.125) 0 2px 8px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
  --shadow-highlight: inset 0 1px 0 lch(100% 0 0 / 0.04);
  --bg-code: lch(9.478% 3.683 330.349);
  --text-code: #d8dbe0;
  --text-code-keyword: #ff7ab2;
  --text-code-string: #7ee2a8;
  --text-code-number: #ffb86b;
  --text-code-comment: #6b7079;
  --text-code-function: #82aaff;
  --text-code-type: #c3a6ff;
  color-scheme: dark;
  --bg-success-strong: lch(68.5% 64.37 141.95);
  --bg-warning-strong: lch(80% 52 80);
  --bg-danger-strong: lch(74% 52 18);
  --border-success-strong: lch(68.5% 64.37 141.95);
  --border-warning-strong: lch(80% 52 80);
  --border-danger-strong: lch(74% 52 18);
  --border-info-strong: lch(69.2% 70 267);
  --bg-surface-translucent: lch(5.653% 3.233 330.349 / 0.94);
  --bg-page-translucent: lch(2.583% 2.133 330.401 / 0.8);
  --bg-toggle: lch(48.853% 4.313 330.349);
  --bg-toggle-hover: lch(57.413% 4.313 330.349);
  --bg-scrollbar: #40363D;
  --bg-knob: #0D080C;
  --border-accent: #DE8FCE;
  --text-faded: lch(94.126% 2.022 331.805 / 0.55);
  --bg-primary-hover: #e2e1e2;
  --bg-brand-hover: #e19dd3;
  --bg-success: lch(68.5% 64.37 141.95 / 0.1);
  --border-success: lch(68.5% 64.37 141.95 / 0.35);
  --bg-warning: lch(80% 52 80 / 0.1);
  --border-warning: lch(80% 52 80 / 0.35);
  --bg-danger: lch(74% 52 18 / 0.1);
  --border-danger: lch(74% 52 18 / 0.35);
  --bg-info: lch(69.2% 70 267 / 0.1);
  --border-info: lch(69.2% 70 267 / 0.35);
}

:root[data-theme="dark"] :is(.dialog, .card > *) {
  --bg-surface: lch(9.365% 3.683 330.349);
  --bg-hover: lch(17.465% 4.133 330.349);
  --bg-subtle: lch(13.19% 4.133 330.349);
  --bg-control: lch(13.994% 3.972 330.349);
  --bg-control-hover: lch(18.623% 4.358 330.349);
  --bg-control-selected: lch(20.551% 4.262 330.349);
  --border: lch(13.685% 4.763 330.349);
  --border-strong: lch(18.005% 4.763 330.349);
  --border-toggle: lch(52.565% 4.763 330.349);
  --border-toggle-hover: lch(61.125% 4.763 330.349);
  --border-control: lch(100% 0 0 / 0.095);
  --border-control-hover: lch(100% 0 0 / 0.119);
  --text: lch(100% 0 330.349);
  --text-muted: lch(90.839% 2.841 330.349);
  --text-subtle: lch(63.358% 2.841 330.349);
  --text-disabled: lch(39.54% 2.841 330.349);
  --bg-surface-translucent: lch(9.365% 3.683 330.349 / 0.94);
  --bg-toggle: lch(52.565% 4.763 330.349);
  --bg-toggle-hover: lch(61.125% 4.763 330.349);
  --bg-scrollbar: lch(18.005% 4.763 330.349);
  --text-faded: lch(100% 0 330.349 / 0.55);
}

:root[data-theme="dark"] :is(.kit-menu, .palette, .toast, .tooltip, .popover) {
  --bg-surface: lch(12.853% 3.683 330.349);
  --bg-hover: lch(20.953% 4.133 330.349);
  --bg-subtle: lch(16.678% 4.133 330.349);
  --bg-control: lch(17.482% 3.972 330.349);
  --bg-control-hover: lch(22.111% 4.358 330.349);
  --bg-control-selected: lch(24.039% 4.262 330.349);
  --border: lch(17.173% 4.763 330.349);
  --border-strong: lch(21.493% 4.763 330.349);
  --border-toggle: lch(56.053% 4.763 330.349);
  --border-toggle-hover: lch(64.613% 4.763 330.349);
  --border-control: lch(100% 0 0 / 0.099);
  --border-control-hover: lch(100% 0 0 / 0.124);
  --text: lch(100% 0 330.349);
  --text-muted: lch(91.192% 2.841 330.349);
  --text-subtle: lch(64.767% 2.841 330.349);
  --text-disabled: lch(41.866% 2.841 330.349);
  --bg-surface-translucent: lch(12.853% 3.683 330.349 / 0.94);
  --bg-toggle: lch(56.053% 4.763 330.349);
  --bg-toggle-hover: lch(64.613% 4.763 330.349);
  --bg-scrollbar: lch(21.493% 4.763 330.349);
  --text-faded: lch(100% 0 330.349 / 0.55);
}