/* Color themes for aMAZEd, shared by the game and privacy.html.
   Violet is the baseline (plain :root); the others are generated: one hue per theme, mapped
   onto the same M3 tone roles (light tone 40/90/98…, dark 80/30/6…). */

/* ---------- Violet (baseline M3 palette), light ---------- */
:root {
  color-scheme: light;
  --m3e-sys-color-background: #fef7ff;
  --m3e-sys-color-on-background: #1d1b20;
  --m3e-sys-color-surface: #fef7ff;
  --m3e-sys-color-surface-container-lowest: #ffffff;
  --m3e-sys-color-surface-container-low: #f7f2fa;
  --m3e-sys-color-surface-container: #f3edf7;
  --m3e-sys-color-surface-container-high: #ece6f0;
  --m3e-sys-color-surface-container-highest: #e6e0e9;
  --m3e-sys-color-on-surface: #1d1b20;
  --m3e-sys-color-on-surface-variant: #49454f;
  --m3e-sys-color-outline: #79747e;
  --m3e-sys-color-outline-variant: #cac4d0;
  --m3e-sys-color-primary: #6750a4;
  --m3e-sys-color-on-primary: #ffffff;
  --m3e-sys-color-primary-container: #eaddff;
  --m3e-sys-color-on-primary-container: #4f378b;
  --m3e-sys-color-secondary: #625b71;
  --m3e-sys-color-on-secondary: #ffffff;
  --m3e-sys-color-secondary-container: #e8def8;
  --m3e-sys-color-on-secondary-container: #4a4458;
  --m3e-sys-color-tertiary: #7d5260;
  --m3e-sys-color-on-tertiary: #ffffff;
  --m3e-sys-color-tertiary-container: #ffd8e4;
  --m3e-sys-color-on-tertiary-container: #633b48;
  --m3e-sys-color-inverse-surface: #322f35;
  --m3e-sys-color-inverse-on-surface: #f5eff7;
  --m3e-sys-color-inverse-primary: #d0bcff;
  --m3e-sys-color-scrim: #000000;
  --m3e-sys-color-shadow: #000000;
}

