:root {
  --bg-start: #f8f9fc;
  --bg-end: #edf0f8;
  --card: #ffffff;
  --text: #26293a;
  --muted: #63687b;
  --primary: #2f3a78;
  --primary-dark: #232b5c;
  --border: #d8dbe9;
  --chip: #eceef7;
  --chip-text: #373d57;
  --input-bg: #fcfdff;
  --tag-bg: #eef1fb;
  --tag-border: #bdc6e8;
  --tag-text: #2f3a78;
  --shape-a: rgba(47, 58, 120, 0.12);
  --shape-b: rgba(237, 129, 154, 0.16);
  --shape-c: rgba(80, 119, 208, 0.14);
  --topbar-bg-start: rgba(248, 249, 253, 0.9);
  --topbar-bg-end: rgba(248, 249, 253, 0.66);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(246, 248, 255, 0.96);
  --focus: rgba(47, 58, 120, 0.12);
  --shadow: 0 14px 34px rgba(39, 44, 79, 0.08);
  --hero-shadow: 0 20px 50px rgba(39, 44, 79, 0.1);
  --card-hover-shadow: 0 24px 42px rgba(35, 43, 92, 0.14);
  --glow: 0 10px 24px rgba(47, 58, 120, 0.2);
  --on-primary: #ffffff;
  --primary-gradient-end: #5d72d1;
  --card-grad-angle: 156deg;
  --card-grad-start: color-mix(in srgb, var(--card) 94%, #ffffff);
  --card-grad-end: color-mix(in srgb, var(--card) 84%, var(--chip));
  --card-accent-start: var(--primary);
  --card-accent-end: color-mix(in srgb, var(--primary) 45%, #ffffff);
  --icon-grad-start: color-mix(in srgb, var(--tag-bg) 82%, #ffffff);
  --icon-grad-end: var(--tag-bg);
  --card-shine-color: color-mix(in srgb, var(--primary) 17%, transparent);
}

body[data-theme="midnight"] {
  --bg-start: #0c142b;
  --bg-end: #121a35;
  --card: #111c3a;
  --text: #e8eeff;
  --muted: #9cacd5;
  --primary: #8ba2ff;
  --primary-dark: #6f89ef;
  --border: #2b3967;
  --chip: #172447;
  --chip-text: #d7e1ff;
  --input-bg: #0f1a36;
  --tag-bg: #19284f;
  --tag-border: #3a4f8a;
  --tag-text: #bfd0ff;
  --shape-a: rgba(95, 124, 255, 0.18);
  --shape-b: rgba(61, 163, 214, 0.16);
  --shape-c: rgba(131, 103, 219, 0.2);
  --topbar-bg-start: rgba(12, 20, 43, 0.86);
  --topbar-bg-end: rgba(12, 20, 43, 0.65);
  --hero-bg-start: rgba(16, 29, 63, 0.95);
  --hero-bg-end: rgba(21, 34, 71, 0.95);
  --focus: rgba(139, 162, 255, 0.2);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  --hero-shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
  --card-hover-shadow: 0 24px 42px rgba(0, 0, 0, 0.5);
  --primary-gradient-end: #6f89ef;
  --card-grad-angle: 162deg;
  --card-grad-start: #13264f;
  --card-grad-end: #182d5d;
  --icon-grad-start: #2b3f73;
  --icon-grad-end: #1d2d57;
  --card-shine-color: rgba(155, 178, 255, 0.2);
}

body[data-theme="emerald"] {
  --bg-start: #f2fbf8;
  --bg-end: #e4f5ef;
  --card: #ffffff;
  --text: #17352f;
  --muted: #4b6a62;
  --primary: #0f6f66;
  --primary-dark: #0c5a53;
  --border: #cce4dc;
  --chip: #e4f3ee;
  --chip-text: #26544c;
  --input-bg: #fafffd;
  --tag-bg: #e3f4ef;
  --tag-border: #9ecfc2;
  --tag-text: #0f6f66;
  --shape-a: rgba(15, 111, 102, 0.14);
  --shape-b: rgba(89, 183, 153, 0.16);
  --shape-c: rgba(50, 136, 124, 0.13);
  --topbar-bg-start: rgba(242, 251, 248, 0.9);
  --topbar-bg-end: rgba(242, 251, 248, 0.66);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(239, 250, 246, 0.96);
  --focus: rgba(15, 111, 102, 0.13);
  --shadow: 0 14px 34px rgba(10, 68, 60, 0.11);
  --hero-shadow: 0 20px 48px rgba(10, 68, 60, 0.13);
  --card-hover-shadow: 0 24px 44px rgba(10, 68, 60, 0.16);
  --primary-gradient-end: #149886;
  --card-grad-angle: 154deg;
  --card-shine-color: rgba(15, 111, 102, 0.17);
}

body[data-theme="sunset"] {
  --bg-start: #fff8f2;
  --bg-end: #ffefe4;
  --card: #ffffff;
  --text: #3b2b26;
  --muted: #7a6159;
  --primary: #b85032;
  --primary-dark: #983d23;
  --border: #efd5c8;
  --chip: #fbe7dd;
  --chip-text: #6b3f31;
  --input-bg: #fffdfa;
  --tag-bg: #ffeade;
  --tag-border: #f4b8a0;
  --tag-text: #a0492f;
  --shape-a: rgba(184, 80, 50, 0.15);
  --shape-b: rgba(240, 135, 96, 0.2);
  --shape-c: rgba(255, 186, 130, 0.2);
  --topbar-bg-start: rgba(255, 248, 242, 0.9);
  --topbar-bg-end: rgba(255, 248, 242, 0.68);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(255, 245, 236, 0.96);
  --focus: rgba(184, 80, 50, 0.16);
  --shadow: 0 14px 34px rgba(112, 50, 32, 0.11);
  --hero-shadow: 0 20px 46px rgba(112, 50, 32, 0.12);
  --card-hover-shadow: 0 24px 44px rgba(112, 50, 32, 0.17);
  --primary-gradient-end: #d56a45;
  --card-grad-angle: 150deg;
  --card-shine-color: rgba(210, 115, 82, 0.2);
}

body[data-theme="ocean"] {
  --bg-start: #eef8ff;
  --bg-end: #dff1ff;
  --card: #ffffff;
  --text: #1d3141;
  --muted: #4c6577;
  --primary: #0f6fa6;
  --primary-dark: #0c5b89;
  --border: #c5deee;
  --chip: #e3f1fa;
  --chip-text: #264d65;
  --input-bg: #f9fdff;
  --tag-bg: #e2f1fb;
  --tag-border: #95c4e3;
  --tag-text: #0f6fa6;
  --shape-a: rgba(15, 111, 166, 0.14);
  --shape-b: rgba(46, 164, 195, 0.16);
  --shape-c: rgba(84, 134, 211, 0.14);
  --topbar-bg-start: rgba(238, 248, 255, 0.9);
  --topbar-bg-end: rgba(238, 248, 255, 0.66);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(238, 249, 255, 0.96);
  --focus: rgba(15, 111, 166, 0.15);
  --shadow: 0 14px 34px rgba(15, 78, 122, 0.11);
  --hero-shadow: 0 20px 48px rgba(15, 78, 122, 0.12);
  --card-hover-shadow: 0 24px 44px rgba(15, 78, 122, 0.16);
  --primary-gradient-end: #1a8fc4;
  --card-grad-angle: 160deg;
  --card-shine-color: rgba(56, 171, 215, 0.2);
}

body[data-theme="graphite"] {
  --bg-start: #12171d;
  --bg-end: #171d24;
  --card: #1b222c;
  --text: #edf2fa;
  --muted: #acb8cb;
  --primary: #57b8ff;
  --primary-dark: #3a95d6;
  --border: #2e3948;
  --chip: #222d3b;
  --chip-text: #d4e6ff;
  --input-bg: #141c25;
  --tag-bg: #223043;
  --tag-border: #3f5d83;
  --tag-text: #9fd4ff;
  --shape-a: rgba(87, 184, 255, 0.16);
  --shape-b: rgba(63, 131, 173, 0.2);
  --shape-c: rgba(101, 138, 175, 0.18);
  --topbar-bg-start: rgba(18, 23, 29, 0.88);
  --topbar-bg-end: rgba(18, 23, 29, 0.66);
  --hero-bg-start: rgba(27, 34, 44, 0.95);
  --hero-bg-end: rgba(24, 32, 43, 0.95);
  --focus: rgba(87, 184, 255, 0.2);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  --hero-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
  --card-hover-shadow: 0 24px 44px rgba(0, 0, 0, 0.5);
  --primary-gradient-end: #3fa8e8;
  --card-grad-angle: 162deg;
  --card-grad-start: #212a36;
  --card-grad-end: #1b2430;
  --icon-grad-start: #2a3a4e;
  --icon-grad-end: #233246;
  --card-shine-color: rgba(110, 196, 255, 0.2);
}

body[data-theme="rose"] {
  --bg-start: #fff7f7;
  --bg-end: #ffeef0;
  --card: #ffffff;
  --text: #3f2a30;
  --muted: #7a5c65;
  --primary: #bb4f6a;
  --primary-dark: #9c3f56;
  --border: #edced6;
  --chip: #f8e6ea;
  --chip-text: #6a3a47;
  --input-bg: #fffafb;
  --tag-bg: #fbe8ed;
  --tag-border: #e5adbc;
  --tag-text: #a3415c;
  --shape-a: rgba(187, 79, 106, 0.14);
  --shape-b: rgba(218, 121, 147, 0.16);
  --shape-c: rgba(244, 176, 193, 0.18);
  --topbar-bg-start: rgba(255, 247, 247, 0.9);
  --topbar-bg-end: rgba(255, 247, 247, 0.66);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(255, 241, 244, 0.96);
  --focus: rgba(187, 79, 106, 0.16);
  --shadow: 0 14px 34px rgba(109, 43, 61, 0.11);
  --hero-shadow: 0 20px 48px rgba(109, 43, 61, 0.13);
  --card-hover-shadow: 0 24px 44px rgba(109, 43, 61, 0.17);
  --primary-gradient-end: #d06485;
  --card-grad-angle: 150deg;
  --card-shine-color: rgba(215, 118, 149, 0.2);
}

body[data-theme="amber"] {
  --bg-start: #fffaf0;
  --bg-end: #fff1d9;
  --card: #ffffff;
  --text: #3f321f;
  --muted: #7c6848;
  --primary: #b87a15;
  --primary-dark: #955f0f;
  --border: #ecd9b0;
  --chip: #f8ecd3;
  --chip-text: #6c4f1c;
  --input-bg: #fffdf8;
  --tag-bg: #fbf0d7;
  --tag-border: #e3c47d;
  --tag-text: #9a6311;
  --shape-a: rgba(184, 122, 21, 0.14);
  --shape-b: rgba(228, 171, 71, 0.18);
  --shape-c: rgba(245, 212, 146, 0.2);
  --topbar-bg-start: rgba(255, 250, 240, 0.9);
  --topbar-bg-end: rgba(255, 250, 240, 0.68);
  --hero-bg-start: rgba(255, 255, 255, 0.96);
  --hero-bg-end: rgba(255, 245, 223, 0.96);
  --focus: rgba(184, 122, 21, 0.16);
  --shadow: 0 14px 34px rgba(104, 69, 18, 0.11);
  --hero-shadow: 0 20px 48px rgba(104, 69, 18, 0.12);
  --card-hover-shadow: 0 24px 44px rgba(104, 69, 18, 0.17);
  --primary-gradient-end: #d6982e;
  --card-grad-angle: 148deg;
  --card-shine-color: rgba(235, 177, 81, 0.22);
}