@m3ui-vue/m3ui-vue 0.2.0 → 0.2.2

package/src/styles/palettes.css

@@ -1251,3 +1251,663 @@
   --color-inverse-on-surface: #333028;
   --color-inverse-primary: #715C2E;
 }
+
+/* ─── Graphite (monochromatic neutral) ────────────────────────────────── */
+[data-palette='graphite'] {
+  --color-primary: #5C5C5C;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #E0E0E0;
+  --color-on-primary-container: #1A1A1A;
+  --color-secondary: #5E5E5E;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #E3E3E3;
+  --color-on-secondary-container: #1B1B1B;
+  --color-tertiary: #5A5A5A;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DDDDDD;
+  --color-on-tertiary-container: #191919;
+  --color-surface: #FAFAFA;
+  --color-on-surface: #1B1B1B;
+  --color-surface-variant: #E3E3E3;
+  --color-on-surface-variant: #474747;
+  --color-surface-dim: #DBDBDB;
+  --color-surface-bright: #FAFAFA;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F5F5F5;
+  --color-surface-container: #EFEFEF;
+  --color-surface-container-high: #E9E9E9;
+  --color-surface-container-highest: #E3E3E3;
+  --color-background: #FAFAFA;
+  --color-on-background: #1B1B1B;
+  --color-outline: #787878;
+  --color-outline-variant: #C8C8C8;
+  --color-inverse-surface: #303030;
+  --color-inverse-on-surface: #F2F2F2;
+  --color-inverse-primary: #C4C4C4;
+}
+[data-palette='graphite'].dark {
+  --color-primary: #C4C4C4;
+  --color-on-primary: #2E2E2E;
+  --color-primary-container: #444444;
+  --color-on-primary-container: #E0E0E0;
+  --color-secondary: #C7C7C7;
+  --color-on-secondary: #303030;
+  --color-secondary-container: #474747;
+  --color-on-secondary-container: #E3E3E3;
+  --color-tertiary: #C1C1C1;
+  --color-on-tertiary: #2C2C2C;
+  --color-tertiary-container: #424242;
+  --color-on-tertiary-container: #DDDDDD;
+  --color-surface: #131313;
+  --color-on-surface: #E3E3E3;
+  --color-surface-variant: #474747;
+  --color-on-surface-variant: #C8C8C8;
+  --color-surface-dim: #131313;
+  --color-surface-bright: #393939;
+  --color-surface-container-lowest: #0E0E0E;
+  --color-surface-container-low: #1B1B1B;
+  --color-surface-container: #1F1F1F;
+  --color-surface-container-high: #2A2A2A;
+  --color-surface-container-highest: #353535;
+  --color-background: #131313;
+  --color-on-background: #E3E3E3;
+  --color-outline: #919191;
+  --color-outline-variant: #474747;
+  --color-inverse-surface: #E3E3E3;
+  --color-inverse-on-surface: #303030;
+  --color-inverse-primary: #5C5C5C;
+}
+
+/* ─── Charcoal (monochromatic warm dark) ──────────────────────────────── */
+[data-palette='charcoal'] {
+  --color-primary: #4A4A4A;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #D4D4D4;
+  --color-on-primary-container: #151515;
+  --color-secondary: #525250;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #D9D9D7;
+  --color-on-secondary-container: #1A1A18;
+  --color-tertiary: #4E4E4C;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #D5D5D3;
+  --color-on-tertiary-container: #181816;
+  --color-surface: #F8F8F7;
+  --color-on-surface: #1C1C1B;
+  --color-surface-variant: #E1E1DF;
+  --color-on-surface-variant: #454544;
+  --color-surface-dim: #D9D9D8;
+  --color-surface-bright: #F8F8F7;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F3F3F2;
+  --color-surface-container: #EDEDEC;
+  --color-surface-container-high: #E7E7E6;
+  --color-surface-container-highest: #E1E1E0;
+  --color-background: #F8F8F7;
+  --color-on-background: #1C1C1B;
+  --color-outline: #767675;
+  --color-outline-variant: #C6C6C4;
+  --color-inverse-surface: #313130;
+  --color-inverse-on-surface: #F0F0EF;
+  --color-inverse-primary: #BCBCBC;
+}
+[data-palette='charcoal'].dark {
+  --color-primary: #BCBCBC;
+  --color-on-primary: #262626;
+  --color-primary-container: #3C3C3C;
+  --color-on-primary-container: #D4D4D4;
+  --color-secondary: #BDBDBB;
+  --color-on-secondary: #28282A;
+  --color-secondary-container: #3F3F3D;
+  --color-on-secondary-container: #D9D9D7;
+  --color-tertiary: #B9B9B7;
+  --color-on-tertiary: #262624;
+  --color-tertiary-container: #3B3B39;
+  --color-on-tertiary-container: #D5D5D3;
+  --color-surface: #141413;
+  --color-on-surface: #E1E1E0;
+  --color-surface-variant: #454544;
+  --color-on-surface-variant: #C6C6C4;
+  --color-surface-dim: #141413;
+  --color-surface-bright: #3A3A39;
+  --color-surface-container-lowest: #0F0F0E;
+  --color-surface-container-low: #1C1C1B;
+  --color-surface-container: #202020;
+  --color-surface-container-high: #2B2B2A;
+  --color-surface-container-highest: #363635;
+  --color-background: #141413;
+  --color-on-background: #E1E1E0;
+  --color-outline: #909090;
+  --color-outline-variant: #454544;
+  --color-inverse-surface: #E1E1E0;
+  --color-inverse-on-surface: #313130;
+  --color-inverse-primary: #4A4A4A;
+}
+
+/* ─── Steel (monochromatic cool blue-grey) ────────────────────────────── */
+[data-palette='steel'] {
+  --color-primary: #5A6A72;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #D4E4EC;
+  --color-on-primary-container: #152028;
+  --color-secondary: #556068;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #D6E1E9;
+  --color-on-secondary-container: #131E24;
+  --color-tertiary: #596A6E;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #D3E4E8;
+  --color-on-tertiary-container: #142027;
+  --color-surface: #F6FAFB;
+  --color-on-surface: #181C1E;
+  --color-surface-variant: #DDE3E6;
+  --color-on-surface-variant: #41484B;
+  --color-surface-dim: #D6DCDE;
+  --color-surface-bright: #F6FAFB;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F0F4F6;
+  --color-surface-container: #EAEEF0;
+  --color-surface-container-high: #E5E9EB;
+  --color-surface-container-highest: #DFE3E5;
+  --color-background: #F6FAFB;
+  --color-on-background: #181C1E;
+  --color-outline: #717A7D;
+  --color-outline-variant: #C1C8CB;
+  --color-inverse-surface: #2D3133;
+  --color-inverse-on-surface: #EDF1F3;
+  --color-inverse-primary: #B8C8D0;
+}
+[data-palette='steel'].dark {
+  --color-primary: #B8C8D0;
+  --color-on-primary: #23333B;
+  --color-primary-container: #3A4A52;
+  --color-on-primary-container: #D4E4EC;
+  --color-secondary: #BAC5CD;
+  --color-on-secondary: #24303A;
+  --color-secondary-container: #3B4750;
+  --color-on-secondary-container: #D6E1E9;
+  --color-tertiary: #B7C8CC;
+  --color-on-tertiary: #223338;
+  --color-tertiary-container: #394A4E;
+  --color-on-tertiary-container: #D3E4E8;
+  --color-surface: #101416;
+  --color-on-surface: #DFE3E5;
+  --color-surface-variant: #41484B;
+  --color-on-surface-variant: #C1C8CB;
+  --color-surface-dim: #101416;
+  --color-surface-bright: #363A3C;
+  --color-surface-container-lowest: #0B0F11;
+  --color-surface-container-low: #181C1E;
+  --color-surface-container: #1C2022;
+  --color-surface-container-high: #272B2D;
+  --color-surface-container-highest: #313638;
+  --color-background: #101416;
+  --color-on-background: #DFE3E5;
+  --color-outline: #8B9295;
+  --color-outline-variant: #41484B;
+  --color-inverse-surface: #DFE3E5;
+  --color-inverse-on-surface: #2D3133;
+  --color-inverse-primary: #5A6A72;
+}
+
+/* ─── Ash (monochromatic warm grey) ───────────────────────────────────── */
+[data-palette='ash'] {
+  --color-primary: #6B6560;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #F3DDD5;
+  --color-on-primary-container: #241E1B;
+  --color-secondary: #655F5C;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #ECE0DC;
+  --color-on-secondary-container: #201B19;
+  --color-tertiary: #636059;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #E9E3DB;
+  --color-on-tertiary-container: #1F1C17;
+  --color-surface: #FEF7F4;
+  --color-on-surface: #1D1B19;
+  --color-surface-variant: #E9E1DD;
+  --color-on-surface-variant: #4A4643;
+  --color-surface-dim: #DFD8D4;
+  --color-surface-bright: #FEF7F4;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F9F1EE;
+  --color-surface-container: #F3ECE8;
+  --color-surface-container-high: #EDE6E3;
+  --color-surface-container-highest: #E7E0DD;
+  --color-background: #FEF7F4;
+  --color-on-background: #1D1B19;
+  --color-outline: #7C7672;
+  --color-outline-variant: #CDC5C1;
+  --color-inverse-surface: #32302E;
+  --color-inverse-on-surface: #F5EDEA;
+  --color-inverse-primary: #D9C3BA;
+}
+[data-palette='ash'].dark {
+  --color-primary: #D9C3BA;
+  --color-on-primary: #3B342F;
+  --color-primary-container: #534B47;
+  --color-on-primary-container: #F3DDD5;
+  --color-secondary: #D0C4C0;
+  --color-on-secondary: #36302D;
+  --color-secondary-container: #4D4744;
+  --color-on-secondary-container: #ECE0DC;
+  --color-tertiary: #CDC7BF;
+  --color-on-tertiary: #34312C;
+  --color-tertiary-container: #4B4842;
+  --color-on-tertiary-container: #E9E3DB;
+  --color-surface: #151311;
+  --color-on-surface: #E7E0DD;
+  --color-surface-variant: #4A4643;
+  --color-on-surface-variant: #CDC5C1;
+  --color-surface-dim: #151311;
+  --color-surface-bright: #3C3937;
+  --color-surface-container-lowest: #100E0C;
+  --color-surface-container-low: #1D1B19;
+  --color-surface-container: #211F1D;
+  --color-surface-container-high: #2C2A27;
+  --color-surface-container-highest: #373432;
+  --color-background: #151311;
+  --color-on-background: #E7E0DD;
+  --color-outline: #96908C;
+  --color-outline-variant: #4A4643;
+  --color-inverse-surface: #E7E0DD;
+  --color-inverse-on-surface: #32302E;
+  --color-inverse-primary: #6B6560;
+}
+
+/* ─── Iron (monochromatic cool dark) ──────────────────────────────────── */
+[data-palette='iron'] {
+  --color-primary: #505864;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #D3DBEA;
+  --color-on-primary-container: #0C1520;
+  --color-secondary: #565D68;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #DAE1ED;
+  --color-on-secondary-container: #131A24;
+  --color-tertiary: #525A64;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #D5DDE8;
+  --color-on-tertiary-container: #0E161F;
+  --color-surface: #F8FAFB;
+  --color-on-surface: #191C1E;
+  --color-surface-variant: #DFE2E6;
+  --color-on-surface-variant: #43474B;
+  --color-surface-dim: #D8DCDE;
+  --color-surface-bright: #F8FAFB;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F2F4F6;
+  --color-surface-container: #ECEEF0;
+  --color-surface-container-high: #E6E8EB;
+  --color-surface-container-highest: #E1E3E5;
+  --color-background: #F8FAFB;
+  --color-on-background: #191C1E;
+  --color-outline: #73777C;
+  --color-outline-variant: #C3C7CC;
+  --color-inverse-surface: #2E3133;
+  --color-inverse-on-surface: #EFF1F3;
+  --color-inverse-primary: #B7BFD0;
+}
+[data-palette='iron'].dark {
+  --color-primary: #B7BFD0;
+  --color-on-primary: #222A36;
+  --color-primary-container: #39414C;
+  --color-on-primary-container: #D3DBEA;
+  --color-secondary: #BEC5D1;
+  --color-on-secondary: #28303A;
+  --color-secondary-container: #3F4650;
+  --color-on-secondary-container: #DAE1ED;
+  --color-tertiary: #B9C1CC;
+  --color-on-tertiary: #242C35;
+  --color-tertiary-container: #3B434C;
+  --color-on-tertiary-container: #D5DDE8;
+  --color-surface: #111416;
+  --color-on-surface: #E1E3E5;
+  --color-surface-variant: #43474B;
+  --color-on-surface-variant: #C3C7CC;
+  --color-surface-dim: #111416;
+  --color-surface-bright: #37393C;
+  --color-surface-container-lowest: #0C0E10;
+  --color-surface-container-low: #191C1E;
+  --color-surface-container: #1D2022;
+  --color-surface-container-high: #282A2D;
+  --color-surface-container-highest: #323537;
+  --color-background: #111416;
+  --color-on-background: #E1E3E5;
+  --color-outline: #8D9196;
+  --color-outline-variant: #43474B;
+  --color-inverse-surface: #E1E3E5;
+  --color-inverse-on-surface: #2E3133;
+  --color-inverse-primary: #505864;
+}
+
+/* ─── Fog (monochromatic lavender-grey) ───────────────────────────────── */
+[data-palette='fog'] {
+  --color-primary: #625E6E;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #E8DEF5;
+  --color-on-primary-container: #1E1A28;
+  --color-secondary: #615E68;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #E7E0EE;
+  --color-on-secondary-container: #1D1A24;
+  --color-tertiary: #5E5F6B;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #E3E0F1;
+  --color-on-tertiary-container: #1B1B26;
+  --color-surface: #FDF7FF;
+  --color-on-surface: #1C1B1F;
+  --color-surface-variant: #E6E1E9;
+  --color-on-surface-variant: #48454E;
+  --color-surface-dim: #DDD8DE;
+  --color-surface-bright: #FDF7FF;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F7F1F8;
+  --color-surface-container: #F1EBF2;
+  --color-surface-container-high: #EBE5ED;
+  --color-surface-container-highest: #E6E0E7;
+  --color-background: #FDF7FF;
+  --color-on-background: #1C1B1F;
+  --color-outline: #79757F;
+  --color-outline-variant: #CAC5CD;
+  --color-inverse-surface: #313034;
+  --color-inverse-on-surface: #F4EEF5;
+  --color-inverse-primary: #CEC3DB;
+}
+[data-palette='fog'].dark {
+  --color-primary: #CEC3DB;
+  --color-on-primary: #35313E;
+  --color-primary-container: #4C4756;
+  --color-on-primary-container: #E8DEF5;
+  --color-secondary: #CBC4D2;
+  --color-on-secondary: #33303A;
+  --color-secondary-container: #4A4650;
+  --color-on-secondary-container: #E7E0EE;
+  --color-tertiary: #C7C4D5;
+  --color-on-tertiary: #30303B;
+  --color-tertiary-container: #474752;
+  --color-on-tertiary-container: #E3E0F1;
+  --color-surface: #141317;
+  --color-on-surface: #E6E0E7;
+  --color-surface-variant: #48454E;
+  --color-on-surface-variant: #CAC5CD;
+  --color-surface-dim: #141317;
+  --color-surface-bright: #3A393D;
+  --color-surface-container-lowest: #0F0D12;
+  --color-surface-container-low: #1C1B1F;
+  --color-surface-container: #201F23;
+  --color-surface-container-high: #2B292E;
+  --color-surface-container-highest: #363439;
+  --color-background: #141317;
+  --color-on-background: #E6E0E7;
+  --color-outline: #938F99;
+  --color-outline-variant: #48454E;
+  --color-inverse-surface: #E6E0E7;
+  --color-inverse-on-surface: #313034;
+  --color-inverse-primary: #625E6E;
+}
+
+/* ─── Pewter (monochromatic green-grey) ───────────────────────────────── */
+[data-palette='pewter'] {
+  --color-primary: #5A6360;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #DEE7E3;
+  --color-on-primary-container: #171F1D;
+  --color-secondary: #5C6361;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #E0E7E4;
+  --color-on-secondary-container: #191F1E;
+  --color-tertiary: #586462;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DCE8E5;
+  --color-on-tertiary-container: #16201E;
+  --color-surface: #F7FAF8;
+  --color-on-surface: #191C1B;
+  --color-surface-variant: #DEE4E1;
+  --color-on-surface-variant: #424846;
+  --color-surface-dim: #D7DCDA;
+  --color-surface-bright: #F7FAF8;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F1F5F3;
+  --color-surface-container: #EBEFED;
+  --color-surface-container-high: #E5E9E7;
+  --color-surface-container-highest: #E0E4E2;
+  --color-background: #F7FAF8;
+  --color-on-background: #191C1B;
+  --color-outline: #727876;
+  --color-outline-variant: #C2C8C5;
+  --color-inverse-surface: #2E3130;
+  --color-inverse-on-surface: #EFF2F0;
+  --color-inverse-primary: #C3CBC8;
+}
+[data-palette='pewter'].dark {
+  --color-primary: #C3CBC8;
+  --color-on-primary: #2C3432;
+  --color-primary-container: #434B48;
+  --color-on-primary-container: #DEE7E3;
+  --color-secondary: #C4CBC9;
+  --color-on-secondary: #2E3533;
+  --color-secondary-container: #454C4A;
+  --color-on-secondary-container: #E0E7E4;
+  --color-tertiary: #C0CCC9;
+  --color-on-tertiary: #2B3634;
+  --color-tertiary-container: #424D4B;
+  --color-on-tertiary-container: #DCE8E5;
+  --color-surface: #111413;
+  --color-on-surface: #E0E4E2;
+  --color-surface-variant: #424846;
+  --color-on-surface-variant: #C2C8C5;
+  --color-surface-dim: #111413;
+  --color-surface-bright: #373A39;
+  --color-surface-container-lowest: #0C0F0E;
+  --color-surface-container-low: #191C1B;
+  --color-surface-container: #1D201F;
+  --color-surface-container-high: #272B29;
+  --color-surface-container-highest: #323634;
+  --color-background: #111413;
+  --color-on-background: #E0E4E2;
+  --color-outline: #8C9290;
+  --color-outline-variant: #424846;
+  --color-inverse-surface: #E0E4E2;
+  --color-inverse-on-surface: #2E3130;
+  --color-inverse-primary: #5A6360;
+}
+
+/* ─── Smoke (monochromatic blue-grey dark) ────────────────────────────── */
+[data-palette='smoke'] {
+  --color-primary: #4D5C66;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #CFE0EB;
+  --color-on-primary-container: #0A1922;
+  --color-secondary: #536069;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #D6E3ED;
+  --color-on-secondary-container: #101D25;
+  --color-tertiary: #4F5E68;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #D1E2ED;
+  --color-on-tertiary-container: #0C1B24;
+  --color-surface: #F5FAFC;
+  --color-on-surface: #171C1F;
+  --color-surface-variant: #DBE3E7;
+  --color-on-surface-variant: #40474B;
+  --color-surface-dim: #D5DCDF;
+  --color-surface-bright: #F5FAFC;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #EFF4F7;
+  --color-surface-container: #E9EFF1;
+  --color-surface-container-high: #E4E9EC;
+  --color-surface-container-highest: #DEE3E6;
+  --color-background: #F5FAFC;
+  --color-on-background: #171C1F;
+  --color-outline: #70787C;
+  --color-outline-variant: #C0C8CB;
+  --color-inverse-surface: #2C3134;
+  --color-inverse-on-surface: #EDF2F4;
+  --color-inverse-primary: #B3C4CF;
+}
+[data-palette='smoke'].dark {
+  --color-primary: #B3C4CF;
+  --color-on-primary: #1E2D37;
+  --color-primary-container: #35444E;
+  --color-on-primary-container: #CFE0EB;
+  --color-secondary: #BAC7D1;
+  --color-on-secondary: #25323B;
+  --color-secondary-container: #3B4951;
+  --color-on-secondary-container: #D6E3ED;
+  --color-tertiary: #B5C6D1;
+  --color-on-tertiary: #20303A;
+  --color-tertiary-container: #374650;
+  --color-on-tertiary-container: #D1E2ED;
+  --color-surface: #0F1417;
+  --color-on-surface: #DEE3E6;
+  --color-surface-variant: #40474B;
+  --color-on-surface-variant: #C0C8CB;
+  --color-surface-dim: #0F1417;
+  --color-surface-bright: #353A3D;
+  --color-surface-container-lowest: #0A0F12;
+  --color-surface-container-low: #171C1F;
+  --color-surface-container: #1B2023;
+  --color-surface-container-high: #262B2E;
+  --color-surface-container-highest: #303638;
+  --color-background: #0F1417;
+  --color-on-background: #DEE3E6;
+  --color-outline: #8A9296;
+  --color-outline-variant: #40474B;
+  --color-inverse-surface: #DEE3E6;
+  --color-inverse-on-surface: #2C3134;
+  --color-inverse-primary: #4D5C66;
+}
+
+/* ─── Stone (monochromatic beige) ─────────────────────────────────────── */
+[data-palette='stone'] {
+  --color-primary: #68635A;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #F0E7DD;
+  --color-on-primary-container: #231F18;
+  --color-secondary: #656058;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #ECE4DB;
+  --color-on-secondary-container: #211C16;
+  --color-tertiary: #645F56;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #EBE3D8;
+  --color-on-tertiary-container: #201C15;
+  --color-surface: #FEF9F3;
+  --color-on-surface: #1D1B17;
+  --color-surface-variant: #E8E2D9;
+  --color-on-surface-variant: #4A4640;
+  --color-surface-dim: #DED9D2;
+  --color-surface-bright: #FEF9F3;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F8F3EC;
+  --color-surface-container: #F2EDE6;
+  --color-surface-container-high: #ECE7E1;
+  --color-surface-container-highest: #E6E2DB;
+  --color-background: #FEF9F3;
+  --color-on-background: #1D1B17;
+  --color-outline: #7B776F;
+  --color-outline-variant: #CCC7BE;
+  --color-inverse-surface: #32302C;
+  --color-inverse-on-surface: #F5F0E9;
+  --color-inverse-primary: #D5CCBF;
+}
+[data-palette='stone'].dark {
+  --color-primary: #D5CCBF;
+  --color-on-primary: #39352D;
+  --color-primary-container: #514C43;
+  --color-on-primary-container: #F0E7DD;
+  --color-secondary: #D0C8BF;
+  --color-on-secondary: #35312A;
+  --color-secondary-container: #4C4841;
+  --color-on-secondary-container: #ECE4DB;
+  --color-tertiary: #CFC7BC;
+  --color-on-tertiary: #343129;
+  --color-tertiary-container: #4B473F;
+  --color-on-tertiary-container: #EBE3D8;
+  --color-surface: #15130F;
+  --color-on-surface: #E6E2DB;
+  --color-surface-variant: #4A4640;
+  --color-on-surface-variant: #CCC7BE;
+  --color-surface-dim: #15130F;
+  --color-surface-bright: #3B3934;
+  --color-surface-container-lowest: #100E0A;
+  --color-surface-container-low: #1D1B17;
+  --color-surface-container: #211F1B;
+  --color-surface-container-high: #2C2A25;
+  --color-surface-container-highest: #373430;
+  --color-background: #15130F;
+  --color-on-background: #E6E2DB;
+  --color-outline: #959189;
+  --color-outline-variant: #4A4640;
+  --color-inverse-surface: #E6E2DB;
+  --color-inverse-on-surface: #32302C;
+  --color-inverse-primary: #68635A;
+}
+
+/* ─── Zinc (monochromatic pure cool) ──────────────────────────────────── */
+[data-palette='zinc'] {
+  --color-primary: #585B5E;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #DCDFE2;
+  --color-on-primary-container: #16181B;
+  --color-secondary: #5A5D5F;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #DEE1E3;
+  --color-on-secondary-container: #171A1C;
+  --color-tertiary: #565A5D;
+  --color-on-tertiary: #ffffff;
+  --color-tertiary-container: #DADDE0;
+  --color-on-tertiary-container: #14171A;
+  --color-surface: #F9FAFB;
+  --color-on-surface: #1A1C1D;
+  --color-surface-variant: #E1E3E5;
+  --color-on-surface-variant: #45474A;
+  --color-surface-dim: #DADCDD;
+  --color-surface-bright: #F9FAFB;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #F3F4F5;
+  --color-surface-container: #EEEFF0;
+  --color-surface-container-high: #E8E9EA;
+  --color-surface-container-highest: #E2E3E4;
+  --color-background: #F9FAFB;
+  --color-on-background: #1A1C1D;
+  --color-outline: #757779;
+  --color-outline-variant: #C5C7C9;
+  --color-inverse-surface: #2F3132;
+  --color-inverse-on-surface: #F1F1F2;
+  --color-inverse-primary: #C0C3C6;
+}
+[data-palette='zinc'].dark {
+  --color-primary: #C0C3C6;
+  --color-on-primary: #2A2D30;
+  --color-primary-container: #414446;
+  --color-on-primary-container: #DCDFE2;
+  --color-secondary: #C2C5C7;
+  --color-on-secondary: #2C2F31;
+  --color-secondary-container: #434648;
+  --color-on-secondary-container: #DEE1E3;
+  --color-tertiary: #BEC1C4;
+  --color-on-tertiary: #282B2E;
+  --color-tertiary-container: #3F4245;
+  --color-on-tertiary-container: #DADDE0;
+  --color-surface: #121415;
+  --color-on-surface: #E2E3E4;
+  --color-surface-variant: #45474A;
+  --color-on-surface-variant: #C5C7C9;
+  --color-surface-dim: #121415;
+  --color-surface-bright: #38393B;
+  --color-surface-container-lowest: #0D0E0F;
+  --color-surface-container-low: #1A1C1D;
+  --color-surface-container: #1E2021;
+  --color-surface-container-high: #292A2C;
+  --color-surface-container-highest: #343536;
+  --color-background: #121415;
+  --color-on-background: #E2E3E4;
+  --color-outline: #8F9193;
+  --color-outline-variant: #45474A;
+  --color-inverse-surface: #E2E3E4;
+  --color-inverse-on-surface: #2F3132;
+  --color-inverse-primary: #585B5E;
+}