/* ---------- Violet, dark: system preference, unless the player chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --m3e-sys-color-background: #141218;
    --m3e-sys-color-on-background: #e6e0e9;
    --m3e-sys-color-surface: #141218;
    --m3e-sys-color-surface-container-lowest: #0f0d13;
    --m3e-sys-color-surface-container-low: #1d1b20;
    --m3e-sys-color-surface-container: #211f26;
    --m3e-sys-color-surface-container-high: #2b2930;
    --m3e-sys-color-surface-container-highest: #36343b;
    --m3e-sys-color-on-surface: #e6e0e9;
    --m3e-sys-color-on-surface-variant: #cac4d0;
    --m3e-sys-color-outline: #938f99;
    --m3e-sys-color-outline-variant: #49454f;
    --m3e-sys-color-primary: #d0bcff;
    --m3e-sys-color-on-primary: #381e72;
    --m3e-sys-color-primary-container: #4f378b;
    --m3e-sys-color-on-primary-container: #eaddff;
    --m3e-sys-color-secondary: #ccc2dc;
    --m3e-sys-color-on-secondary: #332d41;
    --m3e-sys-color-secondary-container: #4a4458;
    --m3e-sys-color-on-secondary-container: #e8def8;
    --m3e-sys-color-tertiary: #efb8c8;
    --m3e-sys-color-on-tertiary: #492532;
    --m3e-sys-color-tertiary-container: #633b48;
    --m3e-sys-color-on-tertiary-container: #ffd8e4;
    --m3e-sys-color-inverse-surface: #e6e0e9;
    --m3e-sys-color-inverse-on-surface: #322f35;
    --m3e-sys-color-inverse-primary: #6750a4;
  }
}

/* ---------- Violet, dark: chosen explicitly in Settings ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --m3e-sys-color-background: #141218;
  --m3e-sys-color-on-background: #e6e0e9;
  --m3e-sys-color-surface: #141218;
  --m3e-sys-color-surface-container-lowest: #0f0d13;
  --m3e-sys-color-surface-container-low: #1d1b20;
  --m3e-sys-color-surface-container: #211f26;
  --m3e-sys-color-surface-container-high: #2b2930;
  --m3e-sys-color-surface-container-highest: #36343b;
  --m3e-sys-color-on-surface: #e6e0e9;
  --m3e-sys-color-on-surface-variant: #cac4d0;
  --m3e-sys-color-outline: #938f99;
  --m3e-sys-color-outline-variant: #49454f;
  --m3e-sys-color-primary: #d0bcff;
  --m3e-sys-color-on-primary: #381e72;
  --m3e-sys-color-primary-container: #4f378b;
  --m3e-sys-color-on-primary-container: #eaddff;
  --m3e-sys-color-secondary: #ccc2dc;
  --m3e-sys-color-on-secondary: #332d41;
  --m3e-sys-color-secondary-container: #4a4458;
  --m3e-sys-color-on-secondary-container: #e8def8;
  --m3e-sys-color-tertiary: #efb8c8;
  --m3e-sys-color-on-tertiary: #492532;
  --m3e-sys-color-tertiary-container: #633b48;
  --m3e-sys-color-on-tertiary-container: #ffd8e4;
  --m3e-sys-color-inverse-surface: #e6e0e9;
  --m3e-sys-color-inverse-on-surface: #322f35;
  --m3e-sys-color-inverse-primary: #6750a4;
}


:root[data-accent="forest"] {
  --m3e-sys-color-primary: #2a6c1c;
  --m3e-sys-color-on-primary: #ffffff;
  --m3e-sys-color-primary-container: #b2f49a;
  --m3e-sys-color-on-primary-container: #095300;
  --m3e-sys-color-secondary: #51634a;
  --m3e-sys-color-on-secondary: #ffffff;
  --m3e-sys-color-secondary-container: #d4e9cb;
  --m3e-sys-color-on-secondary-container: #3a4b33;
  --m3e-sys-color-tertiary: #056a69;
  --m3e-sys-color-on-tertiary: #ffffff;
  --m3e-sys-color-tertiary-container: #9ff1ee;
  --m3e-sys-color-on-tertiary-container: #00504f;
  --m3e-sys-color-background: #f6fbf4;
  --m3e-sys-color-on-background: #191c18;
  --m3e-sys-color-surface: #f6fbf4;
  --m3e-sys-color-surface-container-lowest: #ffffff;
  --m3e-sys-color-surface-container-low: #f0f5ee;
  --m3e-sys-color-surface-container: #eaefe8;
  --m3e-sys-color-surface-container-high: #e5eae3;
  --m3e-sys-color-surface-container-highest: #dfe4dd;
  --m3e-sys-color-on-surface: #191c18;
  --m3e-sys-color-on-surface-variant: #41493e;
  --m3e-sys-color-outline: #717a6d;
  --m3e-sys-color-outline-variant: #c0c9bc;
  --m3e-sys-color-inverse-surface: #2e312c;
  --m3e-sys-color-inverse-on-surface: #edf2eb;
  --m3e-sys-color-inverse-primary: #96d780;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="forest"]:not([data-theme="light"]) {
    color-scheme: dark;
    --m3e-sys-color-primary: #96d780;
    --m3e-sys-color-on-primary: #0a3900;
    --m3e-sys-color-primary-container: #095300;
    --m3e-sys-color-on-primary-container: #b2f49a;
    --m3e-sys-color-secondary: #b8ccaf;
    --m3e-sys-color-on-secondary: #24351e;
    --m3e-sys-color-secondary-container: #3a4b33;
    --m3e-sys-color-on-secondary-container: #d4e9cb;
    --m3e-sys-color-tertiary: #83d4d2;
    --m3e-sys-color-on-tertiary: #003736;
    --m3e-sys-color-tertiary-container: #00504f;
    --m3e-sys-color-on-tertiary-container: #9ff1ee;
    --m3e-sys-color-background: #10140e;
    --m3e-sys-color-on-background: #dfe4dd;
    --m3e-sys-color-surface: #10140e;
    --m3e-sys-color-surface-container-lowest: #0a1008;
    --m3e-sys-color-surface-container-low: #191c18;
    --m3e-sys-color-surface-container: #1d211c;
    --m3e-sys-color-surface-container-high: #272b26;
    --m3e-sys-color-surface-container-highest: #323630;
    --m3e-sys-color-on-surface: #dfe4dd;
    --m3e-sys-color-on-surface-variant: #c0c9bc;
    --m3e-sys-color-outline: #8a9386;
    --m3e-sys-color-outline-variant: #41493e;
    --m3e-sys-color-inverse-surface: #dfe4dd;
    --m3e-sys-color-inverse-on-surface: #2e312c;
    --m3e-sys-color-inverse-primary: #2a6c1c;
  }
}

:root[data-accent="forest"][data-theme="dark"] {
  color-scheme: dark;
  --m3e-sys-color-primary: #96d780;
  --m3e-sys-color-on-primary: #0a3900;
  --m3e-sys-color-primary-container: #095300;
  --m3e-sys-color-on-primary-container: #b2f49a;
  --m3e-sys-color-secondary: #b8ccaf;
  --m3e-sys-color-on-secondary: #24351e;
  --m3e-sys-color-secondary-container: #3a4b33;
  --m3e-sys-color-on-secondary-container: #d4e9cb;
  --m3e-sys-color-tertiary: #83d4d2;
  --m3e-sys-color-on-tertiary: #003736;
  --m3e-sys-color-tertiary-container: #00504f;
  --m3e-sys-color-on-tertiary-container: #9ff1ee;
  --m3e-sys-color-background: #10140e;
  --m3e-sys-color-on-background: #dfe4dd;
  --m3e-sys-color-surface: #10140e;
  --m3e-sys-color-surface-container-lowest: #0a1008;
  --m3e-sys-color-surface-container-low: #191c18;
  --m3e-sys-color-surface-container: #1d211c;
  --m3e-sys-color-surface-container-high: #272b26;
  --m3e-sys-color-surface-container-highest: #323630;
  --m3e-sys-color-on-surface: #dfe4dd;
  --m3e-sys-color-on-surface-variant: #c0c9bc;
  --m3e-sys-color-outline: #8a9386;
  --m3e-sys-color-outline-variant: #41493e;
  --m3e-sys-color-inverse-surface: #dfe4dd;
  --m3e-sys-color-inverse-on-surface: #2e312c;
  --m3e-sys-color-inverse-primary: #2a6c1c;
}

:root[data-accent="ocean"] {
  --m3e-sys-color-primary: #006590;
  --m3e-sys-color-on-primary: #ffffff;
  --m3e-sys-color-primary-container: #cae6ff;
  --m3e-sys-color-on-primary-container: #004c6d;
  --m3e-sys-color-secondary: #446278;
  --m3e-sys-color-on-secondary: #ffffff;
  --m3e-sys-color-secondary-container: #cae6ff;
  --m3e-sys-color-on-secondary-container: #2c4a5f;
  --m3e-sys-color-tertiary: #6d557b;
  --m3e-sys-color-on-tertiary: #ffffff;
  --m3e-sys-color-tertiary-container: #f2daff;
  --m3e-sys-color-on-tertiary-container: #553e62;
  --m3e-sys-color-background: #f5faff;
  --m3e-sys-color-on-background: #171c21;
  --m3e-sys-color-surface: #f5faff;
  --m3e-sys-color-surface-container-lowest: #ffffff;
  --m3e-sys-color-surface-container-low: #eef4fb;
  --m3e-sys-color-surface-container: #e8eff5;
  --m3e-sys-color-surface-container-high: #e2e9ef;
  --m3e-sys-color-surface-container-highest: #dde3ea;
  --m3e-sys-color-on-surface: #171c21;
  --m3e-sys-color-on-surface-variant: #3c4852;
  --m3e-sys-color-outline: #6c7984;
  --m3e-sys-color-outline-variant: #bbc8d5;
  --m3e-sys-color-inverse-surface: #2c3136;
  --m3e-sys-color-inverse-on-surface: #ebf2f8;
  --m3e-sys-color-inverse-primary: #8bceff;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="ocean"]:not([data-theme="light"]) {
    color-scheme: dark;
    --m3e-sys-color-primary: #8bceff;
    --m3e-sys-color-on-primary: #00344d;
    --m3e-sys-color-primary-container: #004c6d;
    --m3e-sys-color-on-primary-container: #cae6ff;
    --m3e-sys-color-secondary: #accae4;
    --m3e-sys-color-on-secondary: #123348;
    --m3e-sys-color-secondary-container: #2c4a5f;
    --m3e-sys-color-on-secondary-container: #cae6ff;
    --m3e-sys-color-tertiary: #d9bde7;
    --m3e-sys-color-on-tertiary: #3d284a;
    --m3e-sys-color-tertiary-container: #553e62;
    --m3e-sys-color-on-tertiary-container: #f2daff;
    --m3e-sys-color-background: #0e1419;
    --m3e-sys-color-on-background: #dde3ea;
    --m3e-sys-color-surface: #0e1419;
    --m3e-sys-color-surface-container-lowest: #070f15;
    --m3e-sys-color-surface-container-low: #171c21;
    --m3e-sys-color-surface-container: #1b2025;
    --m3e-sys-color-surface-container-high: #252b2f;
    --m3e-sys-color-surface-container-highest: #30353a;
    --m3e-sys-color-on-surface: #dde3ea;
    --m3e-sys-color-on-surface-variant: #bbc8d5;
    --m3e-sys-color-outline: #85929e;
    --m3e-sys-color-outline-variant: #3c4852;
    --m3e-sys-color-inverse-surface: #dde3ea;
    --m3e-sys-color-inverse-on-surface: #2c3136;
    --m3e-sys-color-inverse-primary: #006590;
  }
}

:root[data-accent="ocean"][data-theme="dark"] {
  color-scheme: dark;
  --m3e-sys-color-primary: #8bceff;
  --m3e-sys-color-on-primary: #00344d;
  --m3e-sys-color-primary-container: #004c6d;
  --m3e-sys-color-on-primary-container: #cae6ff;
  --m3e-sys-color-secondary: #accae4;
  --m3e-sys-color-on-secondary: #123348;
  --m3e-sys-color-secondary-container: #2c4a5f;
  --m3e-sys-color-on-secondary-container: #cae6ff;
  --m3e-sys-color-tertiary: #d9bde7;
  --m3e-sys-color-on-tertiary: #3d284a;
  --m3e-sys-color-tertiary-container: #553e62;
  --m3e-sys-color-on-tertiary-container: #f2daff;
  --m3e-sys-color-background: #0e1419;
  --m3e-sys-color-on-background: #dde3ea;
  --m3e-sys-color-surface: #0e1419;
  --m3e-sys-color-surface-container-lowest: #070f15;
  --m3e-sys-color-surface-container-low: #171c21;
  --m3e-sys-color-surface-container: #1b2025;
  --m3e-sys-color-surface-container-high: #252b2f;
  --m3e-sys-color-surface-container-highest: #30353a;
  --m3e-sys-color-on-surface: #dde3ea;
  --m3e-sys-color-on-surface-variant: #bbc8d5;
  --m3e-sys-color-outline: #85929e;
  --m3e-sys-color-outline-variant: #3c4852;
  --m3e-sys-color-inverse-surface: #dde3ea;
  --m3e-sys-color-inverse-on-surface: #2c3136;
  --m3e-sys-color-inverse-primary: #006590;
}

:root[data-accent="ember"] {
  --m3e-sys-color-primary: #934b00;
  --m3e-sys-color-on-primary: #ffffff;
  --m3e-sys-color-primary-container: #ffdcc4;
  --m3e-sys-color-on-primary-container: #703800;
  --m3e-sys-color-secondary: #765843;
  --m3e-sys-color-on-secondary: #ffffff;
  --m3e-sys-color-secondary-container: #ffdcc4;
  --m3e-sys-color-on-secondary-container: #5c412d;
  --m3e-sys-color-tertiary: #536435;
  --m3e-sys-color-on-tertiary: #ffffff;
  --m3e-sys-color-tertiary-container: #d7eab3;
  --m3e-sys-color-on-tertiary-container: #3b4c1f;
  --m3e-sys-color-background: #fff8f3;
  --m3e-sys-color-on-background: #201a17;
  --m3e-sys-color-surface: #fff8f3;
  --m3e-sys-color-surface-container-lowest: #ffffff;
  --m3e-sys-color-surface-container-low: #faf2ed;
  --m3e-sys-color-surface-container: #f5ece7;
  --m3e-sys-color-surface-container-high: #efe7e1;
  --m3e-sys-color-surface-container-highest: #e9e1dc;
  --m3e-sys-color-on-surface: #201a17;
  --m3e-sys-color-on-surface-variant: #51443c;
  --m3e-sys-color-outline: #82746b;
  --m3e-sys-color-outline-variant: #d3c4b9;
  --m3e-sys-color-inverse-surface: #352f2b;
  --m3e-sys-color-inverse-on-surface: #f7efea;
  --m3e-sys-color-inverse-primary: #ffb781;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="ember"]:not([data-theme="light"]) {
    color-scheme: dark;
    --m3e-sys-color-primary: #ffb781;
    --m3e-sys-color-on-primary: #4d2600;
    --m3e-sys-color-primary-container: #703800;
    --m3e-sys-color-on-primary-container: #ffdcc4;
    --m3e-sys-color-secondary: #e3c0a7;
    --m3e-sys-color-on-secondary: #442b18;
    --m3e-sys-color-secondary-container: #5c412d;
    --m3e-sys-color-on-secondary-container: #ffdcc4;
    --m3e-sys-color-tertiary: #bbcd98;
    --m3e-sys-color-on-tertiary: #243508;
    --m3e-sys-color-tertiary-container: #3b4c1f;
    --m3e-sys-color-on-tertiary-container: #d7eab3;
    --m3e-sys-color-background: #18120d;
    --m3e-sys-color-on-background: #e9e1dc;
    --m3e-sys-color-surface: #18120d;
    --m3e-sys-color-surface-container-lowest: #140d06;
    --m3e-sys-color-surface-container-low: #201a17;
    --m3e-sys-color-surface-container: #241e1b;
    --m3e-sys-color-surface-container-high: #2f2925;
    --m3e-sys-color-surface-container-highest: #3a3430;
    --m3e-sys-color-on-surface: #e9e1dc;
    --m3e-sys-color-on-surface-variant: #d3c4b9;
    --m3e-sys-color-outline: #9c8e84;
    --m3e-sys-color-outline-variant: #51443c;
    --m3e-sys-color-inverse-surface: #e9e1dc;
    --m3e-sys-color-inverse-on-surface: #352f2b;
    --m3e-sys-color-inverse-primary: #934b00;
  }
}

:root[data-accent="ember"][data-theme="dark"] {
  color-scheme: dark;
  --m3e-sys-color-primary: #ffb781;
  --m3e-sys-color-on-primary: #4d2600;
  --m3e-sys-color-primary-container: #703800;
  --m3e-sys-color-on-primary-container: #ffdcc4;
  --m3e-sys-color-secondary: #e3c0a7;
  --m3e-sys-color-on-secondary: #442b18;
  --m3e-sys-color-secondary-container: #5c412d;
  --m3e-sys-color-on-secondary-container: #ffdcc4;
  --m3e-sys-color-tertiary: #bbcd98;
  --m3e-sys-color-on-tertiary: #243508;
  --m3e-sys-color-tertiary-container: #3b4c1f;
  --m3e-sys-color-on-tertiary-container: #d7eab3;
  --m3e-sys-color-background: #18120d;
  --m3e-sys-color-on-background: #e9e1dc;
  --m3e-sys-color-surface: #18120d;
  --m3e-sys-color-surface-container-lowest: #140d06;
  --m3e-sys-color-surface-container-low: #201a17;
  --m3e-sys-color-surface-container: #241e1b;
  --m3e-sys-color-surface-container-high: #2f2925;
  --m3e-sys-color-surface-container-highest: #3a3430;
  --m3e-sys-color-on-surface: #e9e1dc;
  --m3e-sys-color-on-surface-variant: #d3c4b9;
  --m3e-sys-color-outline: #9c8e84;
  --m3e-sys-color-outline-variant: #51443c;
  --m3e-sys-color-inverse-surface: #e9e1dc;
  --m3e-sys-color-inverse-on-surface: #352f2b;
  --m3e-sys-color-inverse-primary: #934b00;
}

:root[data-accent="rose"] {
  --m3e-sys-color-primary: #a53460;
  --m3e-sys-color-on-primary: #ffffff;
  --m3e-sys-color-primary-container: #ffd9e3;
  --m3e-sys-color-on-primary-container: #881448;
  --m3e-sys-color-secondary: #78545f;
  --m3e-sys-color-on-secondary: #ffffff;
  --m3e-sys-color-secondary-container: #ffd9e3;
  --m3e-sys-color-on-secondary-container: #5f3d47;
  --m3e-sys-color-tertiary: #7c563b;
  --m3e-sys-color-on-tertiary: #ffffff;
  --m3e-sys-color-tertiary-container: #ffdcc5;
  --m3e-sys-color-on-tertiary-container: #623f25;
  --m3e-sys-color-background: #fff7f9;
  --m3e-sys-color-on-background: #211a1c;
  --m3e-sys-color-surface: #fff7f9;
  --m3e-sys-color-surface-container-lowest: #ffffff;
  --m3e-sys-color-surface-container-low: #fcf1f4;
  --m3e-sys-color-surface-container: #f6ebee;
  --m3e-sys-color-surface-container-high: #f0e6e8;
  --m3e-sys-color-surface-container-highest: #eae0e2;
  --m3e-sys-color-on-surface: #211a1c;
  --m3e-sys-color-on-surface-variant: #534247;
  --m3e-sys-color-outline: #857277;
  --m3e-sys-color-outline-variant: #d6c1c7;
  --m3e-sys-color-inverse-surface: #362e30;
  --m3e-sys-color-inverse-on-surface: #f9eef1;
  --m3e-sys-color-inverse-primary: #ffb0c7;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="rose"]:not([data-theme="light"]) {
    color-scheme: dark;
    --m3e-sys-color-primary: #ffb0c7;
    --m3e-sys-color-on-primary: #650032;
    --m3e-sys-color-primary-container: #881448;
    --m3e-sys-color-on-primary-container: #ffd9e3;
    --m3e-sys-color-secondary: #e5bcc7;
    --m3e-sys-color-on-secondary: #472731;
    --m3e-sys-color-secondary-container: #5f3d47;
    --m3e-sys-color-on-secondary-container: #ffd9e3;
    --m3e-sys-color-tertiary: #ecbd9f;
    --m3e-sys-color-on-tertiary: #492910;
    --m3e-sys-color-tertiary-container: #623f25;
    --m3e-sys-color-on-tertiary-container: #ffdcc5;
    --m3e-sys-color-background: #191113;
    --m3e-sys-color-on-background: #eae0e2;
    --m3e-sys-color-surface: #191113;
    --m3e-sys-color-surface-container-lowest: #150b0e;
    --m3e-sys-color-surface-container-low: #211a1c;
    --m3e-sys-color-surface-container: #251e20;
    --m3e-sys-color-surface-container-high: #30282a;
    --m3e-sys-color-surface-container-highest: #3b3335;
    --m3e-sys-color-on-surface: #eae0e2;
    --m3e-sys-color-on-surface-variant: #d6c1c7;
    --m3e-sys-color-outline: #9f8c91;
    --m3e-sys-color-outline-variant: #534247;
    --m3e-sys-color-inverse-surface: #eae0e2;
    --m3e-sys-color-inverse-on-surface: #362e30;
    --m3e-sys-color-inverse-primary: #a53460;
  }
}

:root[data-accent="rose"][data-theme="dark"] {
  color-scheme: dark;
  --m3e-sys-color-primary: #ffb0c7;
  --m3e-sys-color-on-primary: #650032;
  --m3e-sys-color-primary-container: #881448;
  --m3e-sys-color-on-primary-container: #ffd9e3;
  --m3e-sys-color-secondary: #e5bcc7;
  --m3e-sys-color-on-secondary: #472731;
  --m3e-sys-color-secondary-container: #5f3d47;
  --m3e-sys-color-on-secondary-container: #ffd9e3;
  --m3e-sys-color-tertiary: #ecbd9f;
  --m3e-sys-color-on-tertiary: #492910;
  --m3e-sys-color-tertiary-container: #623f25;
  --m3e-sys-color-on-tertiary-container: #ffdcc5;
  --m3e-sys-color-background: #191113;
  --m3e-sys-color-on-background: #eae0e2;
  --m3e-sys-color-surface: #191113;
  --m3e-sys-color-surface-container-lowest: #150b0e;
  --m3e-sys-color-surface-container-low: #211a1c;
  --m3e-sys-color-surface-container: #251e20;
  --m3e-sys-color-surface-container-high: #30282a;
  --m3e-sys-color-surface-container-highest: #3b3335;
  --m3e-sys-color-on-surface: #eae0e2;
  --m3e-sys-color-on-surface-variant: #d6c1c7;
  --m3e-sys-color-outline: #9f8c91;
  --m3e-sys-color-outline-variant: #534247;
  --m3e-sys-color-inverse-surface: #eae0e2;
  --m3e-sys-color-inverse-on-surface: #362e30;
  --m3e-sys-color-inverse-primary: #a53460;
}