:root {
   /* === Brand palette === */
   --body-color: #09090b;
   --body-bg-color: #F4F6FA;
   --primary-color: #6C5DD3;
   --secondary-color: #3f8cff;
   --positive-color: #7fba7a;
   --negative-color: #8b4d6f;
   --alert-color: #a8884a;
   --sage-color: #657d6a;
   --indigo-color: #4f5a7a;
   --earth-color: #BB8B72;
   --info-color: #4d7282;
   --forest-color: #4d6b45;
   --plum-color: #7a5470;
   --lavender-color: #6a5d82;
   --dusk-color: #5a637a;
   --light-color: #f4f4f5;
   --dark-color: #09090b;

   --primary-color-hover: color-mix(in oklab, var(--primary-color) 76%, black);
   --primary-color-active: color-mix(in oklab, var(--primary-color) 55%, black);
   --primary-color-inverted: color-mix(in oklab, var(--primary-color) 12%, white);
   --primary-color-shadow: color-mix(in srgb, var(--primary-color) 15%, transparent);

   --secondary-color-hover: color-mix(in oklab, var(--secondary-color) 76%, black);
   --secondary-color-active: color-mix(in oklab, var(--secondary-color) 55%, black);
   --secondary-color-inverted: color-mix(in oklab, var(--secondary-color) 12%, white);
   --secondary-color-shadow: color-mix(in srgb, var(--secondary-color) 15%, transparent);

   --positive-color-hover: color-mix(in oklab, var(--positive-color) 76%, black);
   --positive-color-active: color-mix(in oklab, var(--positive-color) 55%, black);
   --positive-color-inverted: color-mix(in oklab, var(--positive-color) 12%, white);
   --positive-color-shadow: color-mix(in srgb, var(--positive-color) 15%, transparent);

   --negative-color-hover: color-mix(in oklab, var(--negative-color) 76%, black);
   --negative-color-active: color-mix(in oklab, var(--negative-color) 55%, black);
   --negative-color-inverted: color-mix(in oklab, var(--negative-color) 12%, white);
   --negative-color-shadow: color-mix(in srgb, var(--negative-color) 15%, transparent);

   --alert-color-hover: color-mix(in oklab, var(--alert-color) 76%, black);
   --alert-color-active: color-mix(in oklab, var(--alert-color) 55%, black);
   --alert-color-inverted: color-mix(in oklab, var(--alert-color) 12%, white);
   --alert-color-shadow: color-mix(in srgb, var(--alert-color) 15%, transparent);

   --sage-color-hover: color-mix(in oklab, var(--sage-color) 76%, black);
   --sage-color-active: color-mix(in oklab, var(--sage-color) 55%, black);
   --sage-color-inverted: color-mix(in oklab, var(--sage-color) 12%, white);
   --sage-color-shadow: color-mix(in srgb, var(--sage-color) 15%, transparent);

   --indigo-color-hover: color-mix(in oklab, var(--indigo-color) 76%, black);
   --indigo-color-active: color-mix(in oklab, var(--indigo-color) 55%, black);
   --indigo-color-inverted: color-mix(in oklab, var(--indigo-color) 12%, white);
   --indigo-color-shadow: color-mix(in srgb, var(--indigo-color) 15%, transparent);

   --earth-color-hover: color-mix(in oklab, var(--earth-color) 76%, black);
   --earth-color-active: color-mix(in oklab, var(--earth-color) 55%, black);
   --earth-color-inverted: color-mix(in oklab, var(--earth-color) 12%, white);
   --earth-color-shadow: color-mix(in srgb, var(--earth-color) 15%, transparent);

   --info-color-hover: color-mix(in oklab, var(--info-color) 76%, black);
   --info-color-active: color-mix(in oklab, var(--info-color) 55%, black);
   --info-color-inverted: color-mix(in oklab, var(--info-color) 12%, white);
   --info-color-shadow: color-mix(in srgb, var(--info-color) 15%, transparent);

   --forest-color-hover: color-mix(in oklab, var(--forest-color) 76%, black);
   --forest-color-active: color-mix(in oklab, var(--forest-color) 55%, black);
   --forest-color-inverted: color-mix(in oklab, var(--forest-color) 12%, white);
   --forest-color-shadow: color-mix(in srgb, var(--forest-color) 15%, transparent);

   --plum-color-hover: color-mix(in oklab, var(--plum-color) 76%, black);
   --plum-color-active: color-mix(in oklab, var(--plum-color) 55%, black);
   --plum-color-inverted: color-mix(in oklab, var(--plum-color) 12%, white);
   --plum-color-shadow: color-mix(in srgb, var(--plum-color) 15%, transparent);

   --lavender-color-hover: color-mix(in oklab, var(--lavender-color) 76%, black);
   --lavender-color-active: color-mix(in oklab, var(--lavender-color) 55%, black);
   --lavender-color-inverted: color-mix(in oklab, var(--lavender-color) 12%, white);
   --lavender-color-shadow: color-mix(in srgb, var(--lavender-color) 15%, transparent);

   --dusk-color-hover: color-mix(in oklab, var(--dusk-color) 76%, black);
   --dusk-color-active: color-mix(in oklab, var(--dusk-color) 55%, black);
   --dusk-color-inverted: color-mix(in oklab, var(--dusk-color) 12%, white);
   --dusk-color-shadow: color-mix(in srgb, var(--dusk-color) 15%, transparent);

   --light-color-hover: color-mix(in oklab, var(--light-color) 88%, black);
   --light-color-active: color-mix(in oklab, var(--light-color) 76%, black);
   --light-color-inverted: #ffffff;
   --light-color-shadow: color-mix(in srgb, var(--light-color) 15%, transparent);

   --dark-color-hover: color-mix(in oklab, var(--dark-color) 88%, white);
   --dark-color-active: color-mix(in oklab, var(--dark-color) 76%, white);
   --dark-color-inverted: #2a2a2a;
   --dark-color-shadow: color-mix(in srgb, var(--dark-color) 15%, transparent);

   --black-color: #000;
   --white-color: #fff;
   --shadow-color: rgba(45, 45, 45, 0.18);

   --grey-color: #aaafb4;
   --grey-color-100: #f1f2f3;
   --grey-color-200: #e2e4e6;
   --grey-color-300: #c6cbd0;
   --grey-color-400: #aaafb4;
   --grey-color-500: #8e959c;
   --grey-color-600: #717981;
   --grey-color-700: #565d64;

   /* === Semantic tokens === */
   --wf-text: #4E4E55;
   --wf-text-muted: #6E6E77;
   --wf-surface: #fff;
   --wf-surface-subtle: #f7f7f7;
   --wf-surface-elevated: #f0f0f0;
   --wf-surface-2: #EDEEF2;
   --wf-border: #DDE2EC;
   --wf-primary: var(--primary-color);
   --wf-success: #0d9158;
   --wf-warning: #a15b00;
   --wf-danger: #be2f3a;
   --wf-info: var(--info-color);
   --wf-negative: var(--negative-color);
   --wf-on-primary: #fff;
   --wf-on-success: #fff;
   --wf-on-warning: #fff;
   --wf-on-danger: #fff;

   /* === Elevation + overlay === */
   --wf-shadow-softer: 0 1px 2px rgba(15, 32, 69, .06), 0 1px 5px rgba(15, 32, 69, .05);
   --wf-shadow-soft: 0 1px 3px rgba(15, 32, 69, .06), 0 4px 16px rgba(15, 32, 69, .05);
   --wf-shadow-raised: 0 4px 12px rgba(15, 32, 69, .1), 0 10px 32px rgba(15, 32, 69, .08);
   --wf-shadow-popover: 0 2px 8px rgba(15, 32, 69, .08), 0 8px 24px rgba(15, 32, 69, .12);
   --wf-shadow-modal: 0 2px 8px rgba(15, 32, 69, .06), 0 12px 40px rgba(15, 32, 69, .16);
   --wf-overlay: rgba(15, 32, 69, .48);
   --wf-overlay-strong: rgba(0, 0, 0, .45);
   --wf-on-overlay: #fff;

   --card-shadow-bg: rgba(227, 230, 236, .9);
   --card-shadow-blur: 4.5rem;

   --select-arrow-down: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath fill='%233f4143' d='M538.7 238.3c-9.8-14.7-30.2-18.8-44.9-9L320 344.9 146.3 229.3c-7.3-4.9-15.9-5.6-24-4-8 1.6-16.1 5.6-21 13-9.8 14.7-5.7 35.1 9 44.8L228.8 362l73.1 49.1c5.4 3.3 11.6 4.9 17.9 4.9s12.6-1.6 17.9-4.9l73.2-49.1 118.5-78.9c15-9.7 19.1-30.2 9.3-44.8z'/%3e%3c/svg%3e");
   --select-arrow-up: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath fill='%233f4143' d='M538.7 401.7c-9.8 14.7-30.2 18.8-44.9 9l-173.8-115.6-173.7 115.6c-7.3 4.9-15.9 5.6-24 4-8-1.6-16.1-5.6-21-13-9.8-14.7-5.7-35.1 9-44.8l118.5-78.9 73.1-49.1c5.4-3.3 11.6-4.9 17.9-4.9s12.6 1.6 17.9 4.9l73.2 49.1 118.5 78.9c15 9.7 19.1 30.2 9.3 44.8zz'/%3E%3C/svg%3E");

   /* === Compatibility aliases === */
   --wf-border-color: var(--wf-border);
   --wf-card-bg: var(--wf-surface);
   --wf-grey-color: var(--grey-color);
   --wf-gradient-from: #6C5DD3;
   --wf-gradient-to: #436dad;

   /* Generic inverted button tuning */
   --wf-btn-inverted-bg: #fff;
   --wf-btn-inverted-border: transparent;
   --wf-btn-inverted-shadow: 0 2px 8px rgba(0, 0, 0, .1);
   --wf-btn-inverted-hover-brightness: .97;
}

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

