@atom-learning/components 12.0.0-beta.2 → 12.0.0-beta.3

package/src/color-theme.css

@@ -0,0 +1,1534 @@
+/* Generated by scripts/generate-color-theme-css.mjs — do not edit by hand. */
+
+/* Registers the semantic colours as Tailwind utilities (bg-surface, text-accent-text…)
+   without emitting them on :root; the real values are declared below. */
+@theme reference {
+  --color-base-1: transparent;
+  --color-base-2: transparent;
+  --color-base-3: transparent;
+  --color-base-4: transparent;
+  --color-base-5: transparent;
+  --color-base-6: transparent;
+  --color-base-7: transparent;
+  --color-base-8: transparent;
+  --color-base-9: transparent;
+  --color-base-10: transparent;
+  --color-base-11: transparent;
+  --color-base-12: transparent;
+  --color-accent-1: transparent;
+  --color-accent-2: transparent;
+  --color-accent-3: transparent;
+  --color-accent-4: transparent;
+  --color-accent-5: transparent;
+  --color-accent-6: transparent;
+  --color-accent-7: transparent;
+  --color-accent-8: transparent;
+  --color-accent-9: transparent;
+  --color-accent-10: transparent;
+  --color-accent-11: transparent;
+  --color-accent-12: transparent;
+  --color-accent-contrast: transparent;
+  --color-surface: transparent;
+  --color-surface-hover: transparent;
+  --color-surface-active: transparent;
+  --color-border-subtle: transparent;
+  --color-border: transparent;
+  --color-border-strong: transparent;
+  --color-accent-subtle: transparent;
+  --color-accent-subtle-hover: transparent;
+  --color-accent-border: transparent;
+  --color-accent-solid: transparent;
+  --color-accent-solid-hover: transparent;
+  --color-accent-solid-active: transparent;
+  --color-accent-text: transparent;
+  --background-color-page: transparent;
+  --background-color-surface: transparent;
+  --background-color-surface-hover: transparent;
+  --background-color-hover: transparent;
+  --background-color-active: transparent;
+  --background-color-inset: transparent;
+  --background-color-input: transparent;
+  --border-color-subtlest: transparent;
+  --border-color-subtle: transparent;
+  --border-color-default: transparent;
+  --text-color-subtlest: transparent;
+  --text-color-subtle: transparent;
+  --text-color-default: transparent;
+  --text-color-icon: transparent;
+  --text-color-icon-subtle: transparent;
+  --text-color-link: transparent;
+  --text-color-link-hover: transparent;
+  --text-color-link-visited: transparent;
+  --background-color-selection: transparent;
+  --background-color-highlight: transparent;
+  --background-color-neutral: transparent;
+  --background-color-neutral-solid: transparent;
+  --background-color-neutral-solid-hover: transparent;
+  --border-color-neutral-solid: transparent;
+  --border-color-strong: transparent;
+  --outline-color-focus: transparent;
+  --border-color-focus: transparent;
+  --outline-color-focus-inverse: transparent;
+  --text-color-accent-hover: transparent;
+  --text-color-accent-active: transparent;
+  --background-color-accent-subtle: transparent;
+  --background-color-accent-subtle-hover: transparent;
+  --background-color-accent-subtle-active: transparent;
+  --background-color-accent-muted: transparent;
+  --background-color-accent-muted-hover: transparent;
+  --background-color-accent-muted-active: transparent;
+  --background-color-accent-emphasis: transparent;
+  --text-color-on-accent-emphasis: transparent;
+  --background-color-accent-solid: transparent;
+  --background-color-accent-solid-hover: transparent;
+  --background-color-accent-solid-active: transparent;
+  --border-color-accent: transparent;
+  --border-color-accent-solid: transparent;
+  --outline-color-accent: transparent;
+  --text-color-accent: transparent;
+  --text-color-on-accent-subtle: transparent;
+  --text-color-on-accent: transparent;
+  --background-color-success-subtle: transparent;
+  --background-color-success-subtle-hover: transparent;
+  --background-color-success-subtle-active: transparent;
+  --background-color-success-muted: transparent;
+  --background-color-success-muted-hover: transparent;
+  --background-color-success-muted-active: transparent;
+  --background-color-success-emphasis: transparent;
+  --text-color-on-success-emphasis: transparent;
+  --background-color-success-solid: transparent;
+  --background-color-success-solid-hover: transparent;
+  --background-color-success-solid-active: transparent;
+  --border-color-success: transparent;
+  --border-color-success-solid: transparent;
+  --outline-color-success: transparent;
+  --text-color-success: transparent;
+  --text-color-on-success-subtle: transparent;
+  --text-color-on-success: transparent;
+  --background-color-danger-subtle: transparent;
+  --background-color-danger-subtle-hover: transparent;
+  --background-color-danger-subtle-active: transparent;
+  --background-color-danger-muted: transparent;
+  --background-color-danger-muted-hover: transparent;
+  --background-color-danger-muted-active: transparent;
+  --background-color-danger-emphasis: transparent;
+  --text-color-on-danger-emphasis: transparent;
+  --background-color-danger-solid: transparent;
+  --background-color-danger-solid-hover: transparent;
+  --background-color-danger-solid-active: transparent;
+  --border-color-danger: transparent;
+  --border-color-danger-solid: transparent;
+  --outline-color-danger: transparent;
+  --text-color-danger: transparent;
+  --text-color-on-danger-subtle: transparent;
+  --text-color-on-danger: transparent;
+  --background-color-warning-subtle: transparent;
+  --background-color-warning-subtle-hover: transparent;
+  --background-color-warning-subtle-active: transparent;
+  --background-color-warning-muted: transparent;
+  --background-color-warning-muted-hover: transparent;
+  --background-color-warning-muted-active: transparent;
+  --background-color-warning-emphasis: transparent;
+  --text-color-on-warning-emphasis: transparent;
+  --background-color-warning-solid: transparent;
+  --background-color-warning-solid-hover: transparent;
+  --background-color-warning-solid-active: transparent;
+  --border-color-warning: transparent;
+  --border-color-warning-solid: transparent;
+  --outline-color-warning: transparent;
+  --text-color-warning: transparent;
+  --text-color-on-warning-subtle: transparent;
+  --text-color-on-warning: transparent;
+  --background-color-info-subtle: transparent;
+  --background-color-info-subtle-hover: transparent;
+  --background-color-info-subtle-active: transparent;
+  --background-color-info-muted: transparent;
+  --background-color-info-muted-hover: transparent;
+  --background-color-info-muted-active: transparent;
+  --background-color-info-emphasis: transparent;
+  --text-color-on-info-emphasis: transparent;
+  --background-color-info-solid: transparent;
+  --background-color-info-solid-hover: transparent;
+  --background-color-info-solid-active: transparent;
+  --border-color-info: transparent;
+  --border-color-info-solid: transparent;
+  --outline-color-info: transparent;
+  --text-color-info: transparent;
+  --text-color-on-info-subtle: transparent;
+  --text-color-on-info: transparent;
+  --background-color-surface-overlay: transparent;
+  --background-color-inverse: transparent;
+  --text-color-on-inverse: transparent;
+  --border-color-overlay: transparent;
+  --background-color-scrim: transparent;
+}
+
+/* Correct for page-level dark, a dark area inside light, and light inside that;
+   a 4th alternating level (dark > light > dark) loses its dark: styles.
+   Container style queries fix this once iOS 18 is the minimum. */
+@custom-variant dark {
+  &:where([data-color-scheme='dark'], [data-color-scheme='dark'] *):not(:where([data-color-scheme='dark'] [data-color-scheme='light'], [data-color-scheme='dark'] [data-color-scheme='light'] *)) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:where([data-color-scheme='system'], [data-color-scheme='system'] *):not(:where([data-color-scheme='system'] [data-color-scheme='light'], [data-color-scheme='system'] [data-color-scheme='light'] *)) {
+      @slot;
+    }
+  }
+}
+
+@layer base {
+  :root, [data-color-scheme='light'], [data-color-scheme='system'] {
+    color-scheme: light;
+    --scheme-dark: initial;
+    --scheme-light:  ;
+  }
+  [data-color-scheme='dark'] {
+    color-scheme: dark;
+    --scheme-dark:  ;
+    --scheme-light: initial;
+  }
+  @media (prefers-color-scheme: dark) {
+    [data-color-scheme='system'] {
+      color-scheme: dark;
+      --scheme-dark:  ;
+      --scheme-light: initial;
+    }
+  }
+
+  :root, [data-brand='atom'] {
+    --brand-light-1: var(--color-white);
+    --brand-light-2: var(--color-blue-100);
+    --brand-light-3: var(--color-blue-200);
+    --brand-light-4: var(--color-blue-300);
+    --brand-light-5: var(--color-blue-400);
+    --brand-light-6: var(--color-blue-500);
+    --brand-light-7: var(--color-blue-600);
+    --brand-light-8: var(--color-blue-700);
+    --brand-light-9: var(--color-blue-800);
+    --brand-light-10: var(--color-blue-900);
+    --brand-light-11: var(--color-blue-1000);
+    --brand-light-12: var(--color-blue-1100);
+    --brand-dark-1: #0d1520;
+    --brand-dark-2: #111927;
+    --brand-dark-3: #0d2847;
+    --brand-dark-4: #003362;
+    --brand-dark-5: #004074;
+    --brand-dark-6: #104d87;
+    --brand-dark-7: #205d9e;
+    --brand-dark-8: #2870bd;
+    --brand-dark-9: #0090ff;
+    --brand-dark-10: #3b9eff;
+    --brand-dark-11: #70b8ff;
+    --brand-dark-12: #c2e6ff;
+    --brand-contrast-light: white;
+    --brand-contrast-dark: white;
+    --brand-text-light: var(--color-blue-800);
+    --brand-text-dark: #70b8ff;
+  }
+
+  [data-brand='school'] {
+    --brand-light-1: var(--color-white);
+    --brand-light-2: hsl(228, 60%, 97%);
+    --brand-light-3: hsl(228, 55%, 94%);
+    --brand-light-4: hsl(228, 50%, 89%);
+    --brand-light-5: hsl(228, 48%, 82%);
+    --brand-light-6: hsl(228, 45%, 72%);
+    --brand-light-7: hsl(228, 45%, 60%);
+    --brand-light-8: hsl(228, 50%, 47%);
+    --brand-light-9: hsl(228, 82%, 35%);
+    --brand-light-10: hsl(228, 63%, 28%);
+    --brand-light-11: hsl(228, 63%, 23%);
+    --brand-light-12: hsl(228, 57%, 11%);
+    --brand-dark-1: #11131f;
+    --brand-dark-2: #141726;
+    --brand-dark-3: #182449;
+    --brand-dark-4: #1d2e62;
+    --brand-dark-5: #253974;
+    --brand-dark-6: #304384;
+    --brand-dark-7: #3a4f97;
+    --brand-dark-8: #435db1;
+    --brand-dark-9: #3e63dd;
+    --brand-dark-10: #5472e4;
+    --brand-dark-11: #9eb1ff;
+    --brand-dark-12: #d6e1ff;
+    --brand-contrast-light: white;
+    --brand-contrast-dark: white;
+    --brand-text-light: hsl(228, 82%, 35%);
+    --brand-text-dark: #9eb1ff;
+  }
+
+  [data-brand='quest'] {
+    --brand-light-1: var(--color-white);
+    --brand-light-2: hsl(151, 70%, 96%);
+    --brand-light-3: hsl(151, 62%, 92%);
+    --brand-light-4: hsl(151, 53%, 83%);
+    --brand-light-5: hsl(151, 50%, 75%);
+    --brand-light-6: hsl(151, 46%, 64%);
+    --brand-light-7: hsl(158, 42%, 49%);
+    --brand-light-8: hsl(162, 51%, 35%);
+    --brand-light-9: hsl(162, 69%, 28%);
+    --brand-light-10: hsl(164, 100%, 15%);
+    --brand-light-11: hsl(164, 100%, 13%);
+    --brand-light-12: hsl(150, 34%, 15%);
+    --brand-dark-1: #0d1512;
+    --brand-dark-2: #121c18;
+    --brand-dark-3: #0f2e22;
+    --brand-dark-4: #0b3b2c;
+    --brand-dark-5: #114837;
+    --brand-dark-6: #1b5745;
+    --brand-dark-7: #246854;
+    --brand-dark-8: #2a7e68;
+    --brand-dark-9: #29a383;
+    --brand-dark-10: #27b08b;
+    --brand-dark-11: #1fd8a4;
+    --brand-dark-12: #adf0d4;
+    --brand-contrast-light: white;
+    --brand-contrast-dark: white;
+    --brand-text-light: hsl(162, 69%, 28%);
+    --brand-text-dark: #1fd8a4;
+  }
+
+  /* A brand scope starts from its own default palette, since it may not offer
+     an ancestor's; a palette on the same element wins, as it comes later. */
+  :root, [data-brand], [data-color-palette='default'] {
+    --base-light-1: var(--color-white);
+    --base-light-2: var(--color-grey-100);
+    --base-light-3: var(--color-grey-200);
+    --base-light-4: var(--color-grey-300);
+    --base-light-5: var(--color-grey-400);
+    --base-light-6: var(--color-grey-500);
+    --base-light-7: var(--color-grey-600);
+    --base-light-8: var(--color-grey-700);
+    --base-light-9: var(--color-grey-800);
+    --base-light-10: var(--color-grey-900);
+    --base-light-11: var(--color-grey-1000);
+    --base-light-12: var(--color-grey-1100);
+    --base-dark-1: #111111;
+    --base-dark-2: #191919;
+    --base-dark-3: #222222;
+    --base-dark-4: #2a2a2a;
+    --base-dark-5: #313131;
+    --base-dark-6: #3a3a3a;
+    --base-dark-7: #484848;
+    --base-dark-8: #606060;
+    --base-dark-9: #6e6e6e;
+    --base-dark-10: #7b7b7b;
+    --base-dark-11: #b4b4b4;
+    --base-dark-12: #eeeeee;
+    --base-light-a3: rgb(0 0 0 / 0.078);
+    --base-dark-a3: rgb(255 255 255 / 0.071);
+    --base-light-a4: rgb(0 0 0 / 0.122);
+    --base-dark-a4: rgb(255 255 255 / 0.105);
+    --accent-light-1: var(--brand-light-1);
+    --accent-light-2: var(--brand-light-2);
+    --accent-light-3: var(--brand-light-3);
+    --accent-light-4: var(--brand-light-4);
+    --accent-light-5: var(--brand-light-5);
+    --accent-light-6: var(--brand-light-6);
+    --accent-light-7: var(--brand-light-7);
+    --accent-light-8: var(--brand-light-8);
+    --accent-light-9: var(--brand-light-9);
+    --accent-light-10: var(--brand-light-10);
+    --accent-light-11: var(--brand-light-11);
+    --accent-light-12: var(--brand-light-12);
+    --accent-dark-1: var(--brand-dark-1);
+    --accent-dark-2: var(--brand-dark-2);
+    --accent-dark-3: var(--brand-dark-3);
+    --accent-dark-4: var(--brand-dark-4);
+    --accent-dark-5: var(--brand-dark-5);
+    --accent-dark-6: var(--brand-dark-6);
+    --accent-dark-7: var(--brand-dark-7);
+    --accent-dark-8: var(--brand-dark-8);
+    --accent-dark-9: var(--brand-dark-9);
+    --accent-dark-10: var(--brand-dark-10);
+    --accent-dark-11: var(--brand-dark-11);
+    --accent-dark-12: var(--brand-dark-12);
+    --accent-contrast-light: var(--brand-contrast-light);
+    --accent-contrast-dark: var(--brand-contrast-dark);
+    --accent-text-light: var(--brand-text-light);
+    --accent-text-dark: var(--brand-text-dark);
+  }
+
+  [data-color-palette='rose'] {
+    --base-light-1: var(--color-white);
+    --base-light-2: var(--color-pink-100);
+    --base-light-3: var(--color-pink-200);
+    --base-light-4: var(--color-pink-300);
+    --base-light-5: var(--color-pink-400);
+    --base-light-6: var(--color-pink-500);
+    --base-light-7: var(--color-pink-600);
+    --base-light-8: var(--color-pink-700);
+    --base-light-9: var(--color-pink-800);
+    --base-light-10: var(--color-pink-900);
+    --base-light-11: var(--color-pink-1000);
+    --base-light-12: var(--color-pink-1100);
+    --base-dark-1: #191117;
+    --base-dark-2: #21121d;
+    --base-dark-3: #37172f;
+    --base-dark-4: #4b143d;
+    --base-dark-5: #591c47;
+    --base-dark-6: #692955;
+    --base-dark-7: #833869;
+    --base-dark-8: #a84885;
+    --base-dark-9: #d6409f;
+    --base-dark-10: #de51a8;
+    --base-dark-11: #ff8dcc;
+    --base-dark-12: #fdd1ea;
+    --base-light-a3: rgb(255 0 216 / 0.102);
+    --base-dark-a3: rgb(255 63 207 / 0.130);
+    --base-light-a4: rgb(255 0 210 / 0.200);
+    --base-dark-a4: rgb(255 31 198 / 0.217);
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-pink-100);
+    --accent-light-3: var(--color-pink-200);
+    --accent-light-4: var(--color-pink-300);
+    --accent-light-5: var(--color-pink-400);
+    --accent-light-6: var(--color-pink-500);
+    --accent-light-7: var(--color-pink-600);
+    --accent-light-8: var(--color-pink-700);
+    --accent-light-9: var(--color-pink-800);
+    --accent-light-10: var(--color-pink-900);
+    --accent-light-11: var(--color-pink-1000);
+    --accent-light-12: var(--color-pink-1100);
+    --accent-dark-1: #191117;
+    --accent-dark-2: #21121d;
+    --accent-dark-3: #37172f;
+    --accent-dark-4: #4b143d;
+    --accent-dark-5: #591c47;
+    --accent-dark-6: #692955;
+    --accent-dark-7: #833869;
+    --accent-dark-8: #a84885;
+    --accent-dark-9: #d6409f;
+    --accent-dark-10: #de51a8;
+    --accent-dark-11: #ff8dcc;
+    --accent-dark-12: #fdd1ea;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-pink-800);
+    --accent-text-dark: #ff8dcc;
+  }
+
+  [data-color-palette='sage'] {
+    --base-light-1: var(--color-white);
+    --base-light-2: var(--color-marsh-100);
+    --base-light-3: var(--color-marsh-200);
+    --base-light-4: var(--color-marsh-300);
+    --base-light-5: var(--color-marsh-400);
+    --base-light-6: var(--color-marsh-500);
+    --base-light-7: var(--color-marsh-600);
+    --base-light-8: var(--color-marsh-700);
+    --base-light-9: var(--color-marsh-800);
+    --base-light-10: var(--color-marsh-900);
+    --base-light-11: var(--color-marsh-1000);
+    --base-light-12: var(--color-marsh-1100);
+    --base-dark-1: #0e1511;
+    --base-dark-2: #141a15;
+    --base-dark-3: #1b2a1e;
+    --base-dark-4: #1d3a24;
+    --base-dark-5: #25482d;
+    --base-dark-6: #2d5736;
+    --base-dark-7: #366740;
+    --base-dark-8: #3e7949;
+    --base-dark-9: #46a758;
+    --base-dark-10: #53b365;
+    --base-dark-11: #71d083;
+    --base-dark-12: #c2f0c2;
+    --base-light-a3: rgb(0 111 52 / 0.153);
+    --base-dark-a3: rgb(159 255 162 / 0.090);
+    --base-light-a4: rgb(0 106 48 / 0.227);
+    --base-dark-a4: rgb(109 255 137 / 0.158);
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-marsh-100);
+    --accent-light-3: var(--color-marsh-200);
+    --accent-light-4: var(--color-marsh-300);
+    --accent-light-5: var(--color-marsh-400);
+    --accent-light-6: var(--color-marsh-500);
+    --accent-light-7: var(--color-marsh-600);
+    --accent-light-8: var(--color-marsh-700);
+    --accent-light-9: var(--color-marsh-800);
+    --accent-light-10: var(--color-marsh-900);
+    --accent-light-11: var(--color-marsh-1000);
+    --accent-light-12: var(--color-marsh-1100);
+    --accent-dark-1: #0e1511;
+    --accent-dark-2: #141a15;
+    --accent-dark-3: #1b2a1e;
+    --accent-dark-4: #1d3a24;
+    --accent-dark-5: #25482d;
+    --accent-dark-6: #2d5736;
+    --accent-dark-7: #366740;
+    --accent-dark-8: #3e7949;
+    --accent-dark-9: #46a758;
+    --accent-dark-10: #53b365;
+    --accent-dark-11: #71d083;
+    --accent-dark-12: #c2f0c2;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-marsh-800);
+    --accent-text-dark: #71d083;
+  }
+
+  :root {
+    --success-light-1: var(--color-white);
+    --success-light-2: var(--color-success-light);
+    --success-light-3: var(--color-green-200);
+    --success-light-4: var(--color-green-300);
+    --success-light-5: var(--color-green-400);
+    --success-light-6: var(--color-green-500);
+    --success-light-7: var(--color-green-600);
+    --success-light-8: var(--color-green-700);
+    --success-light-9: var(--color-success);
+    --success-light-10: var(--color-success-mid);
+    --success-light-11: var(--color-success-dark);
+    --success-light-12: var(--color-green-1100);
+    --success-dark-1: #0e1512;
+    --success-dark-2: #121b17;
+    --success-dark-3: #132d21;
+    --success-dark-4: #113b29;
+    --success-dark-5: #174933;
+    --success-dark-6: #20573e;
+    --success-dark-7: #28684a;
+    --success-dark-8: #2f7c57;
+    --success-dark-9: #30a46c;
+    --success-dark-10: #33b074;
+    --success-dark-11: #3dd68c;
+    --success-dark-12: #b1f1cb;
+    --success-contrast-light: white;
+    --success-contrast-dark: white;
+    --success-text-light: var(--color-success);
+    --success-text-dark: #3dd68c;
+    --danger-light-1: var(--color-white);
+    --danger-light-2: var(--color-danger-light);
+    --danger-light-3: var(--color-red-200);
+    --danger-light-4: var(--color-red-300);
+    --danger-light-5: var(--color-red-400);
+    --danger-light-6: var(--color-red-500);
+    --danger-light-7: var(--color-red-600);
+    --danger-light-8: var(--color-red-700);
+    --danger-light-9: var(--color-danger);
+    --danger-light-10: var(--color-danger-mid);
+    --danger-light-11: var(--color-danger-dark);
+    --danger-light-12: var(--color-red-1100);
+    --danger-dark-1: #191111;
+    --danger-dark-2: #201314;
+    --danger-dark-3: #3b1219;
+    --danger-dark-4: #500f1c;
+    --danger-dark-5: #611623;
+    --danger-dark-6: #72232d;
+    --danger-dark-7: #8c333a;
+    --danger-dark-8: #b54548;
+    --danger-dark-9: #e5484d;
+    --danger-dark-10: #ec5d5e;
+    --danger-dark-11: #ff9592;
+    --danger-dark-12: #ffd1d9;
+    --danger-contrast-light: white;
+    --danger-contrast-dark: white;
+    --danger-text-light: var(--color-danger);
+    --danger-text-dark: #ff9592;
+    --warning-light-1: var(--color-white);
+    --warning-light-2: var(--color-warning-light);
+    --warning-light-3: var(--color-orange-200);
+    --warning-light-4: var(--color-orange-300);
+    --warning-light-5: var(--color-orange-400);
+    --warning-light-6: var(--color-orange-500);
+    --warning-light-7: var(--color-orange-600);
+    --warning-light-8: var(--color-orange-700);
+    --warning-light-9: var(--color-warning);
+    --warning-light-10: var(--color-warning-mid);
+    --warning-light-11: var(--color-warning-dark);
+    --warning-light-12: var(--color-orange-1100);
+    --warning-dark-1: #16120c;
+    --warning-dark-2: #1d180f;
+    --warning-dark-3: #302008;
+    --warning-dark-4: #3f2700;
+    --warning-dark-5: #4d3000;
+    --warning-dark-6: #5c3d05;
+    --warning-dark-7: #714f19;
+    --warning-dark-8: #8f6424;
+    --warning-dark-9: #ffc53d;
+    --warning-dark-10: #ffd60a;
+    --warning-dark-11: #ffca16;
+    --warning-dark-12: #ffe7b3;
+    --warning-contrast-light: var(--color-grey-800);
+    --warning-contrast-dark: white;
+    --warning-text-light: var(--color-warning-text);
+    --warning-text-dark: #ffca16;
+    --info-light-1: var(--color-white);
+    --info-light-2: var(--color-info-light);
+    --info-light-3: var(--color-blue-200);
+    --info-light-4: var(--color-blue-300);
+    --info-light-5: var(--color-blue-400);
+    --info-light-6: var(--color-blue-500);
+    --info-light-7: var(--color-blue-600);
+    --info-light-8: var(--color-blue-700);
+    --info-light-9: var(--color-info);
+    --info-light-10: var(--color-info-mid);
+    --info-light-11: var(--color-info-dark);
+    --info-light-12: var(--color-blue-1100);
+    --info-dark-1: #0d1520;
+    --info-dark-2: #111927;
+    --info-dark-3: #0d2847;
+    --info-dark-4: #003362;
+    --info-dark-5: #004074;
+    --info-dark-6: #104d87;
+    --info-dark-7: #205d9e;
+    --info-dark-8: #2870bd;
+    --info-dark-9: #0090ff;
+    --info-dark-10: #3b9eff;
+    --info-dark-11: #70b8ff;
+    --info-dark-12: #c2e6ff;
+    --info-contrast-light: white;
+    --info-contrast-dark: white;
+    --info-text-light: var(--color-info);
+    --info-text-dark: #70b8ff;
+    --visited-light-1: var(--color-white);
+    --visited-light-2: var(--color-purple-100);
+    --visited-light-3: var(--color-purple-200);
+    --visited-light-4: var(--color-purple-300);
+    --visited-light-5: var(--color-purple-400);
+    --visited-light-6: var(--color-purple-500);
+    --visited-light-7: var(--color-purple-600);
+    --visited-light-8: var(--color-purple-700);
+    --visited-light-9: var(--color-purple-800);
+    --visited-light-10: var(--color-purple-900);
+    --visited-light-11: var(--color-purple-1000);
+    --visited-light-12: var(--color-purple-1100);
+    --visited-dark-1: #18111b;
+    --visited-dark-2: #1e1523;
+    --visited-dark-3: #301c3b;
+    --visited-dark-4: #3d224e;
+    --visited-dark-5: #48295c;
+    --visited-dark-6: #54346b;
+    --visited-dark-7: #664282;
+    --visited-dark-8: #8457aa;
+    --visited-dark-9: #8e4ec6;
+    --visited-dark-10: #9a5cd0;
+    --visited-dark-11: #d19dff;
+    --visited-dark-12: #ecd9fa;
+    --visited-contrast-light: white;
+    --visited-contrast-dark: white;
+    --visited-text-light: var(--color-purple-800);
+    --visited-text-dark: #d19dff;
+    --neutral-light-1: var(--color-white);
+    --neutral-light-2: var(--color-grey-100);
+    --neutral-light-3: var(--color-grey-200);
+    --neutral-light-4: var(--color-grey-300);
+    --neutral-light-5: var(--color-grey-400);
+    --neutral-light-6: var(--color-grey-500);
+    --neutral-light-7: var(--color-grey-600);
+    --neutral-light-8: var(--color-grey-700);
+    --neutral-light-9: var(--color-grey-800);
+    --neutral-light-10: var(--color-grey-900);
+    --neutral-light-11: var(--color-grey-1000);
+    --neutral-light-12: var(--color-grey-1100);
+    --neutral-dark-1: #111111;
+    --neutral-dark-2: #191919;
+    --neutral-dark-3: #222222;
+    --neutral-dark-4: #2a2a2a;
+    --neutral-dark-5: #313131;
+    --neutral-dark-6: #3a3a3a;
+    --neutral-dark-7: #484848;
+    --neutral-dark-8: #606060;
+    --neutral-dark-9: #6e6e6e;
+    --neutral-dark-10: #7b7b7b;
+    --neutral-dark-11: #b4b4b4;
+    --neutral-dark-12: #eeeeee;
+    --neutral-contrast-light: white;
+    --neutral-contrast-dark: white;
+    --neutral-text-light: var(--color-grey-800);
+    --neutral-text-dark: #b4b4b4;
+  }
+
+  [data-color-accent='grey'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-grey-100);
+    --accent-light-3: var(--color-grey-200);
+    --accent-light-4: var(--color-grey-300);
+    --accent-light-5: var(--color-grey-400);
+    --accent-light-6: var(--color-grey-500);
+    --accent-light-7: var(--color-grey-600);
+    --accent-light-8: var(--color-grey-700);
+    --accent-light-9: var(--color-grey-800);
+    --accent-light-10: var(--color-grey-900);
+    --accent-light-11: var(--color-grey-1000);
+    --accent-light-12: var(--color-grey-1100);
+    --accent-dark-1: #111111;
+    --accent-dark-2: #191919;
+    --accent-dark-3: #222222;
+    --accent-dark-4: #2a2a2a;
+    --accent-dark-5: #313131;
+    --accent-dark-6: #3a3a3a;
+    --accent-dark-7: #484848;
+    --accent-dark-8: #606060;
+    --accent-dark-9: #6e6e6e;
+    --accent-dark-10: #7b7b7b;
+    --accent-dark-11: #b4b4b4;
+    --accent-dark-12: #eeeeee;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-grey-800);
+    --accent-text-dark: #b4b4b4;
+  }
+
+  [data-color-accent='blue'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-blue-100);
+    --accent-light-3: var(--color-blue-200);
+    --accent-light-4: var(--color-blue-300);
+    --accent-light-5: var(--color-blue-400);
+    --accent-light-6: var(--color-blue-500);
+    --accent-light-7: var(--color-blue-600);
+    --accent-light-8: var(--color-blue-700);
+    --accent-light-9: var(--color-blue-800);
+    --accent-light-10: var(--color-blue-900);
+    --accent-light-11: var(--color-blue-1000);
+    --accent-light-12: var(--color-blue-1100);
+    --accent-dark-1: #0d1520;
+    --accent-dark-2: #111927;
+    --accent-dark-3: #0d2847;
+    --accent-dark-4: #003362;
+    --accent-dark-5: #004074;
+    --accent-dark-6: #104d87;
+    --accent-dark-7: #205d9e;
+    --accent-dark-8: #2870bd;
+    --accent-dark-9: #0090ff;
+    --accent-dark-10: #3b9eff;
+    --accent-dark-11: #70b8ff;
+    --accent-dark-12: #c2e6ff;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-blue-800);
+    --accent-text-dark: #70b8ff;
+  }
+
+  [data-color-accent='pink'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-pink-100);
+    --accent-light-3: var(--color-pink-200);
+    --accent-light-4: var(--color-pink-300);
+    --accent-light-5: var(--color-pink-400);
+    --accent-light-6: var(--color-pink-500);
+    --accent-light-7: var(--color-pink-600);
+    --accent-light-8: var(--color-pink-700);
+    --accent-light-9: var(--color-pink-800);
+    --accent-light-10: var(--color-pink-900);
+    --accent-light-11: var(--color-pink-1000);
+    --accent-light-12: var(--color-pink-1100);
+    --accent-dark-1: #191117;
+    --accent-dark-2: #21121d;
+    --accent-dark-3: #37172f;
+    --accent-dark-4: #4b143d;
+    --accent-dark-5: #591c47;
+    --accent-dark-6: #692955;
+    --accent-dark-7: #833869;
+    --accent-dark-8: #a84885;
+    --accent-dark-9: #d6409f;
+    --accent-dark-10: #de51a8;
+    --accent-dark-11: #ff8dcc;
+    --accent-dark-12: #fdd1ea;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-pink-800);
+    --accent-text-dark: #ff8dcc;
+  }
+
+  [data-color-accent='marsh'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-marsh-100);
+    --accent-light-3: var(--color-marsh-200);
+    --accent-light-4: var(--color-marsh-300);
+    --accent-light-5: var(--color-marsh-400);
+    --accent-light-6: var(--color-marsh-500);
+    --accent-light-7: var(--color-marsh-600);
+    --accent-light-8: var(--color-marsh-700);
+    --accent-light-9: var(--color-marsh-800);
+    --accent-light-10: var(--color-marsh-900);
+    --accent-light-11: var(--color-marsh-1000);
+    --accent-light-12: var(--color-marsh-1100);
+    --accent-dark-1: #0e1511;
+    --accent-dark-2: #141a15;
+    --accent-dark-3: #1b2a1e;
+    --accent-dark-4: #1d3a24;
+    --accent-dark-5: #25482d;
+    --accent-dark-6: #2d5736;
+    --accent-dark-7: #366740;
+    --accent-dark-8: #3e7949;
+    --accent-dark-9: #46a758;
+    --accent-dark-10: #53b365;
+    --accent-dark-11: #71d083;
+    --accent-dark-12: #c2f0c2;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-marsh-800);
+    --accent-text-dark: #71d083;
+  }
+
+  [data-color-accent='green'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-green-100);
+    --accent-light-3: var(--color-green-200);
+    --accent-light-4: var(--color-green-300);
+    --accent-light-5: var(--color-green-400);
+    --accent-light-6: var(--color-green-500);
+    --accent-light-7: var(--color-green-600);
+    --accent-light-8: var(--color-green-700);
+    --accent-light-9: var(--color-green-800);
+    --accent-light-10: var(--color-green-900);
+    --accent-light-11: var(--color-green-1000);
+    --accent-light-12: var(--color-green-1100);
+    --accent-dark-1: #0e1512;
+    --accent-dark-2: #121b17;
+    --accent-dark-3: #132d21;
+    --accent-dark-4: #113b29;
+    --accent-dark-5: #174933;
+    --accent-dark-6: #20573e;
+    --accent-dark-7: #28684a;
+    --accent-dark-8: #2f7c57;
+    --accent-dark-9: #30a46c;
+    --accent-dark-10: #33b074;
+    --accent-dark-11: #3dd68c;
+    --accent-dark-12: #b1f1cb;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-green-800);
+    --accent-text-dark: #3dd68c;
+  }
+
+  [data-color-accent='red'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-red-100);
+    --accent-light-3: var(--color-red-200);
+    --accent-light-4: var(--color-red-300);
+    --accent-light-5: var(--color-red-400);
+    --accent-light-6: var(--color-red-500);
+    --accent-light-7: var(--color-red-600);
+    --accent-light-8: var(--color-red-700);
+    --accent-light-9: var(--color-red-800);
+    --accent-light-10: var(--color-red-900);
+    --accent-light-11: var(--color-red-1000);
+    --accent-light-12: var(--color-red-1100);
+    --accent-dark-1: #191111;
+    --accent-dark-2: #201314;
+    --accent-dark-3: #3b1219;
+    --accent-dark-4: #500f1c;
+    --accent-dark-5: #611623;
+    --accent-dark-6: #72232d;
+    --accent-dark-7: #8c333a;
+    --accent-dark-8: #b54548;
+    --accent-dark-9: #e5484d;
+    --accent-dark-10: #ec5d5e;
+    --accent-dark-11: #ff9592;
+    --accent-dark-12: #ffd1d9;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-red-800);
+    --accent-text-dark: #ff9592;
+  }
+
+  [data-color-accent='purple'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-purple-100);
+    --accent-light-3: var(--color-purple-200);
+    --accent-light-4: var(--color-purple-300);
+    --accent-light-5: var(--color-purple-400);
+    --accent-light-6: var(--color-purple-500);
+    --accent-light-7: var(--color-purple-600);
+    --accent-light-8: var(--color-purple-700);
+    --accent-light-9: var(--color-purple-800);
+    --accent-light-10: var(--color-purple-900);
+    --accent-light-11: var(--color-purple-1000);
+    --accent-light-12: var(--color-purple-1100);
+    --accent-dark-1: #18111b;
+    --accent-dark-2: #1e1523;
+    --accent-dark-3: #301c3b;
+    --accent-dark-4: #3d224e;
+    --accent-dark-5: #48295c;
+    --accent-dark-6: #54346b;
+    --accent-dark-7: #664282;
+    --accent-dark-8: #8457aa;
+    --accent-dark-9: #8e4ec6;
+    --accent-dark-10: #9a5cd0;
+    --accent-dark-11: #d19dff;
+    --accent-dark-12: #ecd9fa;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-purple-800);
+    --accent-text-dark: #d19dff;
+  }
+
+  [data-color-accent='cyan'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-cyan-100);
+    --accent-light-3: var(--color-cyan-200);
+    --accent-light-4: var(--color-cyan-300);
+    --accent-light-5: var(--color-cyan-400);
+    --accent-light-6: var(--color-cyan-500);
+    --accent-light-7: var(--color-cyan-600);
+    --accent-light-8: var(--color-cyan-700);
+    --accent-light-9: var(--color-cyan-800);
+    --accent-light-10: var(--color-cyan-900);
+    --accent-light-11: var(--color-cyan-1000);
+    --accent-light-12: var(--color-cyan-1100);
+    --accent-dark-1: #0b161a;
+    --accent-dark-2: #101b20;
+    --accent-dark-3: #082c36;
+    --accent-dark-4: #003848;
+    --accent-dark-5: #004558;
+    --accent-dark-6: #045468;
+    --accent-dark-7: #12677e;
+    --accent-dark-8: #11809c;
+    --accent-dark-9: #00a2c7;
+    --accent-dark-10: #23afd0;
+    --accent-dark-11: #4ccce6;
+    --accent-dark-12: #b6ecf7;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-cyan-800);
+    --accent-text-dark: #4ccce6;
+  }
+
+  [data-color-accent='teal'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-teal-100);
+    --accent-light-3: var(--color-teal-200);
+    --accent-light-4: var(--color-teal-300);
+    --accent-light-5: var(--color-teal-400);
+    --accent-light-6: var(--color-teal-500);
+    --accent-light-7: var(--color-teal-600);
+    --accent-light-8: var(--color-teal-700);
+    --accent-light-9: var(--color-teal-800);
+    --accent-light-10: var(--color-teal-900);
+    --accent-light-11: var(--color-teal-1000);
+    --accent-light-12: var(--color-teal-1100);
+    --accent-dark-1: #0d1514;
+    --accent-dark-2: #111c1b;
+    --accent-dark-3: #0d2d2a;
+    --accent-dark-4: #023b37;
+    --accent-dark-5: #084843;
+    --accent-dark-6: #145750;
+    --accent-dark-7: #1c6961;
+    --accent-dark-8: #207e73;
+    --accent-dark-9: #12a594;
+    --accent-dark-10: #0eb39e;
+    --accent-dark-11: #0bd8b6;
+    --accent-dark-12: #adf0dd;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-teal-800);
+    --accent-text-dark: #0bd8b6;
+  }
+
+  [data-color-accent='magenta'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-magenta-100);
+    --accent-light-3: var(--color-magenta-200);
+    --accent-light-4: var(--color-magenta-300);
+    --accent-light-5: var(--color-magenta-400);
+    --accent-light-6: var(--color-magenta-500);
+    --accent-light-7: var(--color-magenta-600);
+    --accent-light-8: var(--color-magenta-700);
+    --accent-light-9: var(--color-magenta-800);
+    --accent-light-10: var(--color-magenta-900);
+    --accent-light-11: var(--color-magenta-1000);
+    --accent-light-12: var(--color-magenta-1100);
+    --accent-dark-1: #181118;
+    --accent-dark-2: #201320;
+    --accent-dark-3: #351a35;
+    --accent-dark-4: #451d47;
+    --accent-dark-5: #512454;
+    --accent-dark-6: #5e3061;
+    --accent-dark-7: #734079;
+    --accent-dark-8: #92549c;
+    --accent-dark-9: #ab4aba;
+    --accent-dark-10: #b658c4;
+    --accent-dark-11: #e796f3;
+    --accent-dark-12: #f4d4f4;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-magenta-800);
+    --accent-text-dark: #e796f3;
+  }
+
+  [data-color-accent='lime'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-lime-100);
+    --accent-light-3: var(--color-lime-200);
+    --accent-light-4: var(--color-lime-300);
+    --accent-light-5: var(--color-lime-400);
+    --accent-light-6: var(--color-lime-500);
+    --accent-light-7: var(--color-lime-600);
+    --accent-light-8: var(--color-lime-700);
+    --accent-light-9: var(--color-lime-800);
+    --accent-light-10: var(--color-lime-900);
+    --accent-light-11: var(--color-lime-1000);
+    --accent-light-12: var(--color-lime-1100);
+    --accent-dark-1: #11130c;
+    --accent-dark-2: #151a10;
+    --accent-dark-3: #1f2917;
+    --accent-dark-4: #29371d;
+    --accent-dark-5: #334423;
+    --accent-dark-6: #3d522a;
+    --accent-dark-7: #496231;
+    --accent-dark-8: #577538;
+    --accent-dark-9: #bdee63;
+    --accent-dark-10: #d4ff70;
+    --accent-dark-11: #bde56c;
+    --accent-dark-12: #e3f7ba;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-lime-800);
+    --accent-text-dark: #bde56c;
+  }
+
+  [data-color-accent='lapis'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-lapis-100);
+    --accent-light-3: var(--color-lapis-200);
+    --accent-light-4: var(--color-lapis-300);
+    --accent-light-5: var(--color-lapis-400);
+    --accent-light-6: var(--color-lapis-500);
+    --accent-light-7: var(--color-lapis-600);
+    --accent-light-8: var(--color-lapis-700);
+    --accent-light-9: var(--color-lapis-800);
+    --accent-light-10: var(--color-lapis-900);
+    --accent-light-11: var(--color-lapis-1000);
+    --accent-light-12: var(--color-lapis-1100);
+    --accent-dark-1: #11131f;
+    --accent-dark-2: #141726;
+    --accent-dark-3: #182449;
+    --accent-dark-4: #1d2e62;
+    --accent-dark-5: #253974;
+    --accent-dark-6: #304384;
+    --accent-dark-7: #3a4f97;
+    --accent-dark-8: #435db1;
+    --accent-dark-9: #3e63dd;
+    --accent-dark-10: #5472e4;
+    --accent-dark-11: #9eb1ff;
+    --accent-dark-12: #d6e1ff;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-lapis-800);
+    --accent-text-dark: #9eb1ff;
+  }
+
+  [data-color-accent='maroon'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-maroon-100);
+    --accent-light-3: var(--color-maroon-200);
+    --accent-light-4: var(--color-maroon-300);
+    --accent-light-5: var(--color-maroon-400);
+    --accent-light-6: var(--color-maroon-500);
+    --accent-light-7: var(--color-maroon-600);
+    --accent-light-8: var(--color-maroon-700);
+    --accent-light-9: var(--color-maroon-800);
+    --accent-light-10: var(--color-maroon-900);
+    --accent-light-11: var(--color-maroon-1000);
+    --accent-light-12: var(--color-maroon-1100);
+    --accent-dark-1: #191113;
+    --accent-dark-2: #1e1517;
+    --accent-dark-3: #3a141e;
+    --accent-dark-4: #4e1325;
+    --accent-dark-5: #5e1a2e;
+    --accent-dark-6: #6f2539;
+    --accent-dark-7: #883447;
+    --accent-dark-8: #b3445a;
+    --accent-dark-9: #e54666;
+    --accent-dark-10: #ec5a72;
+    --accent-dark-11: #ff949d;
+    --accent-dark-12: #fed2e1;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-maroon-800);
+    --accent-text-dark: #ff949d;
+  }
+
+  [data-color-accent='emerald'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-emerald-100);
+    --accent-light-3: var(--color-emerald-200);
+    --accent-light-4: var(--color-emerald-300);
+    --accent-light-5: var(--color-emerald-400);
+    --accent-light-6: var(--color-emerald-500);
+    --accent-light-7: var(--color-emerald-600);
+    --accent-light-8: var(--color-emerald-700);
+    --accent-light-9: var(--color-emerald-800);
+    --accent-light-10: var(--color-emerald-900);
+    --accent-light-11: var(--color-emerald-1000);
+    --accent-light-12: var(--color-emerald-1100);
+    --accent-dark-1: #0d1512;
+    --accent-dark-2: #121c18;
+    --accent-dark-3: #0f2e22;
+    --accent-dark-4: #0b3b2c;
+    --accent-dark-5: #114837;
+    --accent-dark-6: #1b5745;
+    --accent-dark-7: #246854;
+    --accent-dark-8: #2a7e68;
+    --accent-dark-9: #29a383;
+    --accent-dark-10: #27b08b;
+    --accent-dark-11: #1fd8a4;
+    --accent-dark-12: #adf0d4;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-emerald-800);
+    --accent-text-dark: #1fd8a4;
+  }
+
+  [data-color-accent='yellow'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-yellow-100);
+    --accent-light-3: var(--color-yellow-200);
+    --accent-light-4: var(--color-yellow-300);
+    --accent-light-5: var(--color-yellow-400);
+    --accent-light-6: var(--color-yellow-500);
+    --accent-light-7: var(--color-yellow-600);
+    --accent-light-8: var(--color-yellow-700);
+    --accent-light-9: var(--color-yellow-800);
+    --accent-light-10: var(--color-yellow-900);
+    --accent-light-11: var(--color-yellow-1000);
+    --accent-light-12: var(--color-yellow-1100);
+    --accent-dark-1: #14120b;
+    --accent-dark-2: #1b180f;
+    --accent-dark-3: #2d2305;
+    --accent-dark-4: #362b00;
+    --accent-dark-5: #433500;
+    --accent-dark-6: #524202;
+    --accent-dark-7: #665417;
+    --accent-dark-8: #836a21;
+    --accent-dark-9: #ffe629;
+    --accent-dark-10: #ffff57;
+    --accent-dark-11: #f5e147;
+    --accent-dark-12: #f6eeb4;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-yellow-800);
+    --accent-text-dark: #f5e147;
+  }
+
+  [data-color-accent='orange'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-orange-100);
+    --accent-light-3: var(--color-orange-200);
+    --accent-light-4: var(--color-orange-300);
+    --accent-light-5: var(--color-orange-400);
+    --accent-light-6: var(--color-orange-500);
+    --accent-light-7: var(--color-orange-600);
+    --accent-light-8: var(--color-orange-700);
+    --accent-light-9: var(--color-orange-800);
+    --accent-light-10: var(--color-orange-900);
+    --accent-light-11: var(--color-orange-1000);
+    --accent-light-12: var(--color-orange-1100);
+    --accent-dark-1: #16120c;
+    --accent-dark-2: #1d180f;
+    --accent-dark-3: #302008;
+    --accent-dark-4: #3f2700;
+    --accent-dark-5: #4d3000;
+    --accent-dark-6: #5c3d05;
+    --accent-dark-7: #714f19;
+    --accent-dark-8: #8f6424;
+    --accent-dark-9: #ffc53d;
+    --accent-dark-10: #ffd60a;
+    --accent-dark-11: #ffca16;
+    --accent-dark-12: #ffe7b3;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-orange-800);
+    --accent-text-dark: #ffca16;
+  }
+
+  [data-color-accent='brand'] {
+    --accent-light-1: var(--brand-light-1);
+    --accent-light-2: var(--brand-light-2);
+    --accent-light-3: var(--brand-light-3);
+    --accent-light-4: var(--brand-light-4);
+    --accent-light-5: var(--brand-light-5);
+    --accent-light-6: var(--brand-light-6);
+    --accent-light-7: var(--brand-light-7);
+    --accent-light-8: var(--brand-light-8);
+    --accent-light-9: var(--brand-light-9);
+    --accent-light-10: var(--brand-light-10);
+    --accent-light-11: var(--brand-light-11);
+    --accent-light-12: var(--brand-light-12);
+    --accent-dark-1: var(--brand-dark-1);
+    --accent-dark-2: var(--brand-dark-2);
+    --accent-dark-3: var(--brand-dark-3);
+    --accent-dark-4: var(--brand-dark-4);
+    --accent-dark-5: var(--brand-dark-5);
+    --accent-dark-6: var(--brand-dark-6);
+    --accent-dark-7: var(--brand-dark-7);
+    --accent-dark-8: var(--brand-dark-8);
+    --accent-dark-9: var(--brand-dark-9);
+    --accent-dark-10: var(--brand-dark-10);
+    --accent-dark-11: var(--brand-dark-11);
+    --accent-dark-12: var(--brand-dark-12);
+    --accent-contrast-light: var(--brand-contrast-light);
+    --accent-contrast-dark: var(--brand-contrast-dark);
+    --accent-text-light: var(--brand-text-light);
+    --accent-text-dark: var(--brand-text-dark);
+  }
+
+  [data-color-accent='success'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-success-light);
+    --accent-light-3: var(--color-green-200);
+    --accent-light-4: var(--color-green-300);
+    --accent-light-5: var(--color-green-400);
+    --accent-light-6: var(--color-green-500);
+    --accent-light-7: var(--color-green-600);
+    --accent-light-8: var(--color-green-700);
+    --accent-light-9: var(--color-success);
+    --accent-light-10: var(--color-success-mid);
+    --accent-light-11: var(--color-success-dark);
+    --accent-light-12: var(--color-green-1100);
+    --accent-dark-1: #0e1512;
+    --accent-dark-2: #121b17;
+    --accent-dark-3: #132d21;
+    --accent-dark-4: #113b29;
+    --accent-dark-5: #174933;
+    --accent-dark-6: #20573e;
+    --accent-dark-7: #28684a;
+    --accent-dark-8: #2f7c57;
+    --accent-dark-9: #30a46c;
+    --accent-dark-10: #33b074;
+    --accent-dark-11: #3dd68c;
+    --accent-dark-12: #b1f1cb;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-success);
+    --accent-text-dark: #3dd68c;
+  }
+
+  [data-color-accent='danger'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-danger-light);
+    --accent-light-3: var(--color-red-200);
+    --accent-light-4: var(--color-red-300);
+    --accent-light-5: var(--color-red-400);
+    --accent-light-6: var(--color-red-500);
+    --accent-light-7: var(--color-red-600);
+    --accent-light-8: var(--color-red-700);
+    --accent-light-9: var(--color-danger);
+    --accent-light-10: var(--color-danger-mid);
+    --accent-light-11: var(--color-danger-dark);
+    --accent-light-12: var(--color-red-1100);
+    --accent-dark-1: #191111;
+    --accent-dark-2: #201314;
+    --accent-dark-3: #3b1219;
+    --accent-dark-4: #500f1c;
+    --accent-dark-5: #611623;
+    --accent-dark-6: #72232d;
+    --accent-dark-7: #8c333a;
+    --accent-dark-8: #b54548;
+    --accent-dark-9: #e5484d;
+    --accent-dark-10: #ec5d5e;
+    --accent-dark-11: #ff9592;
+    --accent-dark-12: #ffd1d9;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-danger);
+    --accent-text-dark: #ff9592;
+  }
+
+  [data-color-accent='warning'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-warning-light);
+    --accent-light-3: var(--color-orange-200);
+    --accent-light-4: var(--color-orange-300);
+    --accent-light-5: var(--color-orange-400);
+    --accent-light-6: var(--color-orange-500);
+    --accent-light-7: var(--color-orange-600);
+    --accent-light-8: var(--color-orange-700);
+    --accent-light-9: var(--color-warning);
+    --accent-light-10: var(--color-warning-mid);
+    --accent-light-11: var(--color-warning-dark);
+    --accent-light-12: var(--color-orange-1100);
+    --accent-dark-1: #16120c;
+    --accent-dark-2: #1d180f;
+    --accent-dark-3: #302008;
+    --accent-dark-4: #3f2700;
+    --accent-dark-5: #4d3000;
+    --accent-dark-6: #5c3d05;
+    --accent-dark-7: #714f19;
+    --accent-dark-8: #8f6424;
+    --accent-dark-9: #ffc53d;
+    --accent-dark-10: #ffd60a;
+    --accent-dark-11: #ffca16;
+    --accent-dark-12: #ffe7b3;
+    --accent-contrast-light: var(--color-grey-800);
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-warning-text);
+    --accent-text-dark: #ffca16;
+  }
+
+  [data-color-accent='info'] {
+    --accent-light-1: var(--color-white);
+    --accent-light-2: var(--color-info-light);
+    --accent-light-3: var(--color-blue-200);
+    --accent-light-4: var(--color-blue-300);
+    --accent-light-5: var(--color-blue-400);
+    --accent-light-6: var(--color-blue-500);
+    --accent-light-7: var(--color-blue-600);
+    --accent-light-8: var(--color-blue-700);
+    --accent-light-9: var(--color-info);
+    --accent-light-10: var(--color-info-mid);
+    --accent-light-11: var(--color-info-dark);
+    --accent-light-12: var(--color-blue-1100);
+    --accent-dark-1: #0d1520;
+    --accent-dark-2: #111927;
+    --accent-dark-3: #0d2847;
+    --accent-dark-4: #003362;
+    --accent-dark-5: #004074;
+    --accent-dark-6: #104d87;
+    --accent-dark-7: #205d9e;
+    --accent-dark-8: #2870bd;
+    --accent-dark-9: #0090ff;
+    --accent-dark-10: #3b9eff;
+    --accent-dark-11: #70b8ff;
+    --accent-dark-12: #c2e6ff;
+    --accent-contrast-light: white;
+    --accent-contrast-dark: white;
+    --accent-text-light: var(--color-info);
+    --accent-text-dark: #70b8ff;
+  }
+
+  :root, [data-color-scheme], [data-brand], [data-color-palette] {
+    --color-base-1: var(--scheme-dark, var(--base-light-1)) var(--scheme-light, var(--base-dark-1));
+    --color-base-2: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-2));
+    --color-base-3: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-3));
+    --color-base-4: var(--scheme-dark, var(--base-light-4)) var(--scheme-light, var(--base-dark-4));
+    --color-base-5: var(--scheme-dark, var(--base-light-5)) var(--scheme-light, var(--base-dark-5));
+    --color-base-6: var(--scheme-dark, var(--base-light-6)) var(--scheme-light, var(--base-dark-6));
+    --color-base-7: var(--scheme-dark, var(--base-light-7)) var(--scheme-light, var(--base-dark-7));
+    --color-base-8: var(--scheme-dark, var(--base-light-8)) var(--scheme-light, var(--base-dark-8));
+    --color-base-9: var(--scheme-dark, var(--base-light-9)) var(--scheme-light, var(--base-dark-9));
+    --color-base-10: var(--scheme-dark, var(--base-light-10)) var(--scheme-light, var(--base-dark-10));
+    --color-base-11: var(--scheme-dark, var(--base-light-11)) var(--scheme-light, var(--base-dark-11));
+    --color-base-12: var(--scheme-dark, var(--base-light-12)) var(--scheme-light, var(--base-dark-12));
+    --color-accent-1: var(--scheme-dark, var(--accent-light-1)) var(--scheme-light, var(--accent-dark-1));
+    --color-accent-2: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-2));
+    --color-accent-3: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-3));
+    --color-accent-4: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-4));
+    --color-accent-5: var(--scheme-dark, var(--accent-light-5)) var(--scheme-light, var(--accent-dark-5));
+    --color-accent-6: var(--scheme-dark, var(--accent-light-6)) var(--scheme-light, var(--accent-dark-6));
+    --color-accent-7: var(--scheme-dark, var(--accent-light-7)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-8: var(--scheme-dark, var(--accent-light-8)) var(--scheme-light, var(--accent-dark-8));
+    --color-accent-9: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-9));
+    --color-accent-10: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-10));
+    --color-accent-11: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-11));
+    --color-accent-12: var(--scheme-dark, var(--accent-light-12)) var(--scheme-light, var(--accent-dark-12));
+    --color-accent-contrast: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-contrast-dark));
+    --color-background: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-1));
+    --color-surface: var(--scheme-dark, var(--base-light-1)) var(--scheme-light, var(--base-dark-2));
+    --color-surface-hover: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-3));
+    --color-surface-active: var(--scheme-dark, var(--base-light-4)) var(--scheme-light, var(--base-dark-4));
+    --color-border-subtle: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-6));
+    --color-border: var(--scheme-dark, var(--base-light-4)) var(--scheme-light, var(--base-dark-7));
+    --color-border-strong: var(--scheme-dark, var(--base-light-5)) var(--scheme-light, var(--base-dark-8));
+    --color-text-minimal: var(--scheme-dark, var(--neutral-light-8)) var(--scheme-light, var(--neutral-dark-10));
+    --color-text-subtle: var(--scheme-dark, var(--neutral-light-9)) var(--scheme-light, var(--neutral-dark-11));
+    --color-text-regular: var(--scheme-dark, var(--neutral-light-10)) var(--scheme-light, var(--neutral-dark-12));
+    --color-text-bold: var(--scheme-dark, var(--neutral-light-11)) var(--scheme-light, var(--neutral-dark-12));
+    --color-background-accent: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-2));
+    --color-accent-subtle: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-3));
+    --color-accent-subtle-hover: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --color-accent-border: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --color-accent-solid-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-9));
+    --color-accent-solid-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-text: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-11));
+    --background-color-page: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-1));
+    --background-color-surface: var(--scheme-dark, var(--base-light-1)) var(--scheme-light, var(--base-dark-2));
+    --background-color-surface-hover: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-3));
+    --background-color-hover: var(--scheme-dark, var(--base-light-a3)) var(--scheme-light, var(--base-dark-a3));
+    --background-color-active: var(--scheme-dark, var(--base-light-a4)) var(--scheme-light, var(--base-dark-a4));
+    --background-color-inset: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-1));
+    --background-color-input: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-3));
+    --border-color-subtlest: var(--scheme-dark, var(--base-light-2)) var(--scheme-light, var(--base-dark-4));
+    --border-color-subtle: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-6));
+    --border-color-default: var(--scheme-dark, var(--base-light-4)) var(--scheme-light, var(--base-dark-7));
+    --text-color-subtlest: var(--scheme-dark, var(--neutral-light-8)) var(--scheme-light, var(--neutral-dark-10));
+    --text-color-subtle: var(--scheme-dark, var(--neutral-light-9)) var(--scheme-light, var(--neutral-dark-11));
+    --text-color-default: var(--scheme-dark, var(--neutral-light-11)) var(--scheme-light, var(--neutral-dark-12));
+    --text-color-icon: var(--scheme-dark, var(--neutral-light-10)) var(--scheme-light, var(--neutral-dark-11));
+    --text-color-icon-subtle: var(--scheme-dark, var(--neutral-light-8)) var(--scheme-light, var(--neutral-dark-9));
+    --text-color-link: var(--scheme-dark, var(--brand-light-9)) var(--scheme-light, var(--brand-dark-11));
+    --text-color-link-hover: var(--scheme-dark, var(--brand-light-10)) var(--scheme-light, var(--brand-dark-12));
+    --text-color-link-visited: var(--scheme-dark, var(--visited-light-9)) var(--scheme-light, var(--visited-dark-11));
+    --background-color-selection: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --background-color-highlight: var(--scheme-dark, var(--warning-light-3)) var(--scheme-light, var(--warning-dark-4));
+    --background-color-neutral: var(--scheme-dark, var(--base-light-3)) var(--scheme-light, var(--base-dark-4));
+    --background-color-neutral-solid: var(--scheme-dark, var(--base-light-7)) var(--scheme-light, var(--base-dark-7));
+    --background-color-neutral-solid-hover: var(--scheme-dark, var(--base-light-8)) var(--scheme-light, var(--base-dark-8));
+    --border-color-neutral-solid: var(--scheme-dark, var(--base-light-7)) var(--scheme-light, var(--base-dark-7));
+    --border-color-strong: var(--scheme-dark, var(--neutral-light-9)) var(--scheme-light, var(--neutral-dark-9));
+    --outline-color-focus: var(--scheme-dark, var(--brand-light-9)) var(--scheme-light, var(--brand-dark-9));
+    --border-color-focus: var(--scheme-dark, var(--brand-light-9)) var(--scheme-light, var(--brand-dark-9));
+    --outline-color-focus-inverse: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-dark-12));
+    --text-color-accent-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-12));
+    --text-color-accent-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-12));
+    --background-color-accent-subtle: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-3));
+    --background-color-accent-subtle-hover: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --background-color-accent-subtle-active: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --background-color-accent-muted: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --background-color-accent-muted-hover: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --background-color-accent-muted-active: var(--scheme-dark, var(--accent-light-5)) var(--scheme-light, var(--accent-dark-6));
+    --background-color-accent-emphasis: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-6));
+    --text-color-on-accent-emphasis: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-dark-12));
+    --background-color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --background-color-accent-solid-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-9));
+    --background-color-accent-solid-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-7));
+    --border-color-accent: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-7));
+    --border-color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --outline-color-accent: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-9));
+    --text-color-accent: var(--scheme-dark, var(--accent-text-light)) var(--scheme-light, var(--accent-text-dark));
+    --text-color-on-accent-subtle: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-11));
+    --text-color-on-accent: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-contrast-dark));
+    --background-color-success-subtle: var(--scheme-dark, var(--success-light-2)) var(--scheme-light, var(--success-dark-3));
+    --background-color-success-subtle-hover: var(--scheme-dark, var(--success-light-3)) var(--scheme-light, var(--success-dark-4));
+    --background-color-success-subtle-active: var(--scheme-dark, var(--success-light-4)) var(--scheme-light, var(--success-dark-5));
+    --background-color-success-muted: var(--scheme-dark, var(--success-light-3)) var(--scheme-light, var(--success-dark-4));
+    --background-color-success-muted-hover: var(--scheme-dark, var(--success-light-4)) var(--scheme-light, var(--success-dark-5));
+    --background-color-success-muted-active: var(--scheme-dark, var(--success-light-5)) var(--scheme-light, var(--success-dark-6));
+    --background-color-success-emphasis: var(--scheme-dark, var(--success-light-9)) var(--scheme-light, var(--success-dark-6));
+    --text-color-on-success-emphasis: var(--scheme-dark, var(--success-contrast-light)) var(--scheme-light, var(--success-dark-12));
+    --background-color-success-solid: var(--scheme-dark, var(--success-light-9)) var(--scheme-light, var(--success-dark-8));
+    --background-color-success-solid-hover: var(--scheme-dark, var(--success-light-10)) var(--scheme-light, var(--success-dark-9));
+    --background-color-success-solid-active: var(--scheme-dark, var(--success-light-11)) var(--scheme-light, var(--success-dark-7));
+    --border-color-success: var(--scheme-dark, var(--success-light-4)) var(--scheme-light, var(--success-dark-7));
+    --border-color-success-solid: var(--scheme-dark, var(--success-light-9)) var(--scheme-light, var(--success-dark-8));
+    --outline-color-success: var(--scheme-dark, var(--success-light-9)) var(--scheme-light, var(--success-dark-9));
+    --text-color-success: var(--scheme-dark, var(--success-text-light)) var(--scheme-light, var(--success-text-dark));
+    --text-color-on-success-subtle: var(--scheme-dark, var(--success-light-11)) var(--scheme-light, var(--success-dark-11));
+    --text-color-on-success: var(--scheme-dark, var(--success-contrast-light)) var(--scheme-light, var(--success-contrast-dark));
+    --background-color-danger-subtle: var(--scheme-dark, var(--danger-light-2)) var(--scheme-light, var(--danger-dark-3));
+    --background-color-danger-subtle-hover: var(--scheme-dark, var(--danger-light-3)) var(--scheme-light, var(--danger-dark-4));
+    --background-color-danger-subtle-active: var(--scheme-dark, var(--danger-light-4)) var(--scheme-light, var(--danger-dark-5));
+    --background-color-danger-muted: var(--scheme-dark, var(--danger-light-3)) var(--scheme-light, var(--danger-dark-4));
+    --background-color-danger-muted-hover: var(--scheme-dark, var(--danger-light-4)) var(--scheme-light, var(--danger-dark-5));
+    --background-color-danger-muted-active: var(--scheme-dark, var(--danger-light-5)) var(--scheme-light, var(--danger-dark-6));
+    --background-color-danger-emphasis: var(--scheme-dark, var(--danger-light-9)) var(--scheme-light, var(--danger-dark-6));
+    --text-color-on-danger-emphasis: var(--scheme-dark, var(--danger-contrast-light)) var(--scheme-light, var(--danger-dark-12));
+    --background-color-danger-solid: var(--scheme-dark, var(--danger-light-9)) var(--scheme-light, var(--danger-dark-8));
+    --background-color-danger-solid-hover: var(--scheme-dark, var(--danger-light-10)) var(--scheme-light, var(--danger-dark-9));
+    --background-color-danger-solid-active: var(--scheme-dark, var(--danger-light-11)) var(--scheme-light, var(--danger-dark-7));
+    --border-color-danger: var(--scheme-dark, var(--danger-light-4)) var(--scheme-light, var(--danger-dark-7));
+    --border-color-danger-solid: var(--scheme-dark, var(--danger-light-9)) var(--scheme-light, var(--danger-dark-8));
+    --outline-color-danger: var(--scheme-dark, var(--danger-light-9)) var(--scheme-light, var(--danger-dark-9));
+    --text-color-danger: var(--scheme-dark, var(--danger-text-light)) var(--scheme-light, var(--danger-text-dark));
+    --text-color-on-danger-subtle: var(--scheme-dark, var(--danger-light-11)) var(--scheme-light, var(--danger-dark-11));
+    --text-color-on-danger: var(--scheme-dark, var(--danger-contrast-light)) var(--scheme-light, var(--danger-contrast-dark));
+    --background-color-warning-subtle: var(--scheme-dark, var(--warning-light-2)) var(--scheme-light, var(--warning-dark-3));
+    --background-color-warning-subtle-hover: var(--scheme-dark, var(--warning-light-3)) var(--scheme-light, var(--warning-dark-4));
+    --background-color-warning-subtle-active: var(--scheme-dark, var(--warning-light-4)) var(--scheme-light, var(--warning-dark-5));
+    --background-color-warning-muted: var(--scheme-dark, var(--warning-light-3)) var(--scheme-light, var(--warning-dark-4));
+    --background-color-warning-muted-hover: var(--scheme-dark, var(--warning-light-4)) var(--scheme-light, var(--warning-dark-5));
+    --background-color-warning-muted-active: var(--scheme-dark, var(--warning-light-5)) var(--scheme-light, var(--warning-dark-6));
+    --background-color-warning-emphasis: var(--scheme-dark, var(--warning-light-9)) var(--scheme-light, var(--warning-dark-6));
+    --text-color-on-warning-emphasis: var(--scheme-dark, var(--warning-contrast-light)) var(--scheme-light, var(--warning-dark-12));
+    --background-color-warning-solid: var(--scheme-dark, var(--warning-light-9)) var(--scheme-light, var(--warning-dark-8));
+    --background-color-warning-solid-hover: var(--scheme-dark, var(--warning-light-10)) var(--scheme-light, var(--warning-dark-9));
+    --background-color-warning-solid-active: var(--scheme-dark, var(--warning-light-11)) var(--scheme-light, var(--warning-dark-7));
+    --border-color-warning: var(--scheme-dark, var(--warning-light-4)) var(--scheme-light, var(--warning-dark-7));
+    --border-color-warning-solid: var(--scheme-dark, var(--warning-light-9)) var(--scheme-light, var(--warning-dark-8));
+    --outline-color-warning: var(--scheme-dark, var(--warning-light-9)) var(--scheme-light, var(--warning-dark-9));
+    --text-color-warning: var(--scheme-dark, var(--warning-text-light)) var(--scheme-light, var(--warning-text-dark));
+    --text-color-on-warning-subtle: var(--scheme-dark, var(--warning-light-11)) var(--scheme-light, var(--warning-dark-11));
+    --text-color-on-warning: var(--scheme-dark, var(--warning-contrast-light)) var(--scheme-light, var(--warning-contrast-dark));
+    --background-color-info-subtle: var(--scheme-dark, var(--info-light-2)) var(--scheme-light, var(--info-dark-3));
+    --background-color-info-subtle-hover: var(--scheme-dark, var(--info-light-3)) var(--scheme-light, var(--info-dark-4));
+    --background-color-info-subtle-active: var(--scheme-dark, var(--info-light-4)) var(--scheme-light, var(--info-dark-5));
+    --background-color-info-muted: var(--scheme-dark, var(--info-light-3)) var(--scheme-light, var(--info-dark-4));
+    --background-color-info-muted-hover: var(--scheme-dark, var(--info-light-4)) var(--scheme-light, var(--info-dark-5));
+    --background-color-info-muted-active: var(--scheme-dark, var(--info-light-5)) var(--scheme-light, var(--info-dark-6));
+    --background-color-info-emphasis: var(--scheme-dark, var(--info-light-9)) var(--scheme-light, var(--info-dark-6));
+    --text-color-on-info-emphasis: var(--scheme-dark, var(--info-contrast-light)) var(--scheme-light, var(--info-dark-12));
+    --background-color-info-solid: var(--scheme-dark, var(--info-light-9)) var(--scheme-light, var(--info-dark-8));
+    --background-color-info-solid-hover: var(--scheme-dark, var(--info-light-10)) var(--scheme-light, var(--info-dark-9));
+    --background-color-info-solid-active: var(--scheme-dark, var(--info-light-11)) var(--scheme-light, var(--info-dark-7));
+    --border-color-info: var(--scheme-dark, var(--info-light-4)) var(--scheme-light, var(--info-dark-7));
+    --border-color-info-solid: var(--scheme-dark, var(--info-light-9)) var(--scheme-light, var(--info-dark-8));
+    --outline-color-info: var(--scheme-dark, var(--info-light-9)) var(--scheme-light, var(--info-dark-9));
+    --text-color-info: var(--scheme-dark, var(--info-text-light)) var(--scheme-light, var(--info-text-dark));
+    --text-color-on-info-subtle: var(--scheme-dark, var(--info-light-11)) var(--scheme-light, var(--info-dark-11));
+    --text-color-on-info: var(--scheme-dark, var(--info-contrast-light)) var(--scheme-light, var(--info-contrast-dark));
+    --background-color-surface-overlay: var(--scheme-dark, var(--base-light-1)) var(--scheme-light, var(--base-dark-3));
+    --background-color-inverse: var(--scheme-dark, var(--neutral-light-10)) var(--scheme-light, var(--neutral-dark-4));
+    --text-color-on-inverse: var(--scheme-dark, var(--neutral-light-1)) var(--scheme-light, var(--neutral-dark-12));
+    --border-color-overlay: var(--scheme-dark, transparent) var(--scheme-light, rgb(255 255 255 / 0.1));
+    --background-color-scrim: var(--scheme-dark, var(--color-alpha-600)) var(--scheme-light, hsla(0, 0%, 0%, 0.6));
+    --shadow-floating-sm: var(--scheme-dark, 0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)) var(--scheme-light, 0 0 0 1px var(--border-color-overlay), 0 1px 3px hsla(0, 0%, 0%, 0.30), 0 1px 2px hsla(0, 0%, 0%, 0.45));
+    --shadow-resting-sm: var(--scheme-dark, 0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)) var(--scheme-light, 0 1px 3px hsla(0, 0%, 0%, 0.30), 0 1px 2px hsla(0, 0%, 0%, 0.45));
+    --shadow-floating-md: var(--scheme-dark, 0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)) var(--scheme-light, 0 0 0 1px var(--border-color-overlay), 0 3px 6px hsla(0, 0%, 0%, 0.30), 0 3px 6px hsla(0, 0%, 0%, 0.30));
+    --shadow-resting-md: var(--scheme-dark, 0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)) var(--scheme-light, 0 3px 6px hsla(0, 0%, 0%, 0.30), 0 3px 6px hsla(0, 0%, 0%, 0.30));
+    --shadow-floating-lg: var(--scheme-dark, 0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)) var(--scheme-light, 0 0 0 1px var(--border-color-overlay), 0 10px 20px hsla(0, 0%, 0%, 0.30), 0 6px 6px hsla(0, 0%, 0%, 0.30));
+    --shadow-floating-xl: var(--scheme-dark, 0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)) var(--scheme-light, 0 0 0 1px var(--border-color-overlay), 0 14px 28px hsla(0, 0%, 0%, 0.45), 0 10px 10px hsla(0, 0%, 0%, 0.30));
+    --shadow-edge-top: var(--scheme-dark, 0 -6px 6px -1px hsla(0, 0%, 20%, 0.05)) var(--scheme-light, 0 -6px 6px -1px hsla(0, 0%, 0%, 0.15));
+    --shadow-edge-bottom: var(--scheme-dark, 0 4px 4px -2px hsla(0, 0%, 12%, 0.1)) var(--scheme-light, 0 4px 4px -2px hsla(0, 0%, 0%, 0.30));
+    --shadow-edge-end: var(--scheme-dark, 4px 0 4px -2px hsla(0, 0%, 12%, 0.1)) var(--scheme-light, 4px 0 4px -2px hsla(0, 0%, 0%, 0.30));
+  }
+
+  [data-color-accent] {
+    --color-accent-1: var(--scheme-dark, var(--accent-light-1)) var(--scheme-light, var(--accent-dark-1));
+    --color-accent-2: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-2));
+    --color-accent-3: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-3));
+    --color-accent-4: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-4));
+    --color-accent-5: var(--scheme-dark, var(--accent-light-5)) var(--scheme-light, var(--accent-dark-5));
+    --color-accent-6: var(--scheme-dark, var(--accent-light-6)) var(--scheme-light, var(--accent-dark-6));
+    --color-accent-7: var(--scheme-dark, var(--accent-light-7)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-8: var(--scheme-dark, var(--accent-light-8)) var(--scheme-light, var(--accent-dark-8));
+    --color-accent-9: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-9));
+    --color-accent-10: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-10));
+    --color-accent-11: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-11));
+    --color-accent-12: var(--scheme-dark, var(--accent-light-12)) var(--scheme-light, var(--accent-dark-12));
+    --color-accent-contrast: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-contrast-dark));
+    --color-background-accent: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-2));
+    --color-accent-subtle: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-3));
+    --color-accent-subtle-hover: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --color-accent-border: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --color-accent-solid-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-9));
+    --color-accent-solid-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-7));
+    --color-accent-text: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-11));
+    --background-color-selection: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --outline-color-focus-inverse: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-dark-12));
+    --text-color-accent-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-12));
+    --text-color-accent-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-12));
+    --background-color-accent-subtle: var(--scheme-dark, var(--accent-light-2)) var(--scheme-light, var(--accent-dark-3));
+    --background-color-accent-subtle-hover: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --background-color-accent-subtle-active: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --background-color-accent-muted: var(--scheme-dark, var(--accent-light-3)) var(--scheme-light, var(--accent-dark-4));
+    --background-color-accent-muted-hover: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-5));
+    --background-color-accent-muted-active: var(--scheme-dark, var(--accent-light-5)) var(--scheme-light, var(--accent-dark-6));
+    --background-color-accent-emphasis: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-6));
+    --text-color-on-accent-emphasis: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-dark-12));
+    --background-color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --background-color-accent-solid-hover: var(--scheme-dark, var(--accent-light-10)) var(--scheme-light, var(--accent-dark-9));
+    --background-color-accent-solid-active: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-7));
+    --border-color-accent: var(--scheme-dark, var(--accent-light-4)) var(--scheme-light, var(--accent-dark-7));
+    --border-color-accent-solid: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-8));
+    --outline-color-accent: var(--scheme-dark, var(--accent-light-9)) var(--scheme-light, var(--accent-dark-9));
+    --text-color-accent: var(--scheme-dark, var(--accent-text-light)) var(--scheme-light, var(--accent-text-dark));
+    --text-color-on-accent-subtle: var(--scheme-dark, var(--accent-light-11)) var(--scheme-light, var(--accent-dark-11));
+    --text-color-on-accent: var(--scheme-dark, var(--accent-contrast-light)) var(--scheme-light, var(--accent-contrast-dark));
+  }
+
+  /* Autofill paints its own fill; repaint it with the control's fill (--autofill-fill). */
+  :is(input, textarea, select):-webkit-autofill {
+    -webkit-text-fill-color: var(--text-color-default);
+    box-shadow: 0 0 0 1000px var(--autofill-fill, var(--background-color-surface)) inset;
+  }
+
+  /* Inherited color is already computed, so nested scopes reset it. */
+  [data-color-scheme], [data-brand], [data-color-palette] {
+    color: var(--text-color-default);
+  }
+
+  /* Only inside opted-in scopes, so pages that haven't enabled theming keep browser defaults. */
+  :where([data-color-scheme], [data-color-palette]) ::selection,
+  :where([data-color-scheme], [data-color-palette])::selection {
+    background-color: var(--background-color-selection);
+  }
+  :where([data-color-scheme], [data-color-palette]) mark {
+    background-color: var(--background-color-highlight);
+    color: inherit;
+  }
+}