@m3ui-vue/m3ui-vue 0.1.0

package/dist/styles/palettes.css

@@ -0,0 +1,1253 @@
+/* ─── Teal ─────────────────────────────────────────────────────────────── */
+[data-palette='teal'] {
+  --color-primary: #006B5F;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #74F8E2;
+  --color-on-primary-container: #00201C;
+  --color-secondary: #4B635D;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #CDE8E0;
+  --color-on-secondary-container: #07201B;
+  --color-tertiary: #426278;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #C7E7FF;
+  --color-on-tertiary-container: #001E30;
+  --color-surface: #F4FBF8;
+  --color-on-surface: #161D1B;
+  --color-surface-variant: #DAE5E0;
+  --color-on-surface-variant: #3F4945;
+  --color-surface-dim: #D5DBD8;
+  --color-surface-bright: #F4FBF8;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #EFF5F2;
+  --color-surface-container: #E9F0ED;
+  --color-surface-container-high: #E3EAE7;
+  --color-surface-container-highest: #DDE4E1;
+  --color-background: #F4FBF8;
+  --color-on-background: #161D1B;
+  --color-outline: #6F7975;
+  --color-outline-variant: #BFC9C4;
+  --color-inverse-surface: #2B3230;
+  --color-inverse-on-surface: #ECF2EF;
+  --color-inverse-primary: #53DBC6;
+}
+[data-palette='teal'].dark {
+  --color-primary: #53DBC6;
+  --color-on-primary: #003731;
+  --color-primary-container: #005048;
+  --color-on-primary-container: #74F8E2;
+  --color-secondary: #B1CCC4;
+  --color-on-secondary: #1D3530;
+  --color-secondary-container: #334B46;
+  --color-on-secondary-container: #CDE8E0;
+  --color-tertiary: #ABC9E4;
+  --color-on-tertiary: #113348;
+  --color-tertiary-container: #2B4A5F;
+  --color-on-tertiary-container: #C7E7FF;
+  --color-surface: #0E1513;
+  --color-on-surface: #DDE4E1;
+  --color-surface-variant: #3F4945;
+  --color-on-surface-variant: #BFC9C4;
+  --color-surface-dim: #0E1513;
+  --color-surface-bright: #343B39;
+  --color-surface-container-lowest: #090F0E;
+  --color-surface-container-low: #161D1B;
+  --color-surface-container: #1A211F;
+  --color-surface-container-high: #252B29;
+  --color-surface-container-highest: #2F3634;
+  --color-background: #0E1513;
+  --color-on-background: #DDE4E1;
+  --color-outline: #899490;
+  --color-outline-variant: #3F4945;
+  --color-inverse-surface: #DDE4E1;
+  --color-inverse-on-surface: #2B3230;
+  --color-inverse-primary: #006B5F;
+}
+
+/* ─── Blue ─────────────────────────────────────────────────────────────── */
+[data-palette='blue'] {
+  --color-primary: #005AC1;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #D8E2FF;
+  --color-on-primary-container: #001A41;
+  --color-secondary: #575E71;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #DBE2F9;
+  --color-on-secondary-container: #141B2C;
+  --color-tertiary: #715573;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FBD7FC;
+  --color-on-tertiary-container: #29132D;
+  --color-surface: #FAF8FF;
+  --color-on-surface: #1A1B20;
+  --color-surface-variant: #E0E2EC;
+  --color-on-surface-variant: #44474F;
+  --color-surface-dim: #DAD9E0;
+  --color-surface-bright: #FAF8FF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F4F3FA;
+  --color-surface-container: #EEECF4;
+  --color-surface-container-high: #E8E7EF;
+  --color-surface-container-highest: #E3E1E9;
+  --color-background: #FAF8FF;
+  --color-on-background: #1A1B20;
+  --color-outline: #74777F;
+  --color-outline-variant: #C4C6D0;
+  --color-inverse-surface: #2F3036;
+  --color-inverse-on-surface: #F1EFF7;
+  --color-inverse-primary: #ADC6FF;
+}
+[data-palette='blue'].dark {
+  --color-primary: #ADC6FF;
+  --color-on-primary: #002E69;
+  --color-primary-container: #004494;
+  --color-on-primary-container: #D8E2FF;
+  --color-secondary: #BFC6DC;
+  --color-on-secondary: #293041;
+  --color-secondary-container: #3F4759;
+  --color-on-secondary-container: #DBE2F9;
+  --color-tertiary: #DEBCDF;
+  --color-on-tertiary: #3F2843;
+  --color-tertiary-container: #573E5A;
+  --color-on-tertiary-container: #FBD7FC;
+  --color-surface: #121318;
+  --color-on-surface: #E3E1E9;
+  --color-surface-variant: #44474F;
+  --color-on-surface-variant: #C4C6D0;
+  --color-surface-dim: #121318;
+  --color-surface-bright: #38393F;
+  --color-surface-container-lowest: #0D0E13;
+  --color-surface-container-low: #1A1B20;
+  --color-surface-container: #1E1F25;
+  --color-surface-container-high: #292A2F;
+  --color-surface-container-highest: #33343A;
+  --color-background: #121318;
+  --color-on-background: #E3E1E9;
+  --color-outline: #8E9099;
+  --color-outline-variant: #44474F;
+  --color-inverse-surface: #E3E1E9;
+  --color-inverse-on-surface: #2F3036;
+  --color-inverse-primary: #005AC1;
+}
+
+/* ─── Green ────────────────────────────────────────────────────────────── */
+[data-palette='green'] {
+  --color-primary: #386A20;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #B8F397;
+  --color-on-primary-container: #062100;
+  --color-secondary: #55624C;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #D8E7CB;
+  --color-on-secondary-container: #131F0D;
+  --color-tertiary: #386568;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #BCEBEE;
+  --color-on-tertiary-container: #002022;
+  --color-surface: #F8FAF0;
+  --color-on-surface: #1A1C18;
+  --color-surface-variant: #DFE4D7;
+  --color-on-surface-variant: #43483E;
+  --color-surface-dim: #D8DAD0;
+  --color-surface-bright: #F8FAF0;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F2F4EA;
+  --color-surface-container: #ECEEE5;
+  --color-surface-container-high: #E6E9DF;
+  --color-surface-container-highest: #E1E3DA;
+  --color-background: #F8FAF0;
+  --color-on-background: #1A1C18;
+  --color-outline: #73796D;
+  --color-outline-variant: #C3C8BB;
+  --color-inverse-surface: #2F312C;
+  --color-inverse-on-surface: #EFF1E7;
+  --color-inverse-primary: #9DD67D;
+}
+[data-palette='green'].dark {
+  --color-primary: #9DD67D;
+  --color-on-primary: #0E3900;
+  --color-primary-container: #205107;
+  --color-on-primary-container: #B8F397;
+  --color-secondary: #BDC9B0;
+  --color-on-secondary: #283421;
+  --color-secondary-container: #3E4B36;
+  --color-on-secondary-container: #D8E7CB;
+  --color-tertiary: #A0CFD2;
+  --color-on-tertiary: #003739;
+  --color-tertiary-container: #1F4D50;
+  --color-on-tertiary-container: #BCEBEE;
+  --color-surface: #121410;
+  --color-on-surface: #E1E3DA;
+  --color-surface-variant: #43483E;
+  --color-on-surface-variant: #C3C8BB;
+  --color-surface-dim: #121410;
+  --color-surface-bright: #383A35;
+  --color-surface-container-lowest: #0C0F0B;
+  --color-surface-container-low: #1A1C18;
+  --color-surface-container: #1E201B;
+  --color-surface-container-high: #282B26;
+  --color-surface-container-highest: #333530;
+  --color-background: #121410;
+  --color-on-background: #E1E3DA;
+  --color-outline: #8D9287;
+  --color-outline-variant: #43483E;
+  --color-inverse-surface: #E1E3DA;
+  --color-inverse-on-surface: #2F312C;
+  --color-inverse-primary: #386A20;
+}
+
+/* ─── Red ──────────────────────────────────────────────────────────────── */
+[data-palette='red'] {
+  --color-primary: #B82000;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFDAD4;
+  --color-on-primary-container: #410000;
+  --color-secondary: #775651;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFDAD4;
+  --color-on-secondary-container: #2C1512;
+  --color-tertiary: #705C2E;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FCDFA6;
+  --color-on-tertiary-container: #261A00;
+  --color-surface: #FFF8F6;
+  --color-on-surface: #231918;
+  --color-surface-variant: #F5DDDA;
+  --color-on-surface-variant: #534341;
+  --color-surface-dim: #E8D6D4;
+  --color-surface-bright: #FFF8F6;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF0EE;
+  --color-surface-container: #FCEAE7;
+  --color-surface-container-high: #F7E4E2;
+  --color-surface-container-highest: #F1DFDC;
+  --color-background: #FFF8F6;
+  --color-on-background: #231918;
+  --color-outline: #857370;
+  --color-outline-variant: #D8C2BE;
+  --color-inverse-surface: #392E2C;
+  --color-inverse-on-surface: #FFEDEA;
+  --color-inverse-primary: #FFB4A8;
+}
+[data-palette='red'].dark {
+  --color-primary: #FFB4A8;
+  --color-on-primary: #690100;
+  --color-primary-container: #930100;
+  --color-on-primary-container: #FFDAD4;
+  --color-secondary: #E7BDB6;
+  --color-on-secondary: #442926;
+  --color-secondary-container: #5D3F3B;
+  --color-on-secondary-container: #FFDAD4;
+  --color-tertiary: #DFC38C;
+  --color-on-tertiary: #3F2E04;
+  --color-tertiary-container: #574419;
+  --color-on-tertiary-container: #FCDFA6;
+  --color-surface: #1A1110;
+  --color-on-surface: #F1DFDC;
+  --color-surface-variant: #534341;
+  --color-on-surface-variant: #D8C2BE;
+  --color-surface-dim: #1A1110;
+  --color-surface-bright: #423735;
+  --color-surface-container-lowest: #140C0B;
+  --color-surface-container-low: #231918;
+  --color-surface-container: #271D1C;
+  --color-surface-container-high: #322826;
+  --color-surface-container-highest: #3D3231;
+  --color-background: #1A1110;
+  --color-on-background: #F1DFDC;
+  --color-outline: #9F8C89;
+  --color-outline-variant: #534341;
+  --color-inverse-surface: #F1DFDC;
+  --color-inverse-on-surface: #392E2C;
+  --color-inverse-primary: #B82000;
+}
+
+/* ─── Orange ───────────────────────────────────────────────────────────── */
+[data-palette='orange'] {
+  --color-primary: #8B5000;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFDCBE;
+  --color-on-primary-container: #2C1600;
+  --color-secondary: #735B42;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFDCBE;
+  --color-on-secondary-container: #291806;
+  --color-tertiary: #5A6237;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DFE7B0;
+  --color-on-tertiary-container: #181E00;
+  --color-surface: #FFF8F4;
+  --color-on-surface: #211A13;
+  --color-surface-variant: #F2DFD0;
+  --color-on-surface-variant: #514439;
+  --color-surface-dim: #E5D7CD;
+  --color-surface-bright: #FFF8F4;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF1E7;
+  --color-surface-container: #FAEBE1;
+  --color-surface-container-high: #F4E5DB;
+  --color-surface-container-highest: #EFE0D6;
+  --color-background: #FFF8F4;
+  --color-on-background: #211A13;
+  --color-outline: #837468;
+  --color-outline-variant: #D5C3B5;
+  --color-inverse-surface: #372F27;
+  --color-inverse-on-surface: #FDEDE2;
+  --color-inverse-primary: #FFB86F;
+}
+[data-palette='orange'].dark {
+  --color-primary: #FFB86F;
+  --color-on-primary: #4A2800;
+  --color-primary-container: #6A3C00;
+  --color-on-primary-container: #FFDCBE;
+  --color-secondary: #E2C0A4;
+  --color-on-secondary: #402D18;
+  --color-secondary-container: #59432C;
+  --color-on-secondary-container: #FFDCBE;
+  --color-tertiary: #C3CB96;
+  --color-on-tertiary: #2D330D;
+  --color-tertiary-container: #434A22;
+  --color-on-tertiary-container: #DFE7B0;
+  --color-surface: #19120B;
+  --color-on-surface: #EFE0D6;
+  --color-surface-variant: #514439;
+  --color-on-surface-variant: #D5C3B5;
+  --color-surface-dim: #19120B;
+  --color-surface-bright: #403830;
+  --color-surface-container-lowest: #130D07;
+  --color-surface-container-low: #211A13;
+  --color-surface-container: #261E17;
+  --color-surface-container-high: #302921;
+  --color-surface-container-highest: #3C342C;
+  --color-background: #19120B;
+  --color-on-background: #EFE0D6;
+  --color-outline: #9D8E82;
+  --color-outline-variant: #514439;
+  --color-inverse-surface: #EFE0D6;
+  --color-inverse-on-surface: #372F27;
+  --color-inverse-primary: #8B5000;
+}
+
+/* ─── Pink ─────────────────────────────────────────────────────────────── */
+[data-palette='pink'] {
+  --color-primary: #9C4057;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFD9DE;
+  --color-on-primary-container: #400017;
+  --color-secondary: #75565D;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFD9DE;
+  --color-on-secondary-container: #2B151B;
+  --color-tertiary: #7A5733;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFDCB8;
+  --color-on-tertiary-container: #2C1600;
+  --color-surface: #FFF8F7;
+  --color-on-surface: #22191B;
+  --color-surface-variant: #F3DDE0;
+  --color-on-surface-variant: #524345;
+  --color-surface-dim: #E6D6D8;
+  --color-surface-bright: #FFF8F7;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF0F1;
+  --color-surface-container: #FCEAEC;
+  --color-surface-container-high: #F6E4E6;
+  --color-surface-container-highest: #F0DFE1;
+  --color-background: #FFF8F7;
+  --color-on-background: #22191B;
+  --color-outline: #847375;
+  --color-outline-variant: #D6C2C4;
+  --color-inverse-surface: #382E30;
+  --color-inverse-on-surface: #FEECED;
+  --color-inverse-primary: #FFB1C0;
+}
+[data-palette='pink'].dark {
+  --color-primary: #FFB1C0;
+  --color-on-primary: #5F112B;
+  --color-primary-container: #7D2940;
+  --color-on-primary-container: #FFD9DE;
+  --color-secondary: #E4BDC3;
+  --color-on-secondary: #43292F;
+  --color-secondary-container: #5C3F46;
+  --color-on-secondary-container: #FFD9DE;
+  --color-tertiary: #ECBF90;
+  --color-on-tertiary: #44290A;
+  --color-tertiary-container: #5E401E;
+  --color-on-tertiary-container: #FFDCB8;
+  --color-surface: #1A1113;
+  --color-on-surface: #F0DFE1;
+  --color-surface-variant: #524345;
+  --color-on-surface-variant: #D6C2C4;
+  --color-surface-dim: #1A1113;
+  --color-surface-bright: #413738;
+  --color-surface-container-lowest: #140C0E;
+  --color-surface-container-low: #22191B;
+  --color-surface-container: #271D1F;
+  --color-surface-container-high: #312829;
+  --color-surface-container-highest: #3D3234;
+  --color-background: #1A1113;
+  --color-on-background: #F0DFE1;
+  --color-outline: #9E8C8E;
+  --color-outline-variant: #524345;
+  --color-inverse-surface: #F0DFE1;
+  --color-inverse-on-surface: #382E30;
+  --color-inverse-primary: #9C4057;
+}
+
+/* ─── Indigo ───────────────────────────────────────────────────────────── */
+[data-palette='indigo'] {
+  --color-primary: #4355B9;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #DEE0FF;
+  --color-on-primary-container: #00105C;
+  --color-secondary: #5B5D72;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #E0E1F9;
+  --color-on-secondary-container: #181A2C;
+  --color-tertiary: #77536D;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFD7F1;
+  --color-on-tertiary-container: #2D1228;
+  --color-surface: #FBF8FF;
+  --color-on-surface: #1B1B21;
+  --color-surface-variant: #E3E1EC;
+  --color-on-surface-variant: #46464F;
+  --color-surface-dim: #DBD9E0;
+  --color-surface-bright: #FBF8FF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F5F2FA;
+  --color-surface-container: #EFECF4;
+  --color-surface-container-high: #E9E7EF;
+  --color-surface-container-highest: #E4E1E9;
+  --color-background: #FBF8FF;
+  --color-on-background: #1B1B21;
+  --color-outline: #767680;
+  --color-outline-variant: #C6C5D0;
+  --color-inverse-surface: #303036;
+  --color-inverse-on-surface: #F2F0F7;
+  --color-inverse-primary: #BAC3FF;
+}
+[data-palette='indigo'].dark {
+  --color-primary: #BAC3FF;
+  --color-on-primary: #0A218A;
+  --color-primary-container: #2C3CA0;
+  --color-on-primary-container: #DEE0FF;
+  --color-secondary: #C4C5DD;
+  --color-on-secondary: #2D2F42;
+  --color-secondary-container: #444559;
+  --color-on-secondary-container: #E0E1F9;
+  --color-tertiary: #E6BAD7;
+  --color-on-tertiary: #44263E;
+  --color-tertiary-container: #5D3C55;
+  --color-on-tertiary-container: #FFD7F1;
+  --color-surface: #131318;
+  --color-on-surface: #E4E1E9;
+  --color-surface-variant: #46464F;
+  --color-on-surface-variant: #C6C5D0;
+  --color-surface-dim: #131318;
+  --color-surface-bright: #39393F;
+  --color-surface-container-lowest: #0E0E13;
+  --color-surface-container-low: #1B1B21;
+  --color-surface-container: #1F1F25;
+  --color-surface-container-high: #2A2A30;
+  --color-surface-container-highest: #35343A;
+  --color-background: #131318;
+  --color-on-background: #E4E1E9;
+  --color-outline: #90909A;
+  --color-outline-variant: #46464F;
+  --color-inverse-surface: #E4E1E9;
+  --color-inverse-on-surface: #303036;
+  --color-inverse-primary: #4355B9;
+}
+
+/* ─── Amber ────────────────────────────────────────────────────────────── */
+[data-palette='amber'] {
+  --color-primary: #785900;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFDF9E;
+  --color-on-primary-container: #261900;
+  --color-secondary: #6B5D3F;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #F4E0BB;
+  --color-on-secondary-container: #241A00;
+  --color-tertiary: #4D6544;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #CFEBC3;
+  --color-on-tertiary-container: #0B2007;
+  --color-surface: #FFF9EF;
+  --color-on-surface: #1E1B13;
+  --color-surface-variant: #ECE1CF;
+  --color-on-surface-variant: #4D4639;
+  --color-surface-dim: #E0D7C8;
+  --color-surface-bright: #FFF9EF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FAF1E2;
+  --color-surface-container: #F4EBDC;
+  --color-surface-container-high: #EEE5D7;
+  --color-surface-container-highest: #E9E0D1;
+  --color-background: #FFF9EF;
+  --color-on-background: #1E1B13;
+  --color-outline: #7F7667;
+  --color-outline-variant: #CFC4B3;
+  --color-inverse-surface: #333027;
+  --color-inverse-on-surface: #F8EFE0;
+  --color-inverse-primary: #EFC148;
+}
+[data-palette='amber'].dark {
+  --color-primary: #EFC148;
+  --color-on-primary: #402D00;
+  --color-primary-container: #5B4300;
+  --color-on-primary-container: #FFDF9E;
+  --color-secondary: #D8C4A0;
+  --color-on-secondary: #3B2F15;
+  --color-secondary-container: #534529;
+  --color-on-secondary-container: #F4E0BB;
+  --color-tertiary: #B3CFA8;
+  --color-on-tertiary: #20371B;
+  --color-tertiary-container: #364E2E;
+  --color-on-tertiary-container: #CFEBC3;
+  --color-surface: #16130B;
+  --color-on-surface: #E9E0D1;
+  --color-surface-variant: #4D4639;
+  --color-on-surface-variant: #CFC4B3;
+  --color-surface-dim: #16130B;
+  --color-surface-bright: #3D3930;
+  --color-surface-container-lowest: #110E07;
+  --color-surface-container-low: #1E1B13;
+  --color-surface-container: #231F17;
+  --color-surface-container-high: #2D2A21;
+  --color-surface-container-highest: #38352C;
+  --color-background: #16130B;
+  --color-on-background: #E9E0D1;
+  --color-outline: #999080;
+  --color-outline-variant: #4D4639;
+  --color-inverse-surface: #E9E0D1;
+  --color-inverse-on-surface: #333027;
+  --color-inverse-primary: #785900;
+}
+
+/* ─── Slate ────────────────────────────────────────────────────────────── */
+[data-palette='slate'] {
+  --color-primary: #4A6269;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #CCE8F0;
+  --color-on-primary-container: #041F25;
+  --color-secondary: #4E6166;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #D1E5EB;
+  --color-on-secondary-container: #0B1D22;
+  --color-tertiary: #585D7E;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DEE0FF;
+  --color-on-tertiary-container: #151937;
+  --color-surface: #F5FAFB;
+  --color-on-surface: #171D1E;
+  --color-surface-variant: #DBE4E7;
+  --color-on-surface-variant: #3F484B;
+  --color-surface-dim: #D5DBDC;
+  --color-surface-bright: #F5FAFB;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #EFF4F5;
+  --color-surface-container: #E9EEF0;
+  --color-surface-container-high: #E3E9EA;
+  --color-surface-container-highest: #DEE3E5;
+  --color-background: #F5FAFB;
+  --color-on-background: #171D1E;
+  --color-outline: #6F797C;
+  --color-outline-variant: #BFC8CB;
+  --color-inverse-surface: #2C3233;
+  --color-inverse-on-surface: #ECF2F3;
+  --color-inverse-primary: #B1CCD4;
+}
+[data-palette='slate'].dark {
+  --color-primary: #B1CCD4;
+  --color-on-primary: #1B343A;
+  --color-primary-container: #324B51;
+  --color-on-primary-container: #CCE8F0;
+  --color-secondary: #B5C9CF;
+  --color-on-secondary: #203338;
+  --color-secondary-container: #374A4E;
+  --color-on-secondary-container: #D1E5EB;
+  --color-tertiary: #C0C3EB;
+  --color-on-tertiary: #2A2E4D;
+  --color-tertiary-container: #404465;
+  --color-on-tertiary-container: #DEE0FF;
+  --color-surface: #0F1415;
+  --color-on-surface: #DEE3E5;
+  --color-surface-variant: #3F484B;
+  --color-on-surface-variant: #BFC8CB;
+  --color-surface-dim: #0F1415;
+  --color-surface-bright: #353A3C;
+  --color-surface-container-lowest: #090F10;
+  --color-surface-container-low: #171D1E;
+  --color-surface-container: #1B2122;
+  --color-surface-container-high: #252B2D;
+  --color-surface-container-highest: #303637;
+  --color-background: #0F1415;
+  --color-on-background: #DEE3E5;
+  --color-outline: #899295;
+  --color-outline-variant: #3F484B;
+  --color-inverse-surface: #DEE3E5;
+  --color-inverse-on-surface: #2C3233;
+  --color-inverse-primary: #4A6269;
+}
+
+/* ─── Cyan ─────────────────────────────────────────────────────────────── */
+[data-palette='cyan'] {
+  --color-primary: #006874;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #9EEFFD;
+  --color-on-primary-container: #001F24;
+  --color-secondary: #4A6267;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #CDE7ED;
+  --color-on-secondary-container: #051F23;
+  --color-tertiary: #525E7D;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DAE2FF;
+  --color-on-tertiary-container: #0E1B36;
+  --color-surface: #F5FAFB;
+  --color-on-surface: #171D1E;
+  --color-surface-variant: #DAE4E6;
+  --color-on-surface-variant: #3F494B;
+  --color-surface-dim: #D5DBDC;
+  --color-surface-bright: #F5FAFB;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #EFF5F6;
+  --color-surface-container: #E9EFF0;
+  --color-surface-container-high: #E3E9EA;
+  --color-surface-container-highest: #DEE3E5;
+  --color-background: #F5FAFB;
+  --color-on-background: #171D1E;
+  --color-outline: #6F797B;
+  --color-outline-variant: #BFC8CB;
+  --color-inverse-surface: #2B3233;
+  --color-inverse-on-surface: #ECF2F3;
+  --color-inverse-primary: #82D3E0;
+}
+[data-palette='cyan'].dark {
+  --color-primary: #82D3E0;
+  --color-on-primary: #00363C;
+  --color-primary-container: #004F58;
+  --color-on-primary-container: #9EEFFD;
+  --color-secondary: #B1CBD1;
+  --color-on-secondary: #1C3438;
+  --color-secondary-container: #334A4F;
+  --color-on-secondary-container: #CDE7ED;
+  --color-tertiary: #BAC6EA;
+  --color-on-tertiary: #24304D;
+  --color-tertiary-container: #3B4764;
+  --color-on-tertiary-container: #DAE2FF;
+  --color-surface: #0F1415;
+  --color-on-surface: #DEE3E5;
+  --color-surface-variant: #3F494B;
+  --color-on-surface-variant: #BFC8CB;
+  --color-surface-dim: #0F1415;
+  --color-surface-bright: #353A3C;
+  --color-surface-container-lowest: #090F10;
+  --color-surface-container-low: #171D1E;
+  --color-surface-container: #1B2122;
+  --color-surface-container-high: #252B2D;
+  --color-surface-container-highest: #303637;
+  --color-background: #0F1415;
+  --color-on-background: #DEE3E5;
+  --color-outline: #899295;
+  --color-outline-variant: #3F494B;
+  --color-inverse-surface: #DEE3E5;
+  --color-inverse-on-surface: #2B3233;
+  --color-inverse-primary: #006874;
+}
+
+/* ─── Lime ─────────────────────────────────────────────────────────────── */
+[data-palette='lime'] {
+  --color-primary: #4C6706;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #CCEF84;
+  --color-on-primary-container: #142000;
+  --color-secondary: #5A6147;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #DEE6C5;
+  --color-on-secondary-container: #171E09;
+  --color-tertiary: #396661;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #BCECE6;
+  --color-on-tertiary-container: #00201D;
+  --color-surface: #FAFAED;
+  --color-on-surface: #1B1C14;
+  --color-surface-variant: #E2E4D4;
+  --color-on-surface-variant: #45483C;
+  --color-surface-dim: #DBDACE;
+  --color-surface-bright: #FAFAED;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F4F4E7;
+  --color-surface-container: #EEEEE1;
+  --color-surface-container-high: #E8E8DC;
+  --color-surface-container-highest: #E2E3D7;
+  --color-background: #FAFAED;
+  --color-on-background: #1B1C14;
+  --color-outline: #75786B;
+  --color-outline-variant: #C6C8B9;
+  --color-inverse-surface: #303128;
+  --color-inverse-on-surface: #F2F1E5;
+  --color-inverse-primary: #B1D36B;
+}
+[data-palette='lime'].dark {
+  --color-primary: #B1D36B;
+  --color-on-primary: #253600;
+  --color-primary-container: #374E00;
+  --color-on-primary-container: #CCEF84;
+  --color-secondary: #C2CAAA;
+  --color-on-secondary: #2C331C;
+  --color-secondary-container: #424A31;
+  --color-on-secondary-container: #DEE6C5;
+  --color-tertiary: #A0D0CA;
+  --color-on-tertiary: #003733;
+  --color-tertiary-container: #1F4E4A;
+  --color-on-tertiary-container: #BCECE6;
+  --color-surface: #12140C;
+  --color-on-surface: #E2E3D7;
+  --color-surface-variant: #45483C;
+  --color-on-surface-variant: #C6C8B9;
+  --color-surface-dim: #12140C;
+  --color-surface-bright: #393A31;
+  --color-surface-container-lowest: #0D0F08;
+  --color-surface-container-low: #1B1C14;
+  --color-surface-container: #1F2018;
+  --color-surface-container-high: #292B22;
+  --color-surface-container-highest: #34352D;
+  --color-background: #12140C;
+  --color-on-background: #E2E3D7;
+  --color-outline: #8F9284;
+  --color-outline-variant: #45483C;
+  --color-inverse-surface: #E2E3D7;
+  --color-inverse-on-surface: #303128;
+  --color-inverse-primary: #4C6706;
+}
+
+/* ─── Deep Orange ──────────────────────────────────────────────────────── */
+[data-palette='deep-orange'] {
+  --color-primary: #96480A;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFDBC8;
+  --color-on-primary-container: #321200;
+  --color-secondary: #765848;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFDBC8;
+  --color-on-secondary-container: #2C160A;
+  --color-tertiary: #636032;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #EAE5A8;
+  --color-on-tertiary-container: #1E1C00;
+  --color-surface: #FFF8F5;
+  --color-on-surface: #211A15;
+  --color-surface-variant: #F4DED3;
+  --color-on-surface-variant: #52443B;
+  --color-surface-dim: #E6D7CF;
+  --color-surface-bright: #FFF8F5;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF1EA;
+  --color-surface-container: #FAEBE3;
+  --color-surface-container-high: #F5E5DD;
+  --color-surface-container-highest: #EFDFD8;
+  --color-background: #FFF8F5;
+  --color-on-background: #211A15;
+  --color-outline: #85746A;
+  --color-outline-variant: #D8C2B7;
+  --color-inverse-surface: #372F29;
+  --color-inverse-on-surface: #FDEEE6;
+  --color-inverse-primary: #FFB688;
+}
+[data-palette='deep-orange'].dark {
+  --color-primary: #FFB688;
+  --color-on-primary: #522300;
+  --color-primary-container: #733500;
+  --color-on-primary-container: #FFDBC8;
+  --color-secondary: #E6BEAB;
+  --color-on-secondary: #432A1D;
+  --color-secondary-container: #5D4032;
+  --color-on-secondary-container: #FFDBC8;
+  --color-tertiary: #CDC98F;
+  --color-on-tertiary: #34320A;
+  --color-tertiary-container: #4B491E;
+  --color-on-tertiary-container: #EAE5A8;
+  --color-surface: #1A120D;
+  --color-on-surface: #EFDFD8;
+  --color-surface-variant: #52443B;
+  --color-on-surface-variant: #D8C2B7;
+  --color-surface-dim: #1A120D;
+  --color-surface-bright: #413832;
+  --color-surface-container-lowest: #140D08;
+  --color-surface-container-low: #211A15;
+  --color-surface-container: #261E19;
+  --color-surface-container-high: #312923;
+  --color-surface-container-highest: #3C332D;
+  --color-background: #1A120D;
+  --color-on-background: #EFDFD8;
+  --color-outline: #A18E83;
+  --color-outline-variant: #52443B;
+  --color-inverse-surface: #EFDFD8;
+  --color-inverse-on-surface: #372F29;
+  --color-inverse-primary: #96480A;
+}
+
+/* ─── Brown ────────────────────────────────────────────────────────────── */
+[data-palette='brown'] {
+  --color-primary: #6E4C32;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FBDCC4;
+  --color-on-primary-container: #281100;
+  --color-secondary: #756056;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFE0D0;
+  --color-on-secondary-container: #2C1A11;
+  --color-tertiary: #636034;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #E9E5AB;
+  --color-on-tertiary-container: #1E1C00;
+  --color-surface: #FFF8F5;
+  --color-on-surface: #211A16;
+  --color-surface-variant: #F2DFD3;
+  --color-on-surface-variant: #51443B;
+  --color-surface-dim: #E5D7CE;
+  --color-surface-bright: #FFF8F5;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF1EB;
+  --color-surface-container: #FBEBE3;
+  --color-surface-container-high: #F5E5DD;
+  --color-surface-container-highest: #EFDFD7;
+  --color-background: #FFF8F5;
+  --color-on-background: #211A16;
+  --color-outline: #847369;
+  --color-outline-variant: #D6C3B8;
+  --color-inverse-surface: #372F2A;
+  --color-inverse-on-surface: #FDEEE5;
+  --color-inverse-primary: #DFC0A6;
+}
+[data-palette='brown'].dark {
+  --color-primary: #DFC0A6;
+  --color-on-primary: #3E2415;
+  --color-primary-container: #56361E;
+  --color-on-primary-container: #FBDCC4;
+  --color-secondary: #E5C0B0;
+  --color-on-secondary: #432C22;
+  --color-secondary-container: #5C4337;
+  --color-on-secondary-container: #FFE0D0;
+  --color-tertiary: #CDC990;
+  --color-on-tertiary: #33310B;
+  --color-tertiary-container: #4A4820;
+  --color-on-tertiary-container: #E9E5AB;
+  --color-surface: #1A120E;
+  --color-on-surface: #EFDFD7;
+  --color-surface-variant: #51443B;
+  --color-on-surface-variant: #D6C3B8;
+  --color-surface-dim: #1A120E;
+  --color-surface-bright: #413833;
+  --color-surface-container-lowest: #140D09;
+  --color-surface-container-low: #211A16;
+  --color-surface-container: #261E19;
+  --color-surface-container-high: #302924;
+  --color-surface-container-highest: #3C332E;
+  --color-background: #1A120E;
+  --color-on-background: #EFDFD7;
+  --color-outline: #9F8D83;
+  --color-outline-variant: #51443B;
+  --color-inverse-surface: #EFDFD7;
+  --color-inverse-on-surface: #372F2A;
+  --color-inverse-primary: #6E4C32;
+}
+
+/* ─── Coral ────────────────────────────────────────────────────────────── */
+[data-palette='coral'] {
+  --color-primary: #A03530;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFDAD6;
+  --color-on-primary-container: #410005;
+  --color-secondary: #775654;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFDAD6;
+  --color-on-secondary-container: #2C1514;
+  --color-tertiary: #725B2E;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFDEA3;
+  --color-on-tertiary-container: #271900;
+  --color-surface: #FFF8F7;
+  --color-on-surface: #221B1A;
+  --color-surface-variant: #F5DDDB;
+  --color-on-surface-variant: #534342;
+  --color-surface-dim: #E8D6D4;
+  --color-surface-bright: #FFF8F7;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF0EF;
+  --color-surface-container: #FCEAE8;
+  --color-surface-container-high: #F6E4E2;
+  --color-surface-container-highest: #F0DEDC;
+  --color-background: #FFF8F7;
+  --color-on-background: #221B1A;
+  --color-outline: #857371;
+  --color-outline-variant: #D8C2C0;
+  --color-inverse-surface: #392E2D;
+  --color-inverse-on-surface: #FFEDEB;
+  --color-inverse-primary: #FFB4AD;
+}
+[data-palette='coral'].dark {
+  --color-primary: #FFB4AD;
+  --color-on-primary: #611118;
+  --color-primary-container: #802120;
+  --color-on-primary-container: #FFDAD6;
+  --color-secondary: #E7BDBA;
+  --color-on-secondary: #442928;
+  --color-secondary-container: #5D3F3D;
+  --color-on-secondary-container: #FFDAD6;
+  --color-tertiary: #E2C28C;
+  --color-on-tertiary: #3F2E06;
+  --color-tertiary-container: #594319;
+  --color-on-tertiary-container: #FFDEA3;
+  --color-surface: #1A1112;
+  --color-on-surface: #F0DEDC;
+  --color-surface-variant: #534342;
+  --color-on-surface-variant: #D8C2C0;
+  --color-surface-dim: #1A1112;
+  --color-surface-bright: #423736;
+  --color-surface-container-lowest: #140C0C;
+  --color-surface-container-low: #221B1A;
+  --color-surface-container: #271E1D;
+  --color-surface-container-high: #322928;
+  --color-surface-container-highest: #3D3332;
+  --color-background: #1A1112;
+  --color-on-background: #F0DEDC;
+  --color-outline: #9F8C8B;
+  --color-outline-variant: #534342;
+  --color-inverse-surface: #F0DEDC;
+  --color-inverse-on-surface: #392E2D;
+  --color-inverse-primary: #A03530;
+}
+
+/* ─── Violet ───────────────────────────────────────────────────────────── */
+[data-palette='violet'] {
+  --color-primary: #7C39A4;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #F2DAFF;
+  --color-on-primary-container: #2E004E;
+  --color-secondary: #665A6E;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #EDE0F6;
+  --color-on-secondary-container: #221529;
+  --color-tertiary: #805158;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFD9DD;
+  --color-on-tertiary-container: #321017;
+  --color-surface: #FFF7FF;
+  --color-on-surface: #1E1A20;
+  --color-surface-variant: #EBE0EB;
+  --color-on-surface-variant: #4C444D;
+  --color-surface-dim: #E0D6DD;
+  --color-surface-bright: #FFF7FF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FAF0F8;
+  --color-surface-container: #F4EAF2;
+  --color-surface-container-high: #EEE4EC;
+  --color-surface-container-highest: #E8DEE7;
+  --color-background: #FFF7FF;
+  --color-on-background: #1E1A20;
+  --color-outline: #7D747E;
+  --color-outline-variant: #CFC4CF;
+  --color-inverse-surface: #332F35;
+  --color-inverse-on-surface: #F6EDF4;
+  --color-inverse-primary: #E1B6FF;
+}
+[data-palette='violet'].dark {
+  --color-primary: #E1B6FF;
+  --color-on-primary: #4A0072;
+  --color-primary-container: #63218A;
+  --color-on-primary-container: #F2DAFF;
+  --color-secondary: #D1C4D9;
+  --color-on-secondary: #372A3F;
+  --color-secondary-container: #4E4156;
+  --color-on-secondary-container: #EDE0F6;
+  --color-tertiary: #F3B7BD;
+  --color-on-tertiary: #4B252B;
+  --color-tertiary-container: #653B41;
+  --color-on-tertiary-container: #FFD9DD;
+  --color-surface: #161218;
+  --color-on-surface: #E8DEE7;
+  --color-surface-variant: #4C444D;
+  --color-on-surface-variant: #CFC4CF;
+  --color-surface-dim: #161218;
+  --color-surface-bright: #3D383E;
+  --color-surface-container-lowest: #100D12;
+  --color-surface-container-low: #1E1A20;
+  --color-surface-container: #221E24;
+  --color-surface-container-high: #2D292F;
+  --color-surface-container-highest: #38343A;
+  --color-background: #161218;
+  --color-on-background: #E8DEE7;
+  --color-outline: #998F99;
+  --color-outline-variant: #4C444D;
+  --color-inverse-surface: #E8DEE7;
+  --color-inverse-on-surface: #332F35;
+  --color-inverse-primary: #7C39A4;
+}
+
+/* ─── Olive ────────────────────────────────────────────────────────────── */
+[data-palette='olive'] {
+  --color-primary: #636118;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #EAE68E;
+  --color-on-primary-container: #1D1D00;
+  --color-secondary: #60604A;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #E6E4C8;
+  --color-on-secondary-container: #1D1D07;
+  --color-tertiary: #3D6656;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #BFECD7;
+  --color-on-tertiary-container: #002116;
+  --color-surface: #FEFBE3;
+  --color-on-surface: #1C1C12;
+  --color-surface-variant: #E6E3D1;
+  --color-on-surface-variant: #48473A;
+  --color-surface-dim: #DFDCC9;
+  --color-surface-bright: #FEFBE3;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F8F5DD;
+  --color-surface-container: #F2EFD7;
+  --color-surface-container-high: #ECE9D2;
+  --color-surface-container-highest: #E6E4CC;
+  --color-background: #FEFBE3;
+  --color-on-background: #1C1C12;
+  --color-outline: #797869;
+  --color-outline-variant: #CAC7B6;
+  --color-inverse-surface: #313126;
+  --color-inverse-on-surface: #F4F1D9;
+  --color-inverse-primary: #CECA75;
+}
+[data-palette='olive'].dark {
+  --color-primary: #CECA75;
+  --color-on-primary: #333200;
+  --color-primary-container: #4A4900;
+  --color-on-primary-container: #EAE68E;
+  --color-secondary: #C9C8AD;
+  --color-on-secondary: #32321E;
+  --color-secondary-container: #494834;
+  --color-on-secondary-container: #E6E4C8;
+  --color-tertiary: #A3D0BC;
+  --color-on-tertiary: #0A372A;
+  --color-tertiary-container: #254E3F;
+  --color-on-tertiary-container: #BFECD7;
+  --color-surface: #14140B;
+  --color-on-surface: #E6E4CC;
+  --color-surface-variant: #48473A;
+  --color-on-surface-variant: #CAC7B6;
+  --color-surface-dim: #14140B;
+  --color-surface-bright: #3A3A30;
+  --color-surface-container-lowest: #0F0F06;
+  --color-surface-container-low: #1C1C12;
+  --color-surface-container: #202016;
+  --color-surface-container-high: #2B2B21;
+  --color-surface-container-highest: #36352B;
+  --color-background: #14140B;
+  --color-on-background: #E6E4CC;
+  --color-outline: #939181;
+  --color-outline-variant: #48473A;
+  --color-inverse-surface: #E6E4CC;
+  --color-inverse-on-surface: #313126;
+  --color-inverse-primary: #636118;
+}
+
+/* ─── Crimson ──────────────────────────────────────────────────────────── */
+[data-palette='crimson'] {
+  --color-primary: #9C4068;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FFD8E6;
+  --color-on-primary-container: #3E0022;
+  --color-secondary: #755762;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #FFD8E6;
+  --color-on-secondary-container: #2B1520;
+  --color-tertiary: #7D532C;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFDCC3;
+  --color-on-tertiary-container: #2E1500;
+  --color-surface: #FFF8F8;
+  --color-on-surface: #221920;
+  --color-surface-variant: #F4DEE3;
+  --color-on-surface-variant: #524249;
+  --color-surface-dim: #E7D6DA;
+  --color-surface-bright: #FFF8F8;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FFF0F3;
+  --color-surface-container: #FDE9EC;
+  --color-surface-container-high: #F7E3E7;
+  --color-surface-container-highest: #F1DDE1;
+  --color-background: #FFF8F8;
+  --color-on-background: #221920;
+  --color-outline: #837378;
+  --color-outline-variant: #D7C1C8;
+  --color-inverse-surface: #382D32;
+  --color-inverse-on-surface: #FEEBF0;
+  --color-inverse-primary: #FFB0CA;
+}
+[data-palette='crimson'].dark {
+  --color-primary: #FFB0CA;
+  --color-on-primary: #5F1139;
+  --color-primary-container: #7C2950;
+  --color-on-primary-container: #FFD8E6;
+  --color-secondary: #E4BDC9;
+  --color-on-secondary: #432935;
+  --color-secondary-container: #5B3F4B;
+  --color-on-secondary-container: #FFD8E6;
+  --color-tertiary: #EFBE93;
+  --color-on-tertiary: #482A0A;
+  --color-tertiary-container: #63401D;
+  --color-on-tertiary-container: #FFDCC3;
+  --color-surface: #1A1118;
+  --color-on-surface: #F1DDE1;
+  --color-surface-variant: #524249;
+  --color-on-surface-variant: #D7C1C8;
+  --color-surface-dim: #1A1118;
+  --color-surface-bright: #41363C;
+  --color-surface-container-lowest: #140C12;
+  --color-surface-container-low: #221920;
+  --color-surface-container: #271D23;
+  --color-surface-container-high: #31282E;
+  --color-surface-container-highest: #3D3238;
+  --color-background: #1A1118;
+  --color-on-background: #F1DDE1;
+  --color-outline: #9D8C92;
+  --color-outline-variant: #524249;
+  --color-inverse-surface: #F1DDE1;
+  --color-inverse-on-surface: #382D32;
+  --color-inverse-primary: #9C4068;
+}
+
+/* ─── Navy ─────────────────────────────────────────────────────────────── */
+[data-palette='navy'] {
+  --color-primary: #354BA0;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #DCE1FF;
+  --color-on-primary-container: #001258;
+  --color-secondary: #5A5D72;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #DFE1F9;
+  --color-on-secondary-container: #171A2C;
+  --color-tertiary: #765570;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #FFD7F3;
+  --color-on-tertiary-container: #2C132A;
+  --color-surface: #FBF8FF;
+  --color-on-surface: #1B1B22;
+  --color-surface-variant: #E3E1ED;
+  --color-on-surface-variant: #464650;
+  --color-surface-dim: #DBD9E2;
+  --color-surface-bright: #FBF8FF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F5F2FB;
+  --color-surface-container: #EFF0F5;
+  --color-surface-container-high: #E9E7F0;
+  --color-surface-container-highest: #E4E1EA;
+  --color-background: #FBF8FF;
+  --color-on-background: #1B1B22;
+  --color-outline: #767681;
+  --color-outline-variant: #C6C5D1;
+  --color-inverse-surface: #303037;
+  --color-inverse-on-surface: #F2F0F8;
+  --color-inverse-primary: #B6C4FF;
+}
+[data-palette='navy'].dark {
+  --color-primary: #B6C4FF;
+  --color-on-primary: #08287A;
+  --color-primary-container: #1E3A88;
+  --color-on-primary-container: #DCE1FF;
+  --color-secondary: #C3C5DD;
+  --color-on-secondary: #2C2F42;
+  --color-secondary-container: #424559;
+  --color-on-secondary-container: #DFE1F9;
+  --color-tertiary: #E5BAD9;
+  --color-on-tertiary: #43283F;
+  --color-tertiary-container: #5C3E57;
+  --color-on-tertiary-container: #FFD7F3;
+  --color-surface: #131319;
+  --color-on-surface: #E4E1EA;
+  --color-surface-variant: #464650;
+  --color-on-surface-variant: #C6C5D1;
+  --color-surface-dim: #131319;
+  --color-surface-bright: #393940;
+  --color-surface-container-lowest: #0E0E14;
+  --color-surface-container-low: #1B1B22;
+  --color-surface-container: #1F1F26;
+  --color-surface-container-high: #2A2A31;
+  --color-surface-container-highest: #35343C;
+  --color-background: #131319;
+  --color-on-background: #E4E1EA;
+  --color-outline: #90909B;
+  --color-outline-variant: #464650;
+  --color-inverse-surface: #E4E1EA;
+  --color-inverse-on-surface: #303037;
+  --color-inverse-primary: #354BA0;
+}
+
+/* ─── Sand ─────────────────────────────────────────────────────────────── */
+[data-palette='sand'] {
+  --color-primary: #715C2E;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #FDDFA4;
+  --color-on-primary-container: #261900;
+  --color-secondary: #6A5F48;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #F3E2C5;
+  --color-on-secondary-container: #231B09;
+  --color-tertiary: #4A6545;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #CCEBC3;
+  --color-on-tertiary-container: #082008;
+  --color-surface: #FFF9F0;
+  --color-on-surface: #1E1B14;
+  --color-surface-variant: #ECE1D0;
+  --color-on-surface-variant: #4D4639;
+  --color-surface-dim: #E0D7C9;
+  --color-surface-bright: #FFF9F0;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #FAF1E3;
+  --color-surface-container: #F4EBDD;
+  --color-surface-container-high: #EEE5D7;
+  --color-surface-container-highest: #E9E0D2;
+  --color-background: #FFF9F0;
+  --color-on-background: #1E1B14;
+  --color-outline: #7F7668;
+  --color-outline-variant: #CFC4B4;
+  --color-inverse-surface: #333028;
+  --color-inverse-on-surface: #F7EFE1;
+  --color-inverse-primary: #E0C38B;
+}
+[data-palette='sand'].dark {
+  --color-primary: #E0C38B;
+  --color-on-primary: #3E2D05;
+  --color-primary-container: #574319;
+  --color-on-primary-container: #FDDFA4;
+  --color-secondary: #D6C6AA;
+  --color-on-secondary: #38301C;
+  --color-secondary-container: #504632;
+  --color-on-secondary-container: #F3E2C5;
+  --color-tertiary: #B0CFA8;
+  --color-on-tertiary: #1E371A;
+  --color-tertiary-container: #344E2F;
+  --color-on-tertiary-container: #CCEBC3;
+  --color-surface: #16130C;
+  --color-on-surface: #E9E0D2;
+  --color-surface-variant: #4D4639;
+  --color-on-surface-variant: #CFC4B4;
+  --color-surface-dim: #16130C;
+  --color-surface-bright: #3D3930;
+  --color-surface-container-lowest: #110E07;
+  --color-surface-container-low: #1E1B14;
+  --color-surface-container: #221F18;
+  --color-surface-container-high: #2D2A22;
+  --color-surface-container-highest: #38352D;
+  --color-background: #16130C;
+  --color-on-background: #E9E0D2;
+  --color-outline: #99907E;
+  --color-outline-variant: #4D4639;
+  --color-inverse-surface: #E9E0D2;
+  --color-inverse-on-surface: #333028;
+  --color-inverse-primary: #715C2E;
+}