:root,
html[data-theme='dark'] {
  --bg: #0a0e17;
  --surface: #101721;
  --surface-light: #141c28;
  --accent: #d4a853;
  --accent-light: #e8c97a;
  --sale-highlight: #ffbf47;
  --sale-highlight-glow: rgba(255, 191, 71, .42);
  --sale-highlight-glow-strong: rgba(255, 191, 71, .5);
  --accent-rgb: 212, 168, 83;
  --accent-contrast: #0a0e17;
  --accent-readable: #e8c97a;
  --accent-dim: var(--accent-08);
  --text: #f1ede4;
  --text-muted: #8b95a8;
  --text-dim: #5a6477;
  --success: #34d399;
  --success-contrast: #08110c;
  --danger: #f87171;
  --info: #60a5fa;
  --warning: #d97706;
  --danger-contrast: #fff5f5;
  --border: rgba(255, 255, 255, .08);
  --card-bg: rgba(255, 255, 255, .02);
  --body-gradient: linear-gradient(180deg, #0a0e17 0%, #0b111b 100%);
  --nav-bg: rgba(10, 14, 23, .94);
  --menu-bg: rgba(16, 23, 33, .98);
  --overlay-veil: rgba(10, 14, 23, .18);
  --surface-panel-94: rgba(16, 23, 33, .94);
  --surface-panel-98: rgba(16, 23, 33, .98);
  --surface-panel-soft: rgba(20, 28, 40, .98);
  --surface-callout: rgba(26, 34, 52, .76);
  --surface-callout-strong: rgba(26, 34, 52, .9);
  --surface-inset: rgba(17, 24, 39, .9);
  --overlay-backdrop-soft: rgba(7, 10, 18, .72);
  --overlay-backdrop: rgba(7, 10, 18, .78);
  --surface-tint-015: rgba(255, 255, 255, .015);
  --surface-tint-02: rgba(255, 255, 255, .02);
  --surface-tint-025: rgba(255, 255, 255, .025);
  --surface-tint-03: rgba(255, 255, 255, .03);
  --surface-tint-04: rgba(255, 255, 255, .04);
  --surface-tint-05: rgba(255, 255, 255, .05);
  --surface-tint-06: rgba(255, 255, 255, .06);
  --surface-tint-08: rgba(255, 255, 255, .08);
  --surface-tint-10: rgba(255, 255, 255, .1);
  --surface-tint-12: rgba(255, 255, 255, .12);
  --selection-bg: var(--accent-30);
  --selection-text: var(--text);
  --scrollbar-thumb: var(--text-dim);
  --toggle-thumb-bg: #f8fafc;
  --toggle-thumb-shadow: 0 4px 12px rgba(15, 23, 42, .24);
  --field-option-bg: #f4f5f8;
  --field-option-text: #111318;
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, .22);
  --shadow-soft: 0 14px 32px rgba(0, 0, 0, .2);
  --shadow-toast: 0 18px 40px rgba(15, 23, 42, .35);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, .45);
}

