:root {
  color-scheme: light;
  --drawer-w: min(600px, 94vw);
  --header-h: 68px;
  --footer-h: 78px;
  --bg: #f5f0f2;
  --surface: #fff9fb;
  --surface-2: #f1e8ec;
  --surface-3: #eae0e5;
  --border: #dfd0d7;
  --border-strong: #cbbbc2;
  --text: #2d2529;
  --text-muted: #796c72;
  --text-faint: #998991;
  --primary: #b84f6e;
  --primary-hover: #a5415f;
  --on-primary: #fff;
  --link: #ad4e69;
  --link-hover: #913d57;
  --accent: #f3dce4;
  --brand: #b84f6e;
  --brand-ink: #913d57;
  --brand-hover: #a5415f;
  --brand-soft: #f3dce4;
  --danger: #c94f5b;
  --on-danger: #fff;
  --danger-bg: #fbe4e7;
  --success: #3e846c;
  --success-bg: #e1f0ea;
  --warning: #a87926;
  --warning-bg: #f8eed8;
  --info: #4f70b5;
  --info-bg: #e5ecfa;
  --metric-bg: #f2e9ed;
  --header-bg: rgba(255, 249, 251, .9);
  --header-text: #2d2529;
  --shadow: 0 10px 34px rgba(92, 58, 72, .09);
  --shadow-sm: 0 5px 18px rgba(92, 58, 72, .08);
  --shadow-lg: 0 16px 48px rgba(54, 39, 46, .18);
  --scrim: rgba(20, 18, 22, .44);
  --focus-ring: var(--primary);
  --palette-pink: #b84f6e;
  --palette-blue: #4368a1;
  --palette-gold: #a8722e;
  --palette-teal: #2f9e8f;
  --palette-violet: #80639f;
  --palette-mono: #3d3d44;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23796c72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171619;
  --surface: #222125;
  --surface-2: #2b292e;
  --surface-3: #1e1d21;
  --border: #3d3941;
  --border-strong: #514b56;
  --text: #f5f1f4;
  --text-muted: #b4acb2;
  --text-faint: #8a8288;
  --primary: #e0819c;
  --primary-hover: #ea96ad;
  --on-primary: #1b181a;
  --link: #ea96ad;
  --link-hover: #f2b0c1;
  --accent: #392a31;
  --brand: #e0819c;
  --brand-ink: #f2b0c1;
  --brand-hover: #ea96ad;
  --brand-soft: #3b2931;
  --danger: #ee8589;
  --on-danger: #211719;
  --danger-bg: #45272b;
  --success: #72b096;
  --success-bg: #233a31;
  --warning: #d3aa61;
  --warning-bg: #433720;
  --info: #8ea9e6;
  --info-bg: #26334c;
  --metric-bg: #2d292c;
  --header-bg: rgba(29, 28, 32, .92);
  --header-text: #f5f1f4;
  --shadow: 0 7px 22px rgba(0, 0, 0, .1);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .09);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .26);
  --scrim: rgba(0, 0, 0, .62);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23b4acb2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="blue"] {
  --bg: #f2f5f9;
  --surface: #fbfcfe;
  --surface-2: #e8eef6;
  --surface-3: #dce6f1;
  --border: #ced8e5;
  --border-strong: #b8c6d7;
  --text: #222a35;
  --text-muted: #667386;
  --text-faint: #8793a3;
  --primary: #4368a1;
  --primary-hover: #35558a;
  --on-primary: #fff;
  --link: #416aa9;
  --link-hover: #31558e;
  --accent: #e1eaf7;
  --brand: #4368a1;
  --brand-ink: #31558e;
  --brand-hover: #35558a;
  --brand-soft: #e1eaf7;
  --metric-bg: #e9eff7;
  --header-bg: rgba(251, 252, 254, .9);
  --header-text: #222a35;
  --shadow: 0 10px 34px rgba(56, 77, 106, .09);
  --shadow-sm: 0 5px 18px rgba(56, 77, 106, .08);
  --shadow-lg: 0 16px 48px rgba(32, 44, 61, .18);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23667386' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="blue"][data-theme="dark"] {
  --bg: #15191f;
  --surface: #1d232b;
  --surface-2: #252d38;
  --surface-3: #191f27;
  --border: #354150;
  --border-strong: #46556a;
  --text: #edf3fb;
  --text-muted: #a8b5c5;
  --text-faint: #7f8c9e;
  --primary: #82a9df;
  --primary-hover: #9bbbea;
  --on-primary: #101820;
  --link: #91b6e8;
  --link-hover: #b0caf0;
  --accent: #243247;
  --brand: #82a9df;
  --brand-ink: #b0caf0;
  --brand-hover: #9bbbea;
  --brand-soft: #25364c;
  --metric-bg: #262f3b;
  --header-bg: rgba(25, 31, 39, .92);
  --header-text: #edf3fb;
  --shadow: 0 7px 22px rgba(0, 0, 0, .12);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .1);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .28);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23a8b5c5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="gold"] {
  --bg: #faf6ee;
  --surface: #fffdf9;
  --surface-2: #f2ebdc;
  --surface-3: #e8ddc8;
  --border: #e0d2b8;
  --border-strong: #c8b48c;
  --text: #33291c;
  --text-muted: #78694f;
  --text-faint: #988a70;
  --primary: #a8722e;
  --primary-hover: #8f5f23;
  --on-primary: #fff;
  --link: #8f6426;
  --link-hover: #77501e;
  --accent: #f4e8d2;
  --brand: #a8722e;
  --brand-ink: #77501e;
  --brand-hover: #8f5f23;
  --brand-soft: #f5ead6;
  --metric-bg: #f4ecdc;
  --header-bg: rgba(255,253,249,.91);
  --header-text: #33291c;
  --shadow: 0 10px 34px rgba(86,66,36,.08);
  --shadow-sm: 0 5px 18px rgba(86,66,36,.07);
  --shadow-lg: 0 16px 48px rgba(47,37,23,.15);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%2378694f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="gold"][data-theme="dark"] {
  --bg: #1a1610;
  --surface: #242017;
  --surface-2: #2e2820;
  --surface-3: #201c15;
  --border: #463c2a;
  --border-strong: #5e5035;
  --text: #f6f1e4;
  --text-muted: #bdb09a;
  --text-faint: #91866f;
  --primary: #c99a4e;
  --primary-hover: #d9ae66;
  --on-primary: #1c1508;
  --link: #d8ab5e;
  --link-hover: #e9c282;
  --accent: #362b1c;
  --brand: #c99a4e;
  --brand-ink: #e9c282;
  --brand-hover: #d9ae66;
  --brand-soft: #3a2e1d;
  --metric-bg: #30291f;
  --header-bg: rgba(26,22,16,.92);
  --header-text: #f6f1e4;
  --shadow: 0 7px 22px rgba(0,0,0,.12);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.1);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.28);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23bdb09a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="teal"] {
  --bg: #f2f8f7; --surface: #fbfefd; --surface-2: #e6f2ef; --surface-3: #d8ece8;
  --border: #c6e0db; --border-strong: #a9ccc4;
  --text: #22302e; --text-muted: #5f7370; --text-faint: #849692;
  --primary: #2f9e8f; --primary-hover: #27877b; --on-primary: #fff;
  --link: #2b8f82; --link-hover: #20776b;
  --accent: #dff2ef; --brand: #2f9e8f; --brand-ink: #20776b;
  --brand-hover: #27877b; --brand-soft: #e0f3ef; --metric-bg: #e4f2ef;
  --header-bg: rgba(251,254,253,.9); --header-text: #22302e;
  --shadow: 0 10px 34px rgba(38,84,76,.09); --shadow-sm: 0 5px 18px rgba(38,84,76,.08);
  --shadow-lg: 0 16px 48px rgba(22,48,44,.18);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%235f7370' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="teal"][data-theme="dark"] {
  --bg: #141b1a; --surface: #1b2423; --surface-2: #232f2d; --surface-3: #171f1e;
  --border: #33423f; --border-strong: #465a56;
  --text: #edf4f2; --text-muted: #a4b6b2; --text-faint: #7d908c;
  --primary: #4fbfae; --primary-hover: #6ccdbc; --on-primary: #0e1c1a;
  --link: #5cc6b5; --link-hover: #7dd4c5;
  --accent: #1d2f2c; --brand: #4fbfae; --brand-ink: #7dd4c5;
  --brand-hover: #6ccdbc; --brand-soft: #1f312e; --metric-bg: #222f2d;
  --header-bg: rgba(23,31,30,.92); --header-text: #edf4f2;
  --shadow: 0 7px 22px rgba(0,0,0,.12); --shadow-sm: 0 4px 14px rgba(0,0,0,.1);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.28);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23a4b6b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="violet"] {
  --bg: #f6f3f8; --surface: #fcfbfd; --surface-2: #eeebf1; --surface-3: #e4dfe9;
  --border: #d8d2df; --border-strong: #c1b7cb;
  --text: #2b2730; --text-muted: #6d6575; --text-faint: #938b9a;
  --primary: #80639f; --primary-hover: #71558f; --on-primary: #fff;
  --link: #765b95; --link-hover: #664981;
  --accent: #ece7f1; --brand: #80639f; --brand-ink: #664981;
  --brand-hover: #71558f; --brand-soft: #eee9f2; --metric-bg: #e8e3ed;
  --header-bg: rgba(252,251,253,.9); --header-text: #2b2730;
  --shadow: 0 10px 34px rgba(77,66,91,.09); --shadow-sm: 0 5px 18px rgba(77,66,91,.08);
  --shadow-lg: 0 16px 48px rgba(50,35,72,.18);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%236d6380' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="violet"][data-theme="dark"] {
  --bg: #191720; --surface: #211e2a; --surface-2: #2a2634; --surface-3: #1c1924;
  --border: #3a3542; --border-strong: #4e4758;
  --text: #f5f2f7; --text-muted: #b4acbd; --text-faint: #8d8695;
  --primary: #b4a4c6; --primary-hover: #c7bad5; --on-primary: #17141c;
  --link: #c0b1d0; --link-hover: #d2c7de;
  --accent: #2d2935; --brand: #b4a4c6; --brand-ink: #d2c7de;
  --brand-hover: #c7bad5; --brand-soft: #332e3c; --metric-bg: #2c2834;
  --header-bg: rgba(29,27,35,.92); --header-text: #f5f2f7;
  --shadow: 0 7px 22px rgba(0,0,0,.12); --shadow-sm: 0 4px 14px rgba(0,0,0,.1);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.28);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23b4acbd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="mono"] {
  --bg: #f4f4f5; --surface: #fcfcfd; --surface-2: #ececed; --surface-3: #e3e3e5;
  --border: #d7d7da; --border-strong: #bfbfc4;
  --text: #232326; --text-muted: #6f6f76; --text-faint: #9999a0;
  --primary: #3d3d44; --primary-hover: #2c2c32; --on-primary: #fff;
  --link: #46464e; --link-hover: #2b2b31;
  --accent: #e9e9ec; --brand: #3d3d44; --brand-ink: #2b2b31;
  --brand-hover: #2c2c32; --brand-soft: #ebebee; --metric-bg: #eaeaed;
  --header-bg: rgba(252,252,253,.9); --header-text: #232326;
  --shadow: 0 10px 34px rgba(0,0,0,.09); --shadow-sm: 0 5px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.18);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%236f6f76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-palette="mono"][data-theme="dark"] {
  --bg: #0b0b0e; --surface: #121216; --surface-2: #1a1a1f; --surface-3: #0f0f13;
  --border: #2d2d34; --border-strong: #41414a;
  --text: #f4f4f6; --text-muted: #a2a2ab; --text-faint: #787880;
  --primary: #dedee2; --primary-hover: #ececef; --on-primary: #141417;
  --link: #d2d2d8; --link-hover: #ececef;
  --accent: #26262c; --brand: #dedee2; --brand-ink: #ececef;
  --brand-hover: #ececef; --brand-soft: #28282f; --metric-bg: #222228;
  --header-bg: rgba(12,12,15,.92); --header-text: #f4f4f6;
  --shadow: 0 7px 22px rgba(0,0,0,.3); --shadow-sm: 0 4px 14px rgba(0,0,0,.26);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.45);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0%200%2012%208'%3E%3Cpath d='M1%201l5%205%205-5' fill='none' stroke='%23a2a2ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}