html[data-theme="dark"] {
   color-scheme: dark;
   --body-color: #C9CDD5;
   --body-bg-color: #18181A;
   --wf-surface: #18181A;
   --wf-surface-subtle: #141416;
   --wf-surface-elevated: #232227;
   --wf-surface-2: #2A292E;
   --wf-border: #2F2E33;
   --wf-border-bright: #444A53;
   --wf-text: #F1F4F8;
   --wf-text-muted: #898793;

   /* Per-color surfaces tuned for dark mode */
   --primary-color: color-mix(in srgb, #8A7DE0 66%, var(--wf-surface-subtle) 34%);
   --secondary-color: color-mix(in srgb, #436dad 66%, var(--wf-surface-subtle) 34%);
   --positive-color: color-mix(in srgb, #4a7d6a 66%, var(--wf-surface-subtle) 34%);
   --negative-color: color-mix(in srgb, #8b4d6f 66%, var(--wf-surface-subtle) 34%);
   --alert-color: color-mix(in srgb, #a8884a 66%, var(--wf-surface-subtle) 34%);
   --sage-color: color-mix(in srgb, #657d6a 66%, var(--wf-surface-subtle) 34%);
   --indigo-color: color-mix(in srgb, #4f5a7a 66%, var(--wf-surface-subtle) 34%);
   --earth-color: color-mix(in srgb, #bb8b72 66%, var(--wf-surface-subtle) 34%);
   --info-color: color-mix(in srgb, #4d7282 66%, var(--wf-surface-subtle) 34%);
   --forest-color: color-mix(in srgb, #4d6b45 66%, var(--wf-surface-subtle) 34%);
   --plum-color: color-mix(in srgb, #7a5470 66%, var(--wf-surface-subtle) 34%);
   --lavender-color: color-mix(in srgb, #6a5d82 66%, var(--wf-surface-subtle) 34%);
   --dusk-color: color-mix(in srgb, #5a637a 66%, var(--wf-surface-subtle) 34%);
   --shadow-color: rgba(0, 0, 0, .25);

   --dark-color:  var(--wf-surface-subtle);
   --light-color: #09090b;

   --grey-color:     #524f5c;
   --grey-color-100: #1e1d22;
   --grey-color-200: #27252d;
   --grey-color-300: #37353e;
   --grey-color-400: #524f5c;
   --grey-color-500: #6e6b7c;
   --grey-color-600: #908ea0;
   --grey-color-700: #b5b2c8;

   --wf-primary: var(--primary-color);
   --wf-success: var(--positive-color);
   --wf-warning: var(--alert-color);
   --wf-danger: var(--negative-color);
   --wf-info: var(--info-color);
   --wf-negative: var(--negative-color);
   --wf-on-primary: #1e1847;
   --wf-on-success: #192b25;
   --wf-on-warning: #382d19;
   --wf-on-danger: #2f1a26;


   /* Per-color inverted surfaces tuned for dark mode */

   --primary-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--primary-color) 20%);
   --secondary-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--secondary-color) 20%);
   --positive-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--positive-color) 20%);
   --negative-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--negative-color) 20%);
   --alert-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--alert-color) 20%);
   --sage-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--sage-color) 20%);
   --indigo-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--indigo-color) 20%);
   --earth-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--earth-color) 20%);
   --info-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--info-color) 20%);
   --forest-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--forest-color) 20%);
   --plum-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--plum-color) 20%);
   --lavender-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--lavender-color) 20%);
   --dusk-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--dusk-color) 20%);
   --light-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 88%, white 12%);
   --dark-color-inverted: color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--wf-text) 20%);

   --wf-shadow-softer: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 5px rgba(0, 0, 0, .28);
   --wf-shadow-soft: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28);
   --wf-shadow-raised: 0 6px 18px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .38);
   --wf-shadow-popover: 0 4px 14px rgba(0, 0, 0, .42), 0 12px 30px rgba(0, 0, 0, .34);
   --wf-shadow-modal: 0 6px 16px rgba(0, 0, 0, .55), 0 20px 52px rgba(0, 0, 0, .45);
   --wf-overlay: rgba(0, 0, 0, .55);
   --wf-overlay-strong: rgba(0, 0, 0, .72);
   --wf-on-overlay: #ffffff;

   --card-shadow-bg: rgba(0, 0, 0, .3);
   --card-shadow-blur: 1.6rem;

   --select-arrow-down: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath fill='%238B95A6' d='M538.7 238.3c-9.8-14.7-30.2-18.8-44.9-9L320 344.9 146.3 229.3c-7.3-4.9-15.9-5.6-24-4-8 1.6-16.1 5.6-21 13-9.8 14.7-5.7 35.1 9 44.8L228.8 362l73.1 49.1c5.4 3.3 11.6 4.9 17.9 4.9s12.6-1.6 17.9-4.9l73.2-49.1 118.5-78.9c15-9.7 19.1-30.2 9.3-44.8z'/%3e%3c/svg%3e");
   --select-arrow-up: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' %3E%3Cpath fill='%238B95A6' d='M538.7 401.7c-9.8 14.7-30.2 18.8-44.9 9l-173.8-115.6-173.7 115.6c-7.3 4.9-15.9 5.6-24 4-8-1.6-16.1-5.6-21-13-9.8-14.7-5.7-35.1 9-44.8l118.5-78.9 73.1-49.1c5.4-3.3 11.6-4.9 17.9-4.9s12.6 1.6 17.9 4.9l73.2 49.1 118.5 78.9c15 9.7 19.1 30.2 9.3 44.8zz'/%3E%3C/svg%3E");

   /* Compatibility aliases */
   --wf-border-color: var(--wf-border);
   --wf-card-bg: var(--wf-surface);
   --wf-grey-color: var(--grey-color);

   /* Generic inverted button tuning (dark mode) */
   --wf-btn-inverted-bg: color-mix(in srgb, var(--wf-surface-subtle) 88%, white 12%);
   --wf-btn-inverted-border: color-mix(in srgb, var(--wf-border) 85%, transparent);
   --wf-btn-inverted-shadow: 0 4px 12px rgba(0, 0, 0, .35);
   --wf-btn-inverted-hover-brightness: 1.25;
}