html[data-theme='dusk'] {
  --bg: #171d29;
  --surface: #1e2636;
  --surface-light: #263042;
  --accent: #7c89a8;
  --accent-light: #a9b4d0;
  --sale-highlight: #ffbf47;
  --sale-highlight-glow: rgba(255, 191, 71, .4);
  --sale-highlight-glow-strong: rgba(255, 191, 71, .48);
  --accent-rgb: 124, 137, 168;
  --accent-contrast: #101621;
  --accent-readable: #c0c9e1;
  --accent-dim: var(--accent-08);
  --text: #f3f0ea;
  --text-muted: #a7afbf;
  --text-dim: #6d7588;
  --success: #34d399;
  --success-contrast: #0f1714;
  --danger: #f87171;
  --info: #60a5fa;
  --warning: #d97706;
  --danger-contrast: #fff5f5;
  --border: rgba(255, 255, 255, .08);
  --card-bg: rgba(255, 255, 255, .03);
  --body-gradient: linear-gradient(180deg, #171d29 0%, #241f2a 100%);
  --nav-bg: rgba(23, 29, 41, .94);
  --menu-bg: rgba(30, 38, 54, .98);
  --overlay-veil: rgba(23, 29, 41, .2);
  --surface-panel-94: rgba(30, 38, 54, .94);
  --surface-panel-98: rgba(30, 38, 54, .98);
  --surface-panel-soft: rgba(38, 48, 66, .98);
  --surface-callout: rgba(40, 50, 70, .76);
  --surface-callout-strong: rgba(40, 50, 70, .9);
  --surface-inset: rgba(24, 31, 45, .92);
  --overlay-backdrop-soft: rgba(9, 12, 19, .72);
  --overlay-backdrop: rgba(9, 12, 19, .8);
  --surface-tint-015: rgba(255, 255, 255, .015);
  --surface-tint-02: rgba(255, 255, 255, .025);
  --surface-tint-025: rgba(255, 255, 255, .03);
  --surface-tint-03: rgba(255, 255, 255, .035);
  --surface-tint-04: rgba(255, 255, 255, .045);
  --surface-tint-05: rgba(255, 255, 255, .055);
  --surface-tint-06: rgba(255, 255, 255, .065);
  --surface-tint-08: rgba(255, 255, 255, .085);
  --surface-tint-10: rgba(255, 255, 255, .11);
  --surface-tint-12: rgba(255, 255, 255, .135);
  --selection-bg: var(--accent-35);
  --selection-text: #f5f7fb;
  --scrollbar-thumb: var(--text-dim);
  --toggle-thumb-bg: #f5f7fb;
  --toggle-thumb-shadow: 0 4px 12px rgba(9, 12, 19, .32);
  --field-option-bg: #eff2f7;
  --field-option-text: #18202e;
  --shadow-elevated: 0 12px 28px rgba(0, 0, 0, .26);
  --shadow-soft: 0 14px 32px rgba(0, 0, 0, .24);
  --shadow-toast: 0 18px 40px rgba(9, 12, 19, .4);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, .48);
}

html[data-theme='day'] {
  --bg: #f3efe7;
  --surface: #ffffff;
  --surface-light: #f4f8fc;
  --accent: #236872;
  --accent-light: #2a737d;
  --sale-highlight: #c2410c;
  --sale-highlight-glow: rgba(194, 65, 12, .16);
  --sale-highlight-glow-strong: rgba(194, 65, 12, .24);
  --accent-rgb: 35, 104, 114;
  --accent-contrast: #f7fbfd;
  --accent-readable: #236872;
  --accent-dim: var(--accent-08);
  --text: #1f2a37;
  --text-muted: #526173;
  --text-dim: #596b7d;
  --success: #1f7a52;
  --success-contrast: #f6fff9;
  --danger: #a93c3c;
  --info: #2f669f;
  --warning: #8a4b00;
  --danger-contrast: #fff7f7;
  --border: rgba(31, 42, 55, .12);
  --card-bg: rgba(255, 255, 255, .84);
  --body-gradient: linear-gradient(180deg, #f3efe7 0%, #e5ecf5 100%);
  --nav-bg: rgba(243, 239, 231, .9);
  --menu-bg: rgba(255, 255, 255, .98);
  --overlay-veil: rgba(31, 42, 55, .1);
  --surface-panel-94: rgba(255, 255, 255, .88);
  --surface-panel-98: rgba(255, 255, 255, .97);
  --surface-panel-soft: rgba(244, 248, 252, .98);
  --surface-callout: rgba(255, 255, 255, .76);
  --surface-callout-strong: rgba(247, 250, 252, .92);
  --surface-inset: rgba(237, 242, 247, .94);
  --overlay-backdrop-soft: rgba(31, 42, 55, .18);
  --overlay-backdrop: rgba(31, 42, 55, .24);
  --surface-tint-015: rgba(31, 42, 55, .03);
  --surface-tint-02: rgba(31, 42, 55, .04);
  --surface-tint-025: rgba(31, 42, 55, .05);
  --surface-tint-03: rgba(31, 42, 55, .06);
  --surface-tint-04: rgba(31, 42, 55, .08);
  --surface-tint-05: rgba(31, 42, 55, .1);
  --surface-tint-06: rgba(31, 42, 55, .12);
  --surface-tint-08: rgba(31, 42, 55, .16);
  --surface-tint-10: rgba(31, 42, 55, .2);
  --surface-tint-12: rgba(31, 42, 55, .24);
  --selection-bg: var(--accent-32);
  --selection-text: #f7fbfd;
  --scrollbar-thumb: #8f9dac;
  --toggle-thumb-bg: #ffffff;
  --toggle-thumb-shadow: 0 4px 12px rgba(31, 42, 55, .18);
  --field-option-bg: #f8fafc;
  --field-option-text: #1f2a37;
  --shadow-elevated: 0 12px 28px rgba(31, 42, 55, .12);
  --shadow-soft: 0 14px 32px rgba(31, 42, 55, .1);
  --shadow-toast: 0 18px 40px rgba(31, 42, 55, .16);
  --shadow-modal: 0 28px 80px rgba(31, 42, 55, .18);
}

html[data-theme='dawn'] {
  --bg: #f7ecde;
  --surface: #fff7ef;
  --surface-light: #fbebdd;
  --accent: #964225;
  --accent-light: #a64c2d;
  --sale-highlight: #ab3f1c;
  --sale-highlight-glow: rgba(171, 63, 28, .16);
  --sale-highlight-glow-strong: rgba(171, 63, 28, .22);
  --accent-rgb: 150, 66, 37;
  --accent-contrast: #fff7ef;
  --accent-readable: #964225;
  --accent-dim: var(--accent-08);
  --text: #342922;
  --text-muted: #6f6157;
  --text-dim: #6f6157;
  --success: #1f7660;
  --success-contrast: #f6fff9;
  --danger: #a93c3c;
  --info: #2f669f;
  --warning: #8a4b00;
  --danger-contrast: #fff7f5;
  --border: rgba(76, 56, 44, .14);
  --card-bg: rgba(255, 247, 239, .84);
  --body-gradient: linear-gradient(180deg, #f7ecde 0%, #f3ddd0 100%);
  --nav-bg: rgba(247, 236, 222, .9);
  --menu-bg: rgba(255, 247, 239, .98);
  --overlay-veil: rgba(76, 56, 44, .09);
  --surface-panel-94: rgba(255, 247, 239, .9);
  --surface-panel-98: rgba(255, 247, 239, .98);
  --surface-panel-soft: rgba(251, 239, 226, .98);
  --surface-callout: rgba(255, 247, 239, .76);
  --surface-callout-strong: rgba(251, 239, 226, .92);
  --surface-inset: rgba(244, 228, 213, .94);
  --overlay-backdrop-soft: rgba(76, 56, 44, .16);
  --overlay-backdrop: rgba(76, 56, 44, .24);
  --surface-tint-015: rgba(52, 41, 34, .03);
  --surface-tint-02: rgba(52, 41, 34, .04);
  --surface-tint-025: rgba(52, 41, 34, .05);
  --surface-tint-03: rgba(52, 41, 34, .06);
  --surface-tint-04: rgba(52, 41, 34, .08);
  --surface-tint-05: rgba(52, 41, 34, .1);
  --surface-tint-06: rgba(52, 41, 34, .12);
  --surface-tint-08: rgba(52, 41, 34, .16);
  --surface-tint-10: rgba(52, 41, 34, .2);
  --surface-tint-12: rgba(52, 41, 34, .22);
  --selection-bg: var(--accent-32);
  --selection-text: #fff7ef;
  --scrollbar-thumb: #ad9281;
  --toggle-thumb-bg: #fffaf5;
  --toggle-thumb-shadow: 0 4px 12px rgba(94, 72, 59, .16);
  --field-option-bg: #fff6ed;
  --field-option-text: #342922;
  --shadow-elevated: 0 12px 28px rgba(76, 56, 44, .12);
  --shadow-soft: 0 14px 32px rgba(76, 56, 44, .1);
  --shadow-toast: 0 18px 40px rgba(76, 56, 44, .16);
  --shadow-modal: 0 28px 80px rgba(76, 56, 44, .18);
}

html[data-theme='day'],
html[data-theme='dawn'] {
  --theme-swatch-dawn: #964225;
  --theme-swatch-day: #236872;
  --theme-swatch-dusk: #56627d;
  --theme-swatch-dark: #85621d;
}

:root {
  --app-nav-height: 72px;
}