@fairgarden/design 0.1.0-alpha.0

package/utils/global.css

@@ -0,0 +1,3747 @@
+
+@layer reset, tokens, theme, roles, base, variants, compounds, scales, states, print;
+
+/*
+ * The design system's global entry point. Import once in the app shell:
+ *   import '@fairgarden-private/design/utils/global.css'
+ *   import '@fairgarden-private/design/utils/fonts'
+ * Mode strategy: follow-OS (colors.css + theme.css + roles.css).
+ */
+
+/* Cascade layer order (§1.11.3). Loaded first; layer names are global. */
+
+/*
+ * The element reset (§1.11.9) [D154]. Structural rules only, replacing Open
+ * Props Normalize: no palette color, shadow, opacity, table or field radius,
+ * or unguarded dark-mode rule. Every color is a role variable.
+ */
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :where(:not(dialog)) {
+    margin: 0;
+  }
+
+  :where(html) {
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    block-size: 100%;
+    color: var(--primary12);
+    background-color: var(--role-ground);
+    font-family: var(--ds-font-ui);
+    font-size: 100%;
+    line-height: var(--font-lineheight-3);
+    tab-size: 2;
+    hanging-punctuation: first allow-end last;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(html) {
+      scroll-behavior: smooth;
+    }
+  }
+
+  :where(body) {
+    min-block-size: 100%;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+    text-wrap: balance;
+  }
+
+  :where(p, li, dd, figcaption, blockquote) {
+    text-wrap: pretty;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote) {
+    overflow-wrap: break-word;
+  }
+
+  :where(ul, ol)[role='list'] {
+    list-style: none;
+    padding: 0;
+  }
+
+  :where(img, svg, video, canvas, picture, iframe) {
+    display: block;
+    max-inline-size: 100%;
+  }
+
+  :where(img, video) {
+    block-size: auto;
+  }
+
+  :where(svg:not([fill])) {
+    fill: currentColor;
+  }
+
+  :where(input, button, textarea, select) {
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+  }
+
+  :where(button, [role='button'], summary, label[for]) {
+    cursor: pointer;
+  }
+
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  :where(table) {
+    border-collapse: collapse;
+    inline-size: 100%;
+  }
+
+  :where(hr) {
+    block-size: 0;
+    border: none;
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Links: --primary12 text, --role-accent underline (§1.5.3). */
+  :where(a) {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-underline-offset: 0.15em;
+  }
+
+  /* Firefox dims placeholders with opacity; cancel it so no text is translucent. */
+  :where(::placeholder) {
+    color: var(--role-muted);
+    opacity: 1;
+  }
+
+  /* The ring: 2 px --primary12 at a 2 px offset; never removed (§1.5.14). */
+  :where(:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  :where([hidden]:not([hidden='until-found'])) {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+    }
+  }
+}
+/*
+ * Tokens (§1.5): Open Props non-color primitives, used as shipped, plus every
+ * --ds- system extension. --ds- never holds a color [D112]. Units [D123]:
+ * text rem, tracking em, leading unitless; spacing, strokes, radii and sizes
+ * px; measure ch; print pt and mm (print values: print.css).
+ */
+@layer tokens{
+:where(html){--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch}
+}
+@layer tokens{
+:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem))}
+}
+@layer tokens{
+:where(html){--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}
+}
+@layer tokens{
+:where(html){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--ease-circ-in:cubic-bezier(.6,.04,.98,.335);--ease-circ-in-out:cubic-bezier(.785,.135,.15,.86);--ease-circ-out:cubic-bezier(.075,.82,.165,1);--ease-cubic-in:cubic-bezier(.55,.055,.675,.19);--ease-cubic-in-out:cubic-bezier(.645,.045,.355,1);--ease-cubic-out:cubic-bezier(.215,.61,.355,1);--ease-expo-in:cubic-bezier(.95,.05,.795,.035);--ease-expo-in-out:cubic-bezier(1,0,0,1);--ease-expo-out:cubic-bezier(.19,1,.22,1);--ease-quad-in:cubic-bezier(.55,.085,.68,.53);--ease-quad-in-out:cubic-bezier(.455,.03,.515,.955);--ease-quad-out:cubic-bezier(.25,.46,.45,.94);--ease-quart-in:cubic-bezier(.895,.03,.685,.22);--ease-quart-in-out:cubic-bezier(.77,0,.175,1);--ease-quart-out:cubic-bezier(.165,.84,.44,1);--ease-quint-in:cubic-bezier(.755,.05,.855,.06);--ease-quint-in-out:cubic-bezier(.86,0,.07,1);--ease-quint-out:cubic-bezier(.23,1,.32,1);--ease-sine-in:cubic-bezier(.47,0,.745,.715);--ease-sine-in-out:cubic-bezier(.445,.05,.55,.95);--ease-sine-out:cubic-bezier(.39,.575,.565,1)}
+}
+@layer tokens{
+:where(html){--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647}
+}
+@layer tokens{
+:where(html){--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1}
+}
+@layer tokens {
+  :root {
+    /* Spacing (§1.5.10): Open Props --size-px-* plus the system steps. */
+    --ds-space-12: 12px;
+    --ds-space-40: 40px;
+    --ds-space-56: 56px;
+    --ds-space-stack: 36px; /* named exception: H2 baseline → chapter hairline */
+    --ds-space-eyebrow-rule: 14px; /* named exception [D100] */
+    --ds-space-eyebrow-content: 19px; /* named exception [D100] */
+    --ds-space-halo: var(--size-px-2);
+    --ds-space-section: var(--ds-space-56);
+    --ds-space-margin: var(--size-px-3);
+
+    /* Strokes (§1.5.7): with --border-size-1 and --border-size-2. */
+    --ds-stroke-0-75: 0.75px;
+    --ds-stroke-1-25: 1.25px;
+    --ds-stroke-1-5: 1.5px;
+    --ds-stroke-3: 3px;
+    --ds-stroke-4: 4px;
+    --ds-stroke-8: 8px;
+
+    /* Line geometry (§1.5.8, §4.6–§4.8). */
+    --ds-dot-fine: 1px;
+    --ds-dot-fine-pitch: 3px;
+    --ds-dot: 2px;
+    --ds-dot-pitch: 5px;
+    --ds-dot-bold: 4px;
+    --ds-dot-bold-pitch: 9px;
+    --ds-dash-fine: 4px;
+    --ds-dash-fine-gap: 3px;
+    --ds-dash: 5px;
+    --ds-dash-gap: 4px;
+    --ds-double-gap: 4px;
+    --ds-double-hair-gap: 3px;
+
+    /* Pattern geometry (§1.5.9). */
+    --ds-speckle-grid: 16px;
+    --ds-speckle-dot: 2px;
+    --ds-sunburst-dot: 2.5px;
+    --ds-sunburst-radius: 290px;
+    --ds-sunburst-pitch: 6.5px;
+    --ds-awning-stripe: 24px;
+    --ds-dotgrid-dot: 1.5px;
+    --ds-dotgrid-pitch: 16px;
+    --ds-dotgrid-fine-dot: 1px;
+    --ds-dotgrid-fine-pitch: 8px;
+    --ds-graph-pitch: 16px;
+    --ds-ruled-pitch: 27px;
+    --ds-hatch-pitch: 6px;
+    --ds-hatch-tile: 8px;
+    --ds-dotscreen-dot: 1.25px;
+    --ds-dotscreen-dot-heavy: 2px;
+    --ds-dotscreen-pitch-1: 6px;
+    --ds-dotscreen-pitch-2: 5px;
+    --ds-dotscreen-pitch-3: 4px;
+
+    /* Ornaments, terminals and markers (§1.5.16). */
+    --ds-ornament-dot: 5px;
+    --ds-ornament-dot-gap: 10px;
+    --ds-ornament-star: 9px;
+    --ds-zigzag-amplitude: 6px;
+    --ds-zigzag-period: 12px;
+    --ds-fringe-tick: 6px;
+    --ds-fringe-pitch: 4px;
+    /*
+     * The hill [D189]: amplitude 4.6% of the band's width, clamped between
+     * these (the max is reached at about 1391 px); crest at 0.667 × width,
+     * the right end falling 30% of the rise; no horizon rule on screen.
+     */
+    --ds-edge-hill-min: 12px;
+    --ds-edge-hill-max: var(--size-px-9); /* 64 px */
+    --ds-arrow-head: 6px;
+    --ds-arrow-tick: 8px;
+    --ds-mark-arm: 12px;
+    --ds-mark-overhang: 6px;
+    --ds-marker-trail: 5px;
+    --ds-marker-timeline: 8px;
+    --ds-marker-waypoint: 9px;
+    --ds-marker-current: 10px;
+
+    /* Radii (§1.5.11): with --radius-1 (2 px) and --radius-round. */
+    --ds-radius-none: 0;
+    --ds-radius-8: 8px;
+    --ds-radius-20: 20px;
+    /* ≈ 1/7 of the frame's width, max 64 px; the frame's parent is its container. */
+    --ds-radius-feature: min(calc(100cqi / 7), var(--size-px-9));
+    /* Conditional radii [D171]: full radius while narrower than the viewport, 0 when full-bleed. */
+    --ds-radius-conditional-8: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-8));
+    --ds-radius-conditional-20: clamp(0px, calc(100vw - 100%) * 1e5, var(--ds-radius-20));
+
+    /* Type families (§1.5.5) [D159]; --ds-font-fine is set per mode (theme.css). */
+    --ds-font-display: 'Fraunces Variable', 'Source Serif 4 Variable', var(--font-old-style);
+    --ds-font-text: 'Source Serif 4 Variable', var(--font-transitional);
+    --ds-font-ui: 'Figtree Variable', var(--font-geometric-humanist);
+    --ds-font-mono: 'IBM Plex Mono', var(--font-mono);
+    --ds-font-display-settings: 'SOFT' 0, 'WONK' 0;
+    --ds-font-accent-settings: 'SOFT' 100, 'WONK' 1;
+
+    /* Type sizes (§1.5.6): rem, fluid from 360 px to 1024 px. */
+    --ds-font-size-display-xl: clamp(2.5625rem, calc(2.5625rem + 1.125 * (100vw - 22.5rem) / 41.5), 3.6875rem); /* 41 → 59 px */
+    --ds-font-size-display: clamp(2.125rem, calc(2.125rem + 0.9375 * (100vw - 22.5rem) / 41.5), 3.0625rem); /* 34 → 49 px */
+    --ds-font-size-h2: clamp(1.75rem, calc(1.75rem + 0.375 * (100vw - 22.5rem) / 41.5), 2.125rem); /* 28 → 34 px */
+    --ds-font-size-itemhead: clamp(1.375rem, calc(1.375rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-4)); /* 22 → 24 px */
+    --ds-font-size-kicker: clamp(1.125rem, calc(1.125rem + 0.125 * (100vw - 22.5rem) / 41.5), var(--font-size-3)); /* 18 → 20 px */
+    --ds-font-size-subhead: clamp(1.125rem, calc(1.125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.1875rem); /* 18 → 19 px */
+    --ds-font-size-lead: clamp(var(--font-size-3), calc(1.25rem + 0.125 * (100vw - 22.5rem) / 41.5), 1.375rem); /* 20 → 22 px */
+    --ds-font-size-quote: clamp(var(--font-size-4), calc(1.5rem + 0.5 * (100vw - 22.5rem) / 41.5), var(--font-size-5)); /* 24 → 32 px */
+    --ds-font-size-body: clamp(1.0625rem, calc(1.0625rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.125rem); /* 17 → 18 px */
+    --ds-font-size-body-ui: clamp(var(--font-size-1), calc(1rem + 0.0625 * (100vw - 22.5rem) / 41.5), 1.0625rem); /* 16 → 17 px */
+    --ds-font-size-marquee: clamp(1.375rem, calc(1.375rem + 0.25 * (100vw - 22.5rem) / 41.5), 1.625rem); /* 22 → 26 px */
+    --ds-font-size-button-lg: 1.0625rem; /* 17 px */
+    --ds-font-size-button: clamp(0.875rem, calc(0.875rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.9375rem); /* 14 → 15 px */
+    --ds-font-size-footnote: 0.9375rem; /* 15 px */
+    --ds-font-size-caption: 0.875rem; /* 14 px */
+    --ds-font-size-eyebrow: clamp(0.8125rem, calc(0.8125rem + 0.0625 * (100vw - 22.5rem) / 41.5), 0.875rem); /* 13 → 14 px */
+    --ds-font-size-label: 0.8125rem; /* 13 px */
+    --ds-font-size-url: 8pt; /* print only */
+    /* type-stat: display-xl on screen, 24 pt in print (§1.5.6, §8.8), where display-xl prints 26 pt (print.css). */
+    --ds-font-size-stat: var(--ds-font-size-display-xl);
+    --ds-lockup-accent-factor: 1.45; /* provisional: compute from font metrics [D64] */
+
+    /* Leading, tracking, numerals, measure (§1.5.6). */
+    --ds-leading-display: 1;
+    --ds-leading-compact: 1.4;
+    --ds-leading-reading: 1.6;
+    --ds-tracking-tight: -0.01em;
+    --ds-numerals-prose: oldstyle-nums proportional-nums;
+    --ds-numerals-data: lining-nums tabular-nums;
+    --ds-measure-reading: 66ch;
+    --ds-measure-print: 66ch;
+
+    /* Sizing and hit targets (§1.5.12). */
+    --ds-size-control-md: 40px;
+    --ds-size-control-xl: 56px;
+    --ds-size-hit: 44px;
+    --ds-size-icon-block: 36px;
+    --ds-size-bar-utility: 36px;
+    --ds-size-art-s: 152px;
+    --ds-size-art-l: 312px;
+    --ds-size-art-plate-wide: 640px;
+    --ds-size-thumb: 72px;
+    --ds-size-avatar-xl: 128px;
+    --ds-size-tick-minor: 6px; /* slider minor tick */
+    --ds-size-pager-dot: 10px; /* step pager position dot, outlined (§9.9) */
+    --ds-size-pager-dot-current: 12px; /* the current dot, solid (§9.9) */
+
+    /* Overlay panels (§10.1, §9.7, §10.16). JS mirrors: utils/tokens.ts. */
+    --ds-size-tooltip: 280px; /* tooltip max width */
+    --ds-size-overlay-max: 360px; /* anchored panel max width (popover, preview card, select list) */
+    --ds-size-menu-min: 200px; /* menu min width */
+    --ds-popup-offset: var(--size-px-2); /* 8 px, panel to trigger */
+    --ds-popup-clearance: var(--size-px-3); /* 16 px, panel to viewport edge (base --ds-space-margin) */
+
+    /*
+     * Table density (§8.2, §1.5.16) [D83, D169]: cell padding, the minimum
+     * row pitch and the row-rule switch, so a Ground's data-density reaches
+     * every Table inside it (the density sets below). --ds-table-row-rule is
+     * the width of the --role-rule row rule that replaces the --role-hairline
+     * one: 0 while padding holds --ds-space-12, --border-size-1 when compact.
+     */
+    --ds-table-pad-block: var(--ds-space-12);
+    --ds-table-pad-inline: var(--size-px-3);
+    --ds-table-row-min: 0px;
+    --ds-table-row-rule: 0px;
+
+    /* Containers (§1.5.13): with --size-sm (480 px) and --size-content-2. */
+    --ds-container-content: 1120px;
+    --ds-container-wide: 1360px;
+
+    /* Focus (§1.5.14): 2 px ring at a 2 px offset, color --primary12. */
+    --ds-focus-width: var(--border-size-2);
+    --ds-focus-offset: var(--border-size-2);
+
+    /* Motion (§1.5.15): with --ease-out-3. */
+    --ds-duration-instant: 0ms;
+    --ds-duration-quick: 120ms;
+    --ds-duration-disclosure: 200ms;
+    --ds-delay-tooltip: 500ms;
+    --ds-duration-toast: 6s;
+    /* Desktop Navigation Menu hover intent [D182]; JS mirror: utils/tokens.ts. */
+    --ds-delay-nav-open: 150ms;
+    --ds-delay-nav-close: 300ms;
+
+    /* Media (§1.5.16): with --ratio-widescreen, --ratio-portrait, --ratio-square. */
+    --ds-ratio-photo: 3 / 2;
+
+    /* Print (§1.5.13, §1.5.16). */
+    --ds-print-margin-inline: 18mm;
+    --ds-print-margin-block: 20mm;
+    --ds-print-live-width: 174mm;
+    --ds-print-figure-max: 100mm;
+    --ds-print-hero-max: 60mm;
+    --ds-print-qr: 22mm;
+    /* The trail and timeline spines in print: 0.75 pt, 3 pt dash, 2.5 pt gap (§1.5.8, §4.7.1) [D142]. */
+    --ds-print-trail-stroke: 0.75pt;
+    --ds-print-trail-dash: 3pt;
+    --ds-print-trail-gap: 2.5pt;
+  }
+
+  @media (min-width: 480px) {
+    :root {
+      --ds-space-margin: var(--size-px-5);
+    }
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      --ds-space-margin: var(--size-px-7);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    :root {
+      --ds-space-margin: var(--ds-space-40);
+      --ds-space-section: var(--size-px-10);
+      --ds-ruled-pitch: 29px;
+    }
+  }
+
+  /* Reduced motion: every duration is instant (§1.5.15). */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --ds-duration-quick: var(--ds-duration-instant);
+      --ds-duration-disclosure: var(--ds-duration-instant);
+    }
+  }
+
+  /* Density sets (§1.5.16), set per module, never by breakpoint (§5.8). */
+  [data-density='spacious'] {
+    --ds-space-section: var(--size-px-10);
+  }
+
+  /* Default and spacious keep the default table; restated so a nested module resets a compact parent. */
+  [data-density='default'],
+  [data-density='spacious'] {
+    --ds-table-pad-block: var(--ds-space-12);
+    --ds-table-pad-inline: var(--size-px-3);
+    --ds-table-row-min: 0px;
+    --ds-table-row-rule: 0px;
+  }
+
+  /* Compact: cells --size-px-2 × --ds-space-12, rows ≥ 32 px, --role-rule row rules [D83]. */
+  [data-density='compact'] {
+    --ds-space-section: var(--size-px-7);
+    --ds-table-pad-block: var(--size-px-2);
+    --ds-table-pad-inline: var(--ds-space-12);
+    --ds-table-row-min: var(--size-px-7);
+    --ds-table-row-rule: var(--border-size-1);
+  }
+
+  @media (min-width: 1024px) {
+    [data-density='spacious'] {
+      --ds-space-section: var(--size-px-11);
+    }
+
+    [data-density='compact'] {
+      --ds-space-section: var(--ds-space-40);
+    }
+  }
+}
+
+/* ── Added by the icons-and-patterns work (pattern.module.css) ───────────── */
+@layer tokens {
+  :root {
+    /*
+     * Shaped-edge switch (§4.9.2) [D179]: the `display` of a shaped edge's
+     * drawn layer (ornament-fringe, the hill). A shaped edge sits only on a
+     * band seam that tone separates, which in v1 is the night band against
+     * a page ground in light mode. The role maps (roles.css) set `none` on
+     * every other scope, and on the night band wherever its --role-seam turns
+     * visible (dark mode), so the band shows its straight seam rule instead.
+     */
+    --ds-edge-shaped: block;
+
+    /*
+     * Hover underline switches [D181], `none` or `underline`, set per scope
+     * by the role maps (roles.css), like --ds-edge-shaped:
+     * - --ds-link-hover-line: `underline` where --role-link-hover is
+     *   --primary12 (saturated fields, royal, brick, dark rose and heather),
+     *   so a hover that would change only an ink also underlines;
+     * - --ds-soft-hover-line: `underline` where soft fills drop (the
+     *   pastels, forest, the solid fields), so the outline Button's hover
+     *   takes the bare-text underline instead of its --primary3 fill.
+     */
+    --ds-link-hover-line: none;
+    --ds-soft-hover-line: none;
+
+    /*
+     * Chart sequential-cell switches (§8.7) [D125, D167], `display` values
+     * set per scope by the role maps (roles.css), like --ds-edge-shaped: a
+     * light base ground (and a `white` plate) shows the flat screen fills
+     * (--ds-series-fill: inline); every other ground shows the one-ink
+     * patterns on screen (--ds-series-pattern: inline). The odd-slot ink is
+     * the --role-series-odd alias.
+     */
+    --ds-series-fill: inline;
+    --ds-series-pattern: none;
+  }
+}
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --amber1: #fefdfb;
+    --amber2: #fefbe9;
+    --amber3: #fff7c2;
+    --amber4: #ffee9c;
+    --amber5: #fbe577;
+    --amber6: #f3d673;
+    --amber7: #e9c162;
+    --amber8: #e2a336;
+    --amber9: #ffc53d;
+    --amber10: #ffba18;
+    --amber11: #ab6400;
+    --amber12: #4f3422;
+    --amber-contrast: var(--amber12);
+    --amber-hover: var(--amber6);
+    --blue1: #fbfdff;
+    --blue2: #f4faff;
+    --blue3: #e6f4fe;
+    --blue4: #d5efff;
+    --blue5: #c2e5ff;
+    --blue6: #acd8fc;
+    --blue7: #8ec8f6;
+    --blue8: #5eb1ef;
+    --blue9: #0090ff;
+    --blue10: #0588f0;
+    --blue11: #0d74ce;
+    --blue12: #113264;
+    --blue-contrast: var(--blue12);
+    --blue-hover: var(--blue8);
+    --bronze1: #fdfcfc;
+    --bronze2: #fdf7f5;
+    --bronze3: #f6edea;
+    --bronze4: #efe4df;
+    --bronze5: #e7d9d3;
+    --bronze6: #dfcdc5;
+    --bronze7: #d3bcb3;
+    --bronze8: #c2a499;
+    --bronze9: #a18072;
+    --bronze10: #957468;
+    --bronze11: #7d5e54;
+    --bronze12: #43302b;
+    --bronze-contrast: var(--bronze1);
+    --bronze-hover: var(--bronze8);
+    --brown1: #fefdfc;
+    --brown2: #fcf9f6;
+    --brown3: #f6eee7;
+    --brown4: #f0e4d9;
+    --brown5: #ebdaca;
+    --brown6: #e4cdb7;
+    --brown7: #dcbc9f;
+    --brown8: #cea37e;
+    --brown9: #ad7f58;
+    --brown10: #a07553;
+    --brown11: #815e46;
+    --brown12: #3e332e;
+    --brown-contrast: var(--brown1);
+    --brown-hover: var(--brown8);
+    --crimson1: #fffcfd;
+    --crimson2: #fef7f9;
+    --crimson3: #ffe9f0;
+    --crimson4: #fedce7;
+    --crimson5: #facedd;
+    --crimson6: #f3bed1;
+    --crimson7: #eaacc3;
+    --crimson8: #e093b2;
+    --crimson9: #e93d82;
+    --crimson10: #df3478;
+    --crimson11: #cb1d63;
+    --crimson12: #621639;
+    --crimson-contrast: var(--crimson1);
+    --crimson-hover: var(--crimson8);
+    --cyan1: #fafdfe;
+    --cyan2: #f2fafb;
+    --cyan3: #def7f9;
+    --cyan4: #caf1f6;
+    --cyan5: #b5e9f0;
+    --cyan6: #9ddde7;
+    --cyan7: #7dcedc;
+    --cyan8: #3db9cf;
+    --cyan9: #00a2c7;
+    --cyan10: #0797b9;
+    --cyan11: #107d98;
+    --cyan12: #0d3c48;
+    --cyan-contrast: var(--cyan12);
+    --cyan-hover: var(--cyan8);
+    --gold1: #fdfdfc;
+    --gold2: #faf9f2;
+    --gold3: #f2f0e7;
+    --gold4: #eae6db;
+    --gold5: #e1dccf;
+    --gold6: #d8d0bf;
+    --gold7: #cbc0aa;
+    --gold8: #b9a88d;
+    --gold9: #978365;
+    --gold10: #8c7a5e;
+    --gold11: #71624b;
+    --gold12: #3b352b;
+    --gold-contrast: var(--gold1);
+    --gold-hover: var(--gold8);
+    --grass1: #fbfefb;
+    --grass2: #f5fbf5;
+    --grass3: #e9f6e9;
+    --grass4: #daf1db;
+    --grass5: #c9e8ca;
+    --grass6: #b2ddb5;
+    --grass7: #94ce9a;
+    --grass8: #65ba74;
+    --grass9: #46a758;
+    --grass10: #3e9b4f;
+    --grass11: #2a7e3b;
+    --grass12: #203c25;
+    --grass-contrast: var(--grass12);
+    --grass-hover: var(--grass8);
+    --gray1: #fcfcfc;
+    --gray2: #f9f9f9;
+    --gray3: #f0f0f0;
+    --gray4: #e8e8e8;
+    --gray5: #e0e0e0;
+    --gray6: #d9d9d9;
+    --gray7: #cecece;
+    --gray8: #bbbbbb;
+    --gray9: #8d8d8d;
+    --gray10: #838383;
+    --gray11: #646464;
+    --gray12: #202020;
+    --gray-contrast: var(--gray12);
+    --gray-hover: var(--gray8);
+    --green1: #fbfefc;
+    --green2: #f4fbf6;
+    --green3: #e6f6eb;
+    --green4: #d6f1df;
+    --green5: #c4e8d1;
+    --green6: #adddc0;
+    --green7: #8eceaa;
+    --green8: #5bb98b;
+    --green9: #30a46c;
+    --green10: #2b9a66;
+    --green11: #218358;
+    --green12: #193b2d;
+    --green-contrast: var(--green12);
+    --green-hover: var(--green8);
+    --indigo1: #fdfdfe;
+    --indigo2: #f7f9ff;
+    --indigo3: #edf2fe;
+    --indigo4: #e1e9ff;
+    --indigo5: #d2deff;
+    --indigo6: #c1d0ff;
+    --indigo7: #abbdf9;
+    --indigo8: #8da4ef;
+    --indigo9: #3e63dd;
+    --indigo10: #3358d4;
+    --indigo11: #3a5bc7;
+    --indigo12: #1f2d5c;
+    --indigo-contrast: var(--indigo1);
+    --indigo-hover: var(--indigo10);
+    --iris1: #fdfdff;
+    --iris2: #f8f8ff;
+    --iris3: #f0f1fe;
+    --iris4: #e6e7ff;
+    --iris5: #dadcff;
+    --iris6: #cbcdff;
+    --iris7: #b8baf8;
+    --iris8: #9b9ef0;
+    --iris9: #5b5bd6;
+    --iris10: #5151cd;
+    --iris11: #5753c6;
+    --iris12: #272962;
+    --iris-contrast: var(--iris1);
+    --iris-hover: var(--iris10);
+    --jade1: #fbfefd;
+    --jade2: #f4fbf7;
+    --jade3: #e6f7ed;
+    --jade4: #d6f1e3;
+    --jade5: #c3e9d7;
+    --jade6: #acdec8;
+    --jade7: #8bceb6;
+    --jade8: #56ba9f;
+    --jade9: #29a383;
+    --jade10: #26997b;
+    --jade11: #208368;
+    --jade12: #1d3b31;
+    --jade-contrast: var(--jade12);
+    --jade-hover: var(--jade8);
+    --lime1: #fcfdfa;
+    --lime2: #f8faf3;
+    --lime3: #eef6d6;
+    --lime4: #e2f0bd;
+    --lime5: #d3e7a6;
+    --lime6: #c2da91;
+    --lime7: #abc978;
+    --lime8: #8db654;
+    --lime9: #bdee63;
+    --lime10: #b0e64c;
+    --lime11: #5c7c2f;
+    --lime12: #37401c;
+    --lime-contrast: var(--lime12);
+    --lime-hover: var(--lime5);
+    --mauve1: #fdfcfd;
+    --mauve2: #faf9fb;
+    --mauve3: #f2eff3;
+    --mauve4: #eae7ec;
+    --mauve5: #e3dfe6;
+    --mauve6: #dbd8e0;
+    --mauve7: #d0cdd7;
+    --mauve8: #bcbac7;
+    --mauve9: #8e8c99;
+    --mauve10: #84828e;
+    --mauve11: #65636d;
+    --mauve12: #211f26;
+    --mauve-contrast: var(--mauve12);
+    --mauve-hover: var(--mauve8);
+    --mint1: #f9fefd;
+    --mint2: #f2fbf9;
+    --mint3: #ddf9f2;
+    --mint4: #c8f4e9;
+    --mint5: #b3ecde;
+    --mint6: #9ce0d0;
+    --mint7: #7ecfbd;
+    --mint8: #4cbba5;
+    --mint9: #86ead4;
+    --mint10: #7de0cb;
+    --mint11: #027864;
+    --mint12: #16433c;
+    --mint-contrast: var(--mint12);
+    --mint-hover: var(--mint5);
+    --olive1: #fcfdfc;
+    --olive2: #f8faf8;
+    --olive3: #eff1ef;
+    --olive4: #e7e9e7;
+    --olive5: #dfe2df;
+    --olive6: #d7dad7;
+    --olive7: #cccfcc;
+    --olive8: #b9bcb8;
+    --olive9: #898e87;
+    --olive10: #7f847d;
+    --olive11: #60655f;
+    --olive12: #1d211c;
+    --olive-contrast: var(--olive12);
+    --olive-hover: var(--olive8);
+    --orange1: #fefcfb;
+    --orange2: #fff7ed;
+    --orange3: #ffefd6;
+    --orange4: #ffdfb5;
+    --orange5: #ffd19a;
+    --orange6: #ffc182;
+    --orange7: #f5ae73;
+    --orange8: #ec9455;
+    --orange9: #f76b15;
+    --orange10: #ef5f00;
+    --orange11: #cc4e00;
+    --orange12: #582d1d;
+    --orange-contrast: var(--orange12);
+    --orange-hover: var(--orange8);
+    --pink1: #fffcfe;
+    --pink2: #fef7fb;
+    --pink3: #fee9f5;
+    --pink4: #fbdcef;
+    --pink5: #f6cee7;
+    --pink6: #efbfdd;
+    --pink7: #e7acd0;
+    --pink8: #dd93c2;
+    --pink9: #d6409f;
+    --pink10: #cf3897;
+    --pink11: #c2298a;
+    --pink12: #651249;
+    --pink-contrast: var(--pink1);
+    --pink-hover: var(--pink8);
+    --plum1: #fefcff;
+    --plum2: #fdf7fd;
+    --plum3: #fbebfb;
+    --plum4: #f7def8;
+    --plum5: #f2d1f3;
+    --plum6: #e9c2ec;
+    --plum7: #deade3;
+    --plum8: #cf91d8;
+    --plum9: #ab4aba;
+    --plum10: #a144af;
+    --plum11: #953ea3;
+    --plum12: #53195d;
+    --plum-contrast: var(--plum1);
+    --plum-hover: var(--plum10);
+    --purple1: #fefcfe;
+    --purple2: #fbf7fe;
+    --purple3: #f7edfe;
+    --purple4: #f2e2fc;
+    --purple5: #ead5f9;
+    --purple6: #e0c4f4;
+    --purple7: #d1afec;
+    --purple8: #be93e4;
+    --purple9: #8e4ec6;
+    --purple10: #8347b9;
+    --purple11: #8145b5;
+    --purple12: #402060;
+    --purple-contrast: var(--purple1);
+    --purple-hover: var(--purple10);
+    --red1: #fffcfc;
+    --red2: #fff7f7;
+    --red3: #feebec;
+    --red4: #ffdbdc;
+    --red5: #ffcdce;
+    --red6: #fdbdbe;
+    --red7: #f4a9aa;
+    --red8: #eb8e90;
+    --red9: #e5484d;
+    --red10: #dc3e42;
+    --red11: #ce2c31;
+    --red12: #641723;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red8);
+    --ruby1: #fffcfd;
+    --ruby2: #fff7f8;
+    --ruby3: #feeaed;
+    --ruby4: #ffdce1;
+    --ruby5: #ffced6;
+    --ruby6: #f8bfc8;
+    --ruby7: #efacb8;
+    --ruby8: #e592a3;
+    --ruby9: #e54666;
+    --ruby10: #dc3b5d;
+    --ruby11: #ca244d;
+    --ruby12: #64172b;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby8);
+    --sage1: #fbfdfc;
+    --sage2: #f7f9f8;
+    --sage3: #eef1f0;
+    --sage4: #e6e9e8;
+    --sage5: #dfe2e0;
+    --sage6: #d7dad9;
+    --sage7: #cbcfcd;
+    --sage8: #b8bcba;
+    --sage9: #868e8b;
+    --sage10: #7c8481;
+    --sage11: #5f6563;
+    --sage12: #1a211e;
+    --sage-contrast: var(--sage12);
+    --sage-hover: var(--sage8);
+    --sand1: #fdfdfc;
+    --sand2: #f9f9f8;
+    --sand3: #f1f0ef;
+    --sand4: #e9e8e6;
+    --sand5: #e2e1de;
+    --sand6: #dad9d6;
+    --sand7: #cfceca;
+    --sand8: #bcbbb5;
+    --sand9: #8d8d86;
+    --sand10: #82827c;
+    --sand11: #63635e;
+    --sand12: #21201c;
+    --sand-contrast: var(--sand12);
+    --sand-hover: var(--sand8);
+    --sky1: #f9feff;
+    --sky2: #f1fafd;
+    --sky3: #e1f6fd;
+    --sky4: #d1f0fa;
+    --sky5: #bee7f5;
+    --sky6: #a9daed;
+    --sky7: #8dcae3;
+    --sky8: #60b3d7;
+    --sky9: #7ce2fe;
+    --sky10: #74daf8;
+    --sky11: #00749e;
+    --sky12: #1d3e56;
+    --sky-contrast: var(--sky12);
+    --sky-hover: var(--sky5);
+    --slate1: #fcfcfd;
+    --slate2: #f9f9fb;
+    --slate3: #f0f0f3;
+    --slate4: #e8e8ec;
+    --slate5: #e0e1e6;
+    --slate6: #d9d9e0;
+    --slate7: #cdced6;
+    --slate8: #b9bbc6;
+    --slate9: #8b8d98;
+    --slate10: #80838d;
+    --slate11: #60646c;
+    --slate12: #1c2024;
+    --slate-contrast: var(--slate12);
+    --slate-hover: var(--slate8);
+    --teal1: #fafefd;
+    --teal2: #f3fbf9;
+    --teal3: #e0f8f3;
+    --teal4: #ccf3ea;
+    --teal5: #b8eae0;
+    --teal6: #a1ded2;
+    --teal7: #83cdc1;
+    --teal8: #53b9ab;
+    --teal9: #12a594;
+    --teal10: #0d9b8a;
+    --teal11: #008573;
+    --teal12: #0d3d38;
+    --teal-contrast: var(--teal12);
+    --teal-hover: var(--teal8);
+    --tomato1: #fffcfc;
+    --tomato2: #fff8f7;
+    --tomato3: #feebe7;
+    --tomato4: #ffdcd3;
+    --tomato5: #ffcdc2;
+    --tomato6: #fdbdaf;
+    --tomato7: #f5a898;
+    --tomato8: #ec8e7b;
+    --tomato9: #e54d2e;
+    --tomato10: #dd4425;
+    --tomato11: #d13415;
+    --tomato12: #5c271f;
+    --tomato-contrast: var(--tomato1);
+    --tomato-hover: var(--tomato8);
+    --violet1: #fdfcfe;
+    --violet2: #faf8ff;
+    --violet3: #f4f0fe;
+    --violet4: #ebe4ff;
+    --violet5: #e1d9ff;
+    --violet6: #d4cafe;
+    --violet7: #c2b5f5;
+    --violet8: #aa99ec;
+    --violet9: #6e56cf;
+    --violet10: #654dc4;
+    --violet11: #6550b9;
+    --violet12: #2f265f;
+    --violet-contrast: var(--violet1);
+    --violet-hover: var(--violet10);
+    --yellow1: #fdfdf9;
+    --yellow2: #fefce9;
+    --yellow3: #fffab8;
+    --yellow4: #fff394;
+    --yellow5: #ffe770;
+    --yellow6: #f3d768;
+    --yellow7: #e4c767;
+    --yellow8: #d5ae39;
+    --yellow9: #ffe629;
+    --yellow10: #ffdc00;
+    --yellow11: #9e6c00;
+    --yellow12: #473b1f;
+    --yellow-contrast: var(--yellow12);
+    --yellow-hover: var(--yellow5);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.995 0.992 0.985);
+      --amber2: color(display-p3 0.994 0.986 0.921);
+      --amber3: color(display-p3 0.994 0.969 0.782);
+      --amber4: color(display-p3 0.989 0.937 0.65);
+      --amber5: color(display-p3 0.97 0.902 0.527);
+      --amber6: color(display-p3 0.936 0.844 0.506);
+      --amber7: color(display-p3 0.89 0.762 0.443);
+      --amber8: color(display-p3 0.85 0.65 0.3);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 0.959 0.741 0.274);
+      --amber11: color(display-p3 0.64 0.4 0);
+      --amber12: color(display-p3 0.294 0.208 0.145);
+      --blue1: color(display-p3 0.986 0.992 0.999);
+      --blue2: color(display-p3 0.96 0.979 0.998);
+      --blue3: color(display-p3 0.912 0.956 0.991);
+      --blue4: color(display-p3 0.853 0.932 1);
+      --blue5: color(display-p3 0.788 0.894 0.998);
+      --blue6: color(display-p3 0.709 0.843 0.976);
+      --blue7: color(display-p3 0.606 0.777 0.947);
+      --blue8: color(display-p3 0.451 0.688 0.917);
+      --blue9: color(display-p3 0.247 0.556 0.969);
+      --blue10: color(display-p3 0.234 0.523 0.912);
+      --blue11: color(display-p3 0.15 0.44 0.84);
+      --blue12: color(display-p3 0.102 0.193 0.379);
+      --bronze1: color(display-p3 0.991 0.988 0.988);
+      --bronze2: color(display-p3 0.989 0.97 0.961);
+      --bronze3: color(display-p3 0.958 0.932 0.919);
+      --bronze4: color(display-p3 0.929 0.894 0.877);
+      --bronze5: color(display-p3 0.898 0.853 0.832);
+      --bronze6: color(display-p3 0.861 0.805 0.778);
+      --bronze7: color(display-p3 0.812 0.739 0.706);
+      --bronze8: color(display-p3 0.741 0.647 0.606);
+      --bronze9: color(display-p3 0.611 0.507 0.455);
+      --bronze10: color(display-p3 0.563 0.461 0.414);
+      --bronze11: color(display-p3 0.471 0.373 0.336);
+      --bronze12: color(display-p3 0.251 0.191 0.172);
+      --brown1: color(display-p3 0.995 0.992 0.989);
+      --brown2: color(display-p3 0.987 0.976 0.964);
+      --brown3: color(display-p3 0.959 0.936 0.909);
+      --brown4: color(display-p3 0.934 0.897 0.855);
+      --brown5: color(display-p3 0.909 0.856 0.798);
+      --brown6: color(display-p3 0.88 0.808 0.73);
+      --brown7: color(display-p3 0.841 0.742 0.639);
+      --brown8: color(display-p3 0.782 0.647 0.514);
+      --brown9: color(display-p3 0.651 0.505 0.368);
+      --brown10: color(display-p3 0.601 0.465 0.344);
+      --brown11: color(display-p3 0.485 0.374 0.288);
+      --brown12: color(display-p3 0.236 0.202 0.183);
+      --crimson1: color(display-p3 0.998 0.989 0.992);
+      --crimson2: color(display-p3 0.991 0.969 0.976);
+      --crimson3: color(display-p3 0.987 0.917 0.941);
+      --crimson4: color(display-p3 0.975 0.866 0.904);
+      --crimson5: color(display-p3 0.953 0.813 0.864);
+      --crimson6: color(display-p3 0.921 0.755 0.817);
+      --crimson7: color(display-p3 0.88 0.683 0.761);
+      --crimson8: color(display-p3 0.834 0.592 0.694);
+      --crimson9: color(display-p3 0.843 0.298 0.507);
+      --crimson10: color(display-p3 0.807 0.266 0.468);
+      --crimson11: color(display-p3 0.731 0.195 0.388);
+      --crimson12: color(display-p3 0.352 0.111 0.221);
+      --cyan1: color(display-p3 0.982 0.992 0.996);
+      --cyan2: color(display-p3 0.955 0.981 0.984);
+      --cyan3: color(display-p3 0.888 0.965 0.975);
+      --cyan4: color(display-p3 0.821 0.941 0.959);
+      --cyan5: color(display-p3 0.751 0.907 0.935);
+      --cyan6: color(display-p3 0.671 0.862 0.9);
+      --cyan7: color(display-p3 0.564 0.8 0.854);
+      --cyan8: color(display-p3 0.388 0.715 0.798);
+      --cyan9: color(display-p3 0.282 0.627 0.765);
+      --cyan10: color(display-p3 0.264 0.583 0.71);
+      --cyan11: color(display-p3 0.08 0.48 0.63);
+      --cyan12: color(display-p3 0.108 0.232 0.277);
+      --gold1: color(display-p3 0.992 0.992 0.989);
+      --gold2: color(display-p3 0.98 0.976 0.953);
+      --gold3: color(display-p3 0.947 0.94 0.909);
+      --gold4: color(display-p3 0.914 0.904 0.865);
+      --gold5: color(display-p3 0.88 0.865 0.816);
+      --gold6: color(display-p3 0.84 0.818 0.756);
+      --gold7: color(display-p3 0.788 0.753 0.677);
+      --gold8: color(display-p3 0.715 0.66 0.565);
+      --gold9: color(display-p3 0.579 0.517 0.41);
+      --gold10: color(display-p3 0.538 0.479 0.38);
+      --gold11: color(display-p3 0.433 0.386 0.305);
+      --gold12: color(display-p3 0.227 0.209 0.173);
+      --grass1: color(display-p3 0.986 0.996 0.985);
+      --grass2: color(display-p3 0.966 0.983 0.964);
+      --grass3: color(display-p3 0.923 0.965 0.917);
+      --grass4: color(display-p3 0.872 0.94 0.865);
+      --grass5: color(display-p3 0.811 0.908 0.802);
+      --grass6: color(display-p3 0.733 0.864 0.724);
+      --grass7: color(display-p3 0.628 0.803 0.622);
+      --grass8: color(display-p3 0.477 0.72 0.482);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.344 0.598 0.342);
+      --grass11: color(display-p3 0.263 0.488 0.261);
+      --grass12: color(display-p3 0.151 0.233 0.153);
+      --gray1: color(display-p3 0.988 0.988 0.988);
+      --gray2: color(display-p3 0.975 0.975 0.975);
+      --gray3: color(display-p3 0.939 0.939 0.939);
+      --gray4: color(display-p3 0.908 0.908 0.908);
+      --gray5: color(display-p3 0.88 0.88 0.88);
+      --gray6: color(display-p3 0.849 0.849 0.849);
+      --gray7: color(display-p3 0.807 0.807 0.807);
+      --gray8: color(display-p3 0.732 0.732 0.732);
+      --gray9: color(display-p3 0.553 0.553 0.553);
+      --gray10: color(display-p3 0.512 0.512 0.512);
+      --gray11: color(display-p3 0.392 0.392 0.392);
+      --gray12: color(display-p3 0.125 0.125 0.125);
+      --green1: color(display-p3 0.986 0.996 0.989);
+      --green2: color(display-p3 0.963 0.983 0.967);
+      --green3: color(display-p3 0.913 0.964 0.925);
+      --green4: color(display-p3 0.859 0.94 0.879);
+      --green5: color(display-p3 0.796 0.907 0.826);
+      --green6: color(display-p3 0.718 0.863 0.761);
+      --green7: color(display-p3 0.61 0.801 0.675);
+      --green8: color(display-p3 0.451 0.715 0.559);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.308 0.595 0.417);
+      --green11: color(display-p3 0.19 0.5 0.32);
+      --green12: color(display-p3 0.132 0.228 0.18);
+      --indigo1: color(display-p3 0.992 0.992 0.996);
+      --indigo2: color(display-p3 0.971 0.977 0.998);
+      --indigo3: color(display-p3 0.933 0.948 0.992);
+      --indigo4: color(display-p3 0.885 0.914 1);
+      --indigo5: color(display-p3 0.831 0.87 1);
+      --indigo6: color(display-p3 0.767 0.814 0.995);
+      --indigo7: color(display-p3 0.685 0.74 0.957);
+      --indigo8: color(display-p3 0.569 0.639 0.916);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.234 0.343 0.801);
+      --indigo11: color(display-p3 0.256 0.354 0.755);
+      --indigo12: color(display-p3 0.133 0.175 0.348);
+      --iris1: color(display-p3 0.992 0.992 0.999);
+      --iris2: color(display-p3 0.972 0.973 0.998);
+      --iris3: color(display-p3 0.943 0.945 0.992);
+      --iris4: color(display-p3 0.902 0.906 1);
+      --iris5: color(display-p3 0.857 0.861 1);
+      --iris6: color(display-p3 0.799 0.805 0.987);
+      --iris7: color(display-p3 0.721 0.727 0.955);
+      --iris8: color(display-p3 0.61 0.619 0.918);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.318 0.318 0.774);
+      --iris11: color(display-p3 0.337 0.326 0.748);
+      --iris12: color(display-p3 0.154 0.161 0.371);
+      --jade1: color(display-p3 0.986 0.996 0.992);
+      --jade2: color(display-p3 0.962 0.983 0.969);
+      --jade3: color(display-p3 0.912 0.965 0.932);
+      --jade4: color(display-p3 0.858 0.941 0.893);
+      --jade5: color(display-p3 0.795 0.909 0.847);
+      --jade6: color(display-p3 0.715 0.864 0.791);
+      --jade7: color(display-p3 0.603 0.802 0.718);
+      --jade8: color(display-p3 0.44 0.72 0.629);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.299 0.592 0.488);
+      --jade11: color(display-p3 0.15 0.5 0.37);
+      --jade12: color(display-p3 0.142 0.229 0.194);
+      --lime1: color(display-p3 0.989 0.992 0.981);
+      --lime2: color(display-p3 0.975 0.98 0.954);
+      --lime3: color(display-p3 0.939 0.965 0.851);
+      --lime4: color(display-p3 0.896 0.94 0.76);
+      --lime5: color(display-p3 0.843 0.903 0.678);
+      --lime6: color(display-p3 0.778 0.852 0.599);
+      --lime7: color(display-p3 0.694 0.784 0.508);
+      --lime8: color(display-p3 0.585 0.707 0.378);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.734 0.896 0.397);
+      --lime11: color(display-p3 0.386 0.482 0.227);
+      --lime12: color(display-p3 0.222 0.25 0.128);
+      --mauve1: color(display-p3 0.991 0.988 0.992);
+      --mauve2: color(display-p3 0.98 0.976 0.984);
+      --mauve3: color(display-p3 0.946 0.938 0.952);
+      --mauve4: color(display-p3 0.915 0.906 0.925);
+      --mauve5: color(display-p3 0.886 0.876 0.901);
+      --mauve6: color(display-p3 0.856 0.846 0.875);
+      --mauve7: color(display-p3 0.814 0.804 0.84);
+      --mauve8: color(display-p3 0.735 0.728 0.777);
+      --mauve9: color(display-p3 0.555 0.549 0.596);
+      --mauve10: color(display-p3 0.514 0.508 0.552);
+      --mauve11: color(display-p3 0.395 0.388 0.424);
+      --mauve12: color(display-p3 0.128 0.122 0.147);
+      --mint1: color(display-p3 0.98 0.995 0.992);
+      --mint2: color(display-p3 0.957 0.985 0.977);
+      --mint3: color(display-p3 0.888 0.972 0.95);
+      --mint4: color(display-p3 0.819 0.951 0.916);
+      --mint5: color(display-p3 0.747 0.918 0.873);
+      --mint6: color(display-p3 0.668 0.87 0.818);
+      --mint7: color(display-p3 0.567 0.805 0.744);
+      --mint8: color(display-p3 0.42 0.724 0.649);
+      --mint9: color(display-p3 0.62 0.908 0.834);
+      --mint10: color(display-p3 0.585 0.871 0.797);
+      --mint11: color(display-p3 0.203 0.463 0.397);
+      --mint12: color(display-p3 0.136 0.259 0.236);
+      --olive1: color(display-p3 0.989 0.992 0.989);
+      --olive2: color(display-p3 0.974 0.98 0.973);
+      --olive3: color(display-p3 0.939 0.945 0.937);
+      --olive4: color(display-p3 0.907 0.914 0.905);
+      --olive5: color(display-p3 0.878 0.885 0.875);
+      --olive6: color(display-p3 0.846 0.855 0.843);
+      --olive7: color(display-p3 0.803 0.812 0.8);
+      --olive8: color(display-p3 0.727 0.738 0.723);
+      --olive9: color(display-p3 0.541 0.556 0.532);
+      --olive10: color(display-p3 0.5 0.515 0.491);
+      --olive11: color(display-p3 0.38 0.395 0.374);
+      --olive12: color(display-p3 0.117 0.129 0.111);
+      --orange1: color(display-p3 0.995 0.988 0.985);
+      --orange2: color(display-p3 0.994 0.968 0.934);
+      --orange3: color(display-p3 0.989 0.938 0.85);
+      --orange4: color(display-p3 1 0.874 0.687);
+      --orange5: color(display-p3 1 0.821 0.583);
+      --orange6: color(display-p3 0.975 0.767 0.545);
+      --orange7: color(display-p3 0.919 0.693 0.486);
+      --orange8: color(display-p3 0.877 0.597 0.379);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.87 0.409 0.164);
+      --orange11: color(display-p3 0.76 0.34 0);
+      --orange12: color(display-p3 0.323 0.185 0.127);
+      --pink1: color(display-p3 0.998 0.989 0.996);
+      --pink2: color(display-p3 0.992 0.97 0.985);
+      --pink3: color(display-p3 0.981 0.917 0.96);
+      --pink4: color(display-p3 0.963 0.867 0.932);
+      --pink5: color(display-p3 0.939 0.815 0.899);
+      --pink6: color(display-p3 0.907 0.756 0.859);
+      --pink7: color(display-p3 0.869 0.683 0.81);
+      --pink8: color(display-p3 0.825 0.59 0.751);
+      --pink9: color(display-p3 0.775 0.297 0.61);
+      --pink10: color(display-p3 0.748 0.27 0.581);
+      --pink11: color(display-p3 0.698 0.219 0.528);
+      --pink12: color(display-p3 0.363 0.101 0.279);
+      --plum1: color(display-p3 0.995 0.988 0.999);
+      --plum2: color(display-p3 0.988 0.971 0.99);
+      --plum3: color(display-p3 0.973 0.923 0.98);
+      --plum4: color(display-p3 0.953 0.875 0.966);
+      --plum5: color(display-p3 0.926 0.825 0.945);
+      --plum6: color(display-p3 0.89 0.765 0.916);
+      --plum7: color(display-p3 0.84 0.686 0.877);
+      --plum8: color(display-p3 0.775 0.58 0.832);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.587 0.29 0.667);
+      --plum11: color(display-p3 0.543 0.263 0.619);
+      --plum12: color(display-p3 0.299 0.114 0.352);
+      --purple1: color(display-p3 0.995 0.988 0.996);
+      --purple2: color(display-p3 0.983 0.971 0.993);
+      --purple3: color(display-p3 0.963 0.931 0.989);
+      --purple4: color(display-p3 0.937 0.888 0.981);
+      --purple5: color(display-p3 0.904 0.837 0.966);
+      --purple6: color(display-p3 0.86 0.774 0.942);
+      --purple7: color(display-p3 0.799 0.69 0.91);
+      --purple8: color(display-p3 0.719 0.583 0.874);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.483 0.289 0.7);
+      --purple11: color(display-p3 0.473 0.281 0.687);
+      --purple12: color(display-p3 0.234 0.132 0.363);
+      --red1: color(display-p3 0.998 0.989 0.988);
+      --red2: color(display-p3 0.995 0.971 0.971);
+      --red3: color(display-p3 0.985 0.925 0.925);
+      --red4: color(display-p3 0.999 0.866 0.866);
+      --red5: color(display-p3 0.984 0.812 0.811);
+      --red6: color(display-p3 0.955 0.751 0.749);
+      --red7: color(display-p3 0.915 0.675 0.672);
+      --red8: color(display-p3 0.872 0.575 0.572);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.798 0.294 0.285);
+      --red11: color(display-p3 0.744 0.234 0.222);
+      --red12: color(display-p3 0.36 0.115 0.143);
+      --ruby1: color(display-p3 0.998 0.989 0.992);
+      --ruby2: color(display-p3 0.995 0.971 0.974);
+      --ruby3: color(display-p3 0.983 0.92 0.928);
+      --ruby4: color(display-p3 0.987 0.869 0.885);
+      --ruby5: color(display-p3 0.968 0.817 0.839);
+      --ruby6: color(display-p3 0.937 0.758 0.786);
+      --ruby7: color(display-p3 0.897 0.685 0.721);
+      --ruby8: color(display-p3 0.851 0.588 0.639);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.795 0.286 0.375);
+      --ruby11: color(display-p3 0.728 0.211 0.311);
+      --ruby12: color(display-p3 0.36 0.115 0.171);
+      --sage1: color(display-p3 0.986 0.992 0.988);
+      --sage2: color(display-p3 0.97 0.977 0.974);
+      --sage3: color(display-p3 0.935 0.944 0.94);
+      --sage4: color(display-p3 0.904 0.913 0.909);
+      --sage5: color(display-p3 0.875 0.885 0.88);
+      --sage6: color(display-p3 0.844 0.854 0.849);
+      --sage7: color(display-p3 0.8 0.811 0.806);
+      --sage8: color(display-p3 0.725 0.738 0.732);
+      --sage9: color(display-p3 0.531 0.556 0.546);
+      --sage10: color(display-p3 0.492 0.515 0.506);
+      --sage11: color(display-p3 0.377 0.395 0.389);
+      --sage12: color(display-p3 0.107 0.129 0.118);
+      --sand1: color(display-p3 0.992 0.992 0.989);
+      --sand2: color(display-p3 0.977 0.977 0.973);
+      --sand3: color(display-p3 0.943 0.942 0.936);
+      --sand4: color(display-p3 0.913 0.912 0.903);
+      --sand5: color(display-p3 0.885 0.883 0.873);
+      --sand6: color(display-p3 0.854 0.852 0.839);
+      --sand7: color(display-p3 0.813 0.81 0.794);
+      --sand8: color(display-p3 0.738 0.734 0.713);
+      --sand9: color(display-p3 0.553 0.553 0.528);
+      --sand10: color(display-p3 0.511 0.511 0.488);
+      --sand11: color(display-p3 0.388 0.388 0.37);
+      --sand12: color(display-p3 0.129 0.126 0.111);
+      --sky1: color(display-p3 0.98 0.995 0.999);
+      --sky2: color(display-p3 0.953 0.98 0.99);
+      --sky3: color(display-p3 0.899 0.963 0.989);
+      --sky4: color(display-p3 0.842 0.937 0.977);
+      --sky5: color(display-p3 0.777 0.9 0.954);
+      --sky6: color(display-p3 0.701 0.851 0.921);
+      --sky7: color(display-p3 0.604 0.785 0.879);
+      --sky8: color(display-p3 0.457 0.696 0.829);
+      --sky9: color(display-p3 0.585 0.877 0.983);
+      --sky10: color(display-p3 0.555 0.845 0.959);
+      --sky11: color(display-p3 0.193 0.448 0.605);
+      --sky12: color(display-p3 0.145 0.241 0.329);
+      --slate1: color(display-p3 0.988 0.988 0.992);
+      --slate2: color(display-p3 0.976 0.976 0.984);
+      --slate3: color(display-p3 0.94 0.941 0.953);
+      --slate4: color(display-p3 0.908 0.909 0.925);
+      --slate5: color(display-p3 0.88 0.881 0.901);
+      --slate6: color(display-p3 0.85 0.852 0.876);
+      --slate7: color(display-p3 0.805 0.808 0.838);
+      --slate8: color(display-p3 0.727 0.733 0.773);
+      --slate9: color(display-p3 0.547 0.553 0.592);
+      --slate10: color(display-p3 0.503 0.512 0.549);
+      --slate11: color(display-p3 0.379 0.392 0.421);
+      --slate12: color(display-p3 0.113 0.125 0.14);
+      --teal1: color(display-p3 0.983 0.996 0.992);
+      --teal2: color(display-p3 0.958 0.983 0.976);
+      --teal3: color(display-p3 0.895 0.971 0.952);
+      --teal4: color(display-p3 0.831 0.949 0.92);
+      --teal5: color(display-p3 0.761 0.914 0.878);
+      --teal6: color(display-p3 0.682 0.864 0.825);
+      --teal7: color(display-p3 0.581 0.798 0.756);
+      --teal8: color(display-p3 0.433 0.716 0.671);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.275 0.599 0.542);
+      --teal11: color(display-p3 0.08 0.5 0.43);
+      --teal12: color(display-p3 0.11 0.235 0.219);
+      --tomato1: color(display-p3 0.998 0.989 0.988);
+      --tomato2: color(display-p3 0.994 0.974 0.969);
+      --tomato3: color(display-p3 0.985 0.924 0.909);
+      --tomato4: color(display-p3 0.996 0.868 0.835);
+      --tomato5: color(display-p3 0.98 0.812 0.77);
+      --tomato6: color(display-p3 0.953 0.75 0.698);
+      --tomato7: color(display-p3 0.917 0.673 0.611);
+      --tomato8: color(display-p3 0.875 0.575 0.502);
+      --tomato9: color(display-p3 0.831 0.345 0.231);
+      --tomato10: color(display-p3 0.802 0.313 0.2);
+      --tomato11: color(display-p3 0.755 0.259 0.152);
+      --tomato12: color(display-p3 0.335 0.165 0.132);
+      --violet1: color(display-p3 0.991 0.988 0.995);
+      --violet2: color(display-p3 0.978 0.974 0.998);
+      --violet3: color(display-p3 0.953 0.943 0.993);
+      --violet4: color(display-p3 0.916 0.897 1);
+      --violet5: color(display-p3 0.876 0.851 1);
+      --violet6: color(display-p3 0.825 0.793 0.981);
+      --violet7: color(display-p3 0.752 0.712 0.943);
+      --violet8: color(display-p3 0.654 0.602 0.902);
+      --violet9: color(display-p3 0.417 0.341 0.784);
+      --violet10: color(display-p3 0.381 0.306 0.741);
+      --violet11: color(display-p3 0.383 0.317 0.702);
+      --violet12: color(display-p3 0.179 0.15 0.359);
+      --yellow1: color(display-p3 0.992 0.992 0.978);
+      --yellow2: color(display-p3 0.995 0.99 0.922);
+      --yellow3: color(display-p3 0.997 0.982 0.749);
+      --yellow4: color(display-p3 0.992 0.953 0.627);
+      --yellow5: color(display-p3 0.984 0.91 0.51);
+      --yellow6: color(display-p3 0.934 0.847 0.474);
+      --yellow7: color(display-p3 0.876 0.785 0.46);
+      --yellow8: color(display-p3 0.811 0.689 0.313);
+      --yellow9: color(display-p3 1 0.92 0.22);
+      --yellow10: color(display-p3 0.977 0.868 0.291);
+      --yellow11: color(display-p3 0.6 0.44 0);
+      --yellow12: color(display-p3 0.271 0.233 0.137);
+    }
+  }
+
+  [data-theme="dark"] {
+    --amber1: #16120c;
+    --amber2: #1d180f;
+    --amber3: #302008;
+    --amber4: #3f2700;
+    --amber5: #4d3000;
+    --amber6: #5c3d05;
+    --amber7: #714f19;
+    --amber8: #8f6424;
+    --amber9: #ffc53d;
+    --amber10: #ffd60a;
+    --amber11: #ffca16;
+    --amber12: #ffe7b3;
+    --amber-contrast: var(--amber1);
+    --amber-hover: var(--amber10);
+    --blue1: #0d1520;
+    --blue2: #111927;
+    --blue3: #0d2847;
+    --blue4: #003362;
+    --blue5: #004074;
+    --blue6: #104d87;
+    --blue7: #205d9e;
+    --blue8: #2870bd;
+    --blue9: #0090ff;
+    --blue10: #3b9eff;
+    --blue11: #70b8ff;
+    --blue12: #c2e6ff;
+    --blue-contrast: var(--blue1);
+    --blue-hover: var(--blue10);
+    --bronze1: #141110;
+    --bronze2: #1c1917;
+    --bronze3: #262220;
+    --bronze4: #302a27;
+    --bronze5: #3b3330;
+    --bronze6: #493e3a;
+    --bronze7: #5a4c47;
+    --bronze8: #6f5f58;
+    --bronze9: #a18072;
+    --bronze10: #ae8c7e;
+    --bronze11: #d4b3a5;
+    --bronze12: #ede0d9;
+    --bronze-contrast: var(--bronze1);
+    --bronze-hover: var(--bronze10);
+    --brown1: #12110f;
+    --brown2: #1c1816;
+    --brown3: #28211d;
+    --brown4: #322922;
+    --brown5: #3e3128;
+    --brown6: #4d3c2f;
+    --brown7: #614a39;
+    --brown8: #7c5f46;
+    --brown9: #ad7f58;
+    --brown10: #b88c67;
+    --brown11: #dbb594;
+    --brown12: #f2e1ca;
+    --brown-contrast: var(--brown1);
+    --brown-hover: var(--brown10);
+    --crimson1: #191114;
+    --crimson2: #201318;
+    --crimson3: #381525;
+    --crimson4: #4d122f;
+    --crimson5: #5c1839;
+    --crimson6: #6d2545;
+    --crimson7: #873356;
+    --crimson8: #b0436e;
+    --crimson9: #e93d82;
+    --crimson10: #ee518a;
+    --crimson11: #ff92ad;
+    --crimson12: #fdd3e8;
+    --crimson-contrast: var(--crimson1);
+    --crimson-hover: var(--crimson10);
+    --cyan1: #0b161a;
+    --cyan2: #101b20;
+    --cyan3: #082c36;
+    --cyan4: #003848;
+    --cyan5: #004558;
+    --cyan6: #045468;
+    --cyan7: #12677e;
+    --cyan8: #11809c;
+    --cyan9: #00a2c7;
+    --cyan10: #23afd0;
+    --cyan11: #4ccce6;
+    --cyan12: #b6ecf7;
+    --cyan-contrast: var(--cyan1);
+    --cyan-hover: var(--cyan10);
+    --gold1: #121211;
+    --gold2: #1b1a17;
+    --gold3: #24231f;
+    --gold4: #2d2b26;
+    --gold5: #38352e;
+    --gold6: #444039;
+    --gold7: #544f46;
+    --gold8: #696256;
+    --gold9: #978365;
+    --gold10: #a39073;
+    --gold11: #cbb99f;
+    --gold12: #e8e2d9;
+    --gold-contrast: var(--gold1);
+    --gold-hover: var(--gold10);
+    --grass1: #0e1511;
+    --grass2: #141a15;
+    --grass3: #1b2a1e;
+    --grass4: #1d3a24;
+    --grass5: #25482d;
+    --grass6: #2d5736;
+    --grass7: #366740;
+    --grass8: #3e7949;
+    --grass9: #46a758;
+    --grass10: #53b365;
+    --grass11: #71d083;
+    --grass12: #c2f0c2;
+    --grass-contrast: var(--grass1);
+    --grass-hover: var(--grass10);
+    --gray1: #111111;
+    --gray2: #191919;
+    --gray3: #222222;
+    --gray4: #2a2a2a;
+    --gray5: #313131;
+    --gray6: #3a3a3a;
+    --gray7: #484848;
+    --gray8: #606060;
+    --gray9: #6e6e6e;
+    --gray10: #7b7b7b;
+    --gray11: #b4b4b4;
+    --gray12: #eeeeee;
+    --gray-contrast: #fff;
+    --gray-hover: var(--gray10);
+    --green1: #0e1512;
+    --green2: #121b17;
+    --green3: #132d21;
+    --green4: #113b29;
+    --green5: #174933;
+    --green6: #20573e;
+    --green7: #28684a;
+    --green8: #2f7c57;
+    --green9: #30a46c;
+    --green10: #33b074;
+    --green11: #3dd68c;
+    --green12: #b1f1cb;
+    --green-contrast: var(--green1);
+    --green-hover: var(--green10);
+    --indigo1: #11131f;
+    --indigo2: #141726;
+    --indigo3: #182449;
+    --indigo4: #1d2e62;
+    --indigo5: #253974;
+    --indigo6: #304384;
+    --indigo7: #3a4f97;
+    --indigo8: #435db1;
+    --indigo9: #3e63dd;
+    --indigo10: #5472e4;
+    --indigo11: #9eb1ff;
+    --indigo12: #d6e1ff;
+    --indigo-contrast: #fff;
+    --indigo-hover: var(--indigo10);
+    --iris1: #13131e;
+    --iris2: #171625;
+    --iris3: #202248;
+    --iris4: #262a65;
+    --iris5: #303374;
+    --iris6: #3d3e82;
+    --iris7: #4a4a95;
+    --iris8: #5958b1;
+    --iris9: #5b5bd6;
+    --iris10: #6e6ade;
+    --iris11: #b1a9ff;
+    --iris12: #e0dffe;
+    --iris-contrast: #fff;
+    --iris-hover: var(--iris10);
+    --jade1: #0d1512;
+    --jade2: #121c18;
+    --jade3: #0f2e22;
+    --jade4: #0b3b2c;
+    --jade5: #114837;
+    --jade6: #1b5745;
+    --jade7: #246854;
+    --jade8: #2a7e68;
+    --jade9: #29a383;
+    --jade10: #27b08b;
+    --jade11: #1fd8a4;
+    --jade12: #adf0d4;
+    --jade-contrast: var(--jade1);
+    --jade-hover: var(--jade10);
+    --lime1: #11130c;
+    --lime2: #151a10;
+    --lime3: #1f2917;
+    --lime4: #29371d;
+    --lime5: #334423;
+    --lime6: #3d522a;
+    --lime7: #496231;
+    --lime8: #577538;
+    --lime9: #bdee63;
+    --lime10: #d4ff70;
+    --lime11: #bde56c;
+    --lime12: #e3f7ba;
+    --lime-contrast: var(--lime1);
+    --lime-hover: var(--lime10);
+    --mauve1: #121113;
+    --mauve2: #1a191b;
+    --mauve3: #232225;
+    --mauve4: #2b292d;
+    --mauve5: #323035;
+    --mauve6: #3c393f;
+    --mauve7: #49474e;
+    --mauve8: #625f69;
+    --mauve9: #6f6d78;
+    --mauve10: #7c7a85;
+    --mauve11: #b5b2bc;
+    --mauve12: #eeeef0;
+    --mauve-contrast: #fff;
+    --mauve-hover: var(--mauve10);
+    --mint1: #0e1515;
+    --mint2: #0f1b1b;
+    --mint3: #092c2b;
+    --mint4: #003a38;
+    --mint5: #004744;
+    --mint6: #105650;
+    --mint7: #1e685f;
+    --mint8: #277f70;
+    --mint9: #86ead4;
+    --mint10: #a8f5e5;
+    --mint11: #58d5ba;
+    --mint12: #c4f5e1;
+    --mint-contrast: var(--mint1);
+    --mint-hover: var(--mint10);
+    --olive1: #111210;
+    --olive2: #181917;
+    --olive3: #212220;
+    --olive4: #282a27;
+    --olive5: #2f312e;
+    --olive6: #383a36;
+    --olive7: #454843;
+    --olive8: #5c625b;
+    --olive9: #687066;
+    --olive10: #767d74;
+    --olive11: #afb5ad;
+    --olive12: #eceeec;
+    --olive-contrast: #fff;
+    --olive-hover: var(--olive10);
+    --orange1: #17120e;
+    --orange2: #1e160f;
+    --orange3: #331e0b;
+    --orange4: #462100;
+    --orange5: #562800;
+    --orange6: #66350c;
+    --orange7: #7e451d;
+    --orange8: #a35829;
+    --orange9: #f76b15;
+    --orange10: #ff801f;
+    --orange11: #ffa057;
+    --orange12: #ffe0c2;
+    --orange-contrast: var(--orange1);
+    --orange-hover: var(--orange10);
+    --pink1: #191117;
+    --pink2: #21121d;
+    --pink3: #37172f;
+    --pink4: #4b143d;
+    --pink5: #591c47;
+    --pink6: #692955;
+    --pink7: #833869;
+    --pink8: #a84885;
+    --pink9: #d6409f;
+    --pink10: #de51a8;
+    --pink11: #ff8dcc;
+    --pink12: #fdd1ea;
+    --pink-contrast: var(--pink1);
+    --pink-hover: var(--pink10);
+    --plum1: #181118;
+    --plum2: #201320;
+    --plum3: #351a35;
+    --plum4: #451d47;
+    --plum5: #512454;
+    --plum6: #5e3061;
+    --plum7: #734079;
+    --plum8: #92549c;
+    --plum9: #ab4aba;
+    --plum10: #b658c4;
+    --plum11: #e796f3;
+    --plum12: #f4d4f4;
+    --plum-contrast: #fff;
+    --plum-hover: var(--plum10);
+    --purple1: #18111b;
+    --purple2: #1e1523;
+    --purple3: #301c3b;
+    --purple4: #3d224e;
+    --purple5: #48295c;
+    --purple6: #54346b;
+    --purple7: #664282;
+    --purple8: #8457aa;
+    --purple9: #8e4ec6;
+    --purple10: #9a5cd0;
+    --purple11: #d19dff;
+    --purple12: #ecd9fa;
+    --purple-contrast: #fff;
+    --purple-hover: var(--purple10);
+    --red1: #191111;
+    --red2: #201314;
+    --red3: #3b1219;
+    --red4: #500f1c;
+    --red5: #611623;
+    --red6: #72232d;
+    --red7: #8c333a;
+    --red8: #b54548;
+    --red9: #e5484d;
+    --red10: #ec5d5e;
+    --red11: #ff9592;
+    --red12: #ffd1d9;
+    --red-contrast: var(--red1);
+    --red-hover: var(--red10);
+    --ruby1: #191113;
+    --ruby2: #1e1517;
+    --ruby3: #3a141e;
+    --ruby4: #4e1325;
+    --ruby5: #5e1a2e;
+    --ruby6: #6f2539;
+    --ruby7: #883447;
+    --ruby8: #b3445a;
+    --ruby9: #e54666;
+    --ruby10: #ec5a72;
+    --ruby11: #ff949d;
+    --ruby12: #fed2e1;
+    --ruby-contrast: var(--ruby1);
+    --ruby-hover: var(--ruby10);
+    --sage1: #101211;
+    --sage2: #171918;
+    --sage3: #202221;
+    --sage4: #272a29;
+    --sage5: #2e3130;
+    --sage6: #373b39;
+    --sage7: #444947;
+    --sage8: #5b625f;
+    --sage9: #63706b;
+    --sage10: #717d79;
+    --sage11: #adb5b2;
+    --sage12: #eceeed;
+    --sage-contrast: #fff;
+    --sage-hover: var(--sage10);
+    --sand1: #111110;
+    --sand2: #191918;
+    --sand3: #222221;
+    --sand4: #2a2a28;
+    --sand5: #31312e;
+    --sand6: #3b3a37;
+    --sand7: #494844;
+    --sand8: #62605b;
+    --sand9: #6f6d66;
+    --sand10: #7c7b74;
+    --sand11: #b5b3ad;
+    --sand12: #eeeeec;
+    --sand-contrast: #fff;
+    --sand-hover: var(--sand10);
+    --sky1: #0d141f;
+    --sky2: #111a27;
+    --sky3: #112840;
+    --sky4: #113555;
+    --sky5: #154467;
+    --sky6: #1b537b;
+    --sky7: #1f6692;
+    --sky8: #197cae;
+    --sky9: #7ce2fe;
+    --sky10: #a8eeff;
+    --sky11: #75c7f0;
+    --sky12: #c2f3ff;
+    --sky-contrast: var(--sky1);
+    --sky-hover: var(--sky10);
+    --slate1: #111113;
+    --slate2: #18191b;
+    --slate3: #212225;
+    --slate4: #272a2d;
+    --slate5: #2e3135;
+    --slate6: #363a3f;
+    --slate7: #43484e;
+    --slate8: #5a6169;
+    --slate9: #696e77;
+    --slate10: #777b84;
+    --slate11: #b0b4ba;
+    --slate12: #edeef0;
+    --slate-contrast: #fff;
+    --slate-hover: var(--slate10);
+    --teal1: #0d1514;
+    --teal2: #111c1b;
+    --teal3: #0d2d2a;
+    --teal4: #023b37;
+    --teal5: #084843;
+    --teal6: #145750;
+    --teal7: #1c6961;
+    --teal8: #207e73;
+    --teal9: #12a594;
+    --teal10: #0eb39e;
+    --teal11: #0bd8b6;
+    --teal12: #adf0dd;
+    --teal-contrast: var(--teal1);
+    --teal-hover: var(--teal10);
+    --tomato1: #181111;
+    --tomato2: #1f1513;
+    --tomato3: #391714;
+    --tomato4: #4e1511;
+    --tomato5: #5e1c16;
+    --tomato6: #6e2920;
+    --tomato7: #853a2d;
+    --tomato8: #ac4d39;
+    --tomato9: #e54d2e;
+    --tomato10: #ec6142;
+    --tomato11: #ff977d;
+    --tomato12: #fbd3cb;
+    --tomato-contrast: var(--tomato1);
+    --tomato-hover: var(--tomato10);
+    --violet1: #14121f;
+    --violet2: #1b1525;
+    --violet3: #291f43;
+    --violet4: #33255b;
+    --violet5: #3c2e69;
+    --violet6: #473876;
+    --violet7: #56468b;
+    --violet8: #6958ad;
+    --violet9: #6e56cf;
+    --violet10: #7d66d9;
+    --violet11: #baa7ff;
+    --violet12: #e2ddfe;
+    --violet-contrast: #fff;
+    --violet-hover: var(--violet10);
+    --yellow1: #14120b;
+    --yellow2: #1b180f;
+    --yellow3: #2d2305;
+    --yellow4: #362b00;
+    --yellow5: #433500;
+    --yellow6: #524202;
+    --yellow7: #665417;
+    --yellow8: #836a21;
+    --yellow9: #ffe629;
+    --yellow10: #ffff57;
+    --yellow11: #f5e147;
+    --yellow12: #f6eeb4;
+    --yellow-contrast: var(--yellow1);
+    --yellow-hover: var(--yellow10);
+
+    @media (color-gamut: p3) {
+      --amber1: color(display-p3 0.082 0.07 0.05);
+      --amber2: color(display-p3 0.111 0.094 0.064);
+      --amber3: color(display-p3 0.178 0.128 0.049);
+      --amber4: color(display-p3 0.239 0.156 0);
+      --amber5: color(display-p3 0.29 0.193 0);
+      --amber6: color(display-p3 0.344 0.245 0.076);
+      --amber7: color(display-p3 0.422 0.314 0.141);
+      --amber8: color(display-p3 0.535 0.399 0.189);
+      --amber9: color(display-p3 1 0.77 0.26);
+      --amber10: color(display-p3 1 0.87 0.15);
+      --amber11: color(display-p3 1 0.8 0.29);
+      --amber12: color(display-p3 0.984 0.909 0.726);
+      --blue1: color(display-p3 0.057 0.081 0.122);
+      --blue2: color(display-p3 0.072 0.098 0.147);
+      --blue3: color(display-p3 0.078 0.154 0.27);
+      --blue4: color(display-p3 0.033 0.197 0.37);
+      --blue5: color(display-p3 0.08 0.245 0.441);
+      --blue6: color(display-p3 0.14 0.298 0.511);
+      --blue7: color(display-p3 0.195 0.361 0.6);
+      --blue8: color(display-p3 0.239 0.434 0.72);
+      --blue9: color(display-p3 0.247 0.556 0.969);
+      --blue10: color(display-p3 0.344 0.612 0.973);
+      --blue11: color(display-p3 0.49 0.72 1);
+      --blue12: color(display-p3 0.788 0.898 0.99);
+      --bronze1: color(display-p3 0.076 0.067 0.063);
+      --bronze2: color(display-p3 0.106 0.097 0.093);
+      --bronze3: color(display-p3 0.147 0.132 0.125);
+      --bronze4: color(display-p3 0.185 0.166 0.156);
+      --bronze5: color(display-p3 0.227 0.202 0.19);
+      --bronze6: color(display-p3 0.278 0.246 0.23);
+      --bronze7: color(display-p3 0.343 0.302 0.281);
+      --bronze8: color(display-p3 0.426 0.374 0.347);
+      --bronze9: color(display-p3 0.611 0.507 0.455);
+      --bronze10: color(display-p3 0.66 0.556 0.504);
+      --bronze11: color(display-p3 0.81 0.707 0.655);
+      --bronze12: color(display-p3 0.921 0.88 0.854);
+      --brown1: color(display-p3 0.071 0.067 0.059);
+      --brown2: color(display-p3 0.107 0.095 0.087);
+      --brown3: color(display-p3 0.151 0.13 0.115);
+      --brown4: color(display-p3 0.191 0.161 0.138);
+      --brown5: color(display-p3 0.235 0.194 0.162);
+      --brown6: color(display-p3 0.291 0.237 0.192);
+      --brown7: color(display-p3 0.365 0.295 0.232);
+      --brown8: color(display-p3 0.469 0.377 0.287);
+      --brown9: color(display-p3 0.651 0.505 0.368);
+      --brown10: color(display-p3 0.697 0.557 0.423);
+      --brown11: color(display-p3 0.835 0.715 0.597);
+      --brown12: color(display-p3 0.938 0.885 0.802);
+      --crimson1: color(display-p3 0.093 0.068 0.078);
+      --crimson2: color(display-p3 0.117 0.078 0.095);
+      --crimson3: color(display-p3 0.203 0.091 0.143);
+      --crimson4: color(display-p3 0.277 0.087 0.182);
+      --crimson5: color(display-p3 0.332 0.115 0.22);
+      --crimson6: color(display-p3 0.394 0.162 0.268);
+      --crimson7: color(display-p3 0.489 0.222 0.336);
+      --crimson8: color(display-p3 0.638 0.289 0.429);
+      --crimson9: color(display-p3 0.843 0.298 0.507);
+      --crimson10: color(display-p3 0.864 0.364 0.539);
+      --crimson11: color(display-p3 1 0.56 0.66);
+      --crimson12: color(display-p3 0.966 0.834 0.906);
+      --cyan1: color(display-p3 0.053 0.085 0.098);
+      --cyan2: color(display-p3 0.072 0.105 0.122);
+      --cyan3: color(display-p3 0.073 0.168 0.209);
+      --cyan4: color(display-p3 0.063 0.216 0.277);
+      --cyan5: color(display-p3 0.091 0.267 0.336);
+      --cyan6: color(display-p3 0.137 0.324 0.4);
+      --cyan7: color(display-p3 0.186 0.398 0.484);
+      --cyan8: color(display-p3 0.23 0.496 0.6);
+      --cyan9: color(display-p3 0.282 0.627 0.765);
+      --cyan10: color(display-p3 0.331 0.675 0.801);
+      --cyan11: color(display-p3 0.446 0.79 0.887);
+      --cyan12: color(display-p3 0.757 0.919 0.962);
+      --gold1: color(display-p3 0.071 0.071 0.067);
+      --gold2: color(display-p3 0.104 0.101 0.09);
+      --gold3: color(display-p3 0.141 0.136 0.122);
+      --gold4: color(display-p3 0.177 0.17 0.152);
+      --gold5: color(display-p3 0.217 0.207 0.185);
+      --gold6: color(display-p3 0.265 0.252 0.225);
+      --gold7: color(display-p3 0.327 0.31 0.277);
+      --gold8: color(display-p3 0.407 0.384 0.342);
+      --gold9: color(display-p3 0.579 0.517 0.41);
+      --gold10: color(display-p3 0.628 0.566 0.463);
+      --gold11: color(display-p3 0.784 0.728 0.635);
+      --gold12: color(display-p3 0.906 0.887 0.855);
+      --grass1: color(display-p3 0.062 0.083 0.067);
+      --grass2: color(display-p3 0.083 0.103 0.085);
+      --grass3: color(display-p3 0.118 0.163 0.122);
+      --grass4: color(display-p3 0.142 0.225 0.15);
+      --grass5: color(display-p3 0.178 0.279 0.186);
+      --grass6: color(display-p3 0.217 0.337 0.224);
+      --grass7: color(display-p3 0.258 0.4 0.264);
+      --grass8: color(display-p3 0.302 0.47 0.305);
+      --grass9: color(display-p3 0.38 0.647 0.378);
+      --grass10: color(display-p3 0.426 0.694 0.426);
+      --grass11: color(display-p3 0.535 0.807 0.542);
+      --grass12: color(display-p3 0.797 0.936 0.776);
+      --gray1: color(display-p3 0.067 0.067 0.067);
+      --gray2: color(display-p3 0.098 0.098 0.098);
+      --gray3: color(display-p3 0.135 0.135 0.135);
+      --gray4: color(display-p3 0.163 0.163 0.163);
+      --gray5: color(display-p3 0.192 0.192 0.192);
+      --gray6: color(display-p3 0.228 0.228 0.228);
+      --gray7: color(display-p3 0.283 0.283 0.283);
+      --gray8: color(display-p3 0.375 0.375 0.375);
+      --gray9: color(display-p3 0.431 0.431 0.431);
+      --gray10: color(display-p3 0.484 0.484 0.484);
+      --gray11: color(display-p3 0.706 0.706 0.706);
+      --gray12: color(display-p3 0.933 0.933 0.933);
+      --green1: color(display-p3 0.062 0.083 0.071);
+      --green2: color(display-p3 0.079 0.106 0.09);
+      --green3: color(display-p3 0.1 0.173 0.133);
+      --green4: color(display-p3 0.115 0.229 0.166);
+      --green5: color(display-p3 0.147 0.282 0.206);
+      --green6: color(display-p3 0.185 0.338 0.25);
+      --green7: color(display-p3 0.227 0.403 0.298);
+      --green8: color(display-p3 0.27 0.479 0.351);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.357 0.682 0.474);
+      --green11: color(display-p3 0.434 0.828 0.573);
+      --green12: color(display-p3 0.747 0.938 0.807);
+      --indigo1: color(display-p3 0.068 0.074 0.118);
+      --indigo2: color(display-p3 0.081 0.089 0.144);
+      --indigo3: color(display-p3 0.105 0.141 0.275);
+      --indigo4: color(display-p3 0.129 0.18 0.369);
+      --indigo5: color(display-p3 0.163 0.22 0.439);
+      --indigo6: color(display-p3 0.203 0.262 0.5);
+      --indigo7: color(display-p3 0.245 0.309 0.575);
+      --indigo8: color(display-p3 0.285 0.362 0.674);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.354 0.445 0.866);
+      --indigo11: color(display-p3 0.63 0.69 1);
+      --indigo12: color(display-p3 0.848 0.881 0.99);
+      --iris1: color(display-p3 0.075 0.075 0.114);
+      --iris2: color(display-p3 0.089 0.086 0.14);
+      --iris3: color(display-p3 0.128 0.134 0.272);
+      --iris4: color(display-p3 0.153 0.165 0.382);
+      --iris5: color(display-p3 0.192 0.201 0.44);
+      --iris6: color(display-p3 0.239 0.241 0.491);
+      --iris7: color(display-p3 0.291 0.289 0.565);
+      --iris8: color(display-p3 0.35 0.345 0.673);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.428 0.416 0.843);
+      --iris11: color(display-p3 0.685 0.662 1);
+      --iris12: color(display-p3 0.878 0.875 0.986);
+      --jade1: color(display-p3 0.059 0.083 0.071);
+      --jade2: color(display-p3 0.078 0.11 0.094);
+      --jade3: color(display-p3 0.091 0.176 0.138);
+      --jade4: color(display-p3 0.102 0.228 0.177);
+      --jade5: color(display-p3 0.133 0.279 0.221);
+      --jade6: color(display-p3 0.174 0.334 0.273);
+      --jade7: color(display-p3 0.219 0.402 0.335);
+      --jade8: color(display-p3 0.263 0.488 0.411);
+      --jade9: color(display-p3 0.319 0.63 0.521);
+      --jade10: color(display-p3 0.338 0.68 0.555);
+      --jade11: color(display-p3 0.4 0.835 0.656);
+      --jade12: color(display-p3 0.734 0.934 0.838);
+      --lime1: color(display-p3 0.067 0.073 0.048);
+      --lime2: color(display-p3 0.086 0.1 0.067);
+      --lime3: color(display-p3 0.13 0.16 0.099);
+      --lime4: color(display-p3 0.172 0.214 0.126);
+      --lime5: color(display-p3 0.213 0.266 0.153);
+      --lime6: color(display-p3 0.257 0.321 0.182);
+      --lime7: color(display-p3 0.307 0.383 0.215);
+      --lime8: color(display-p3 0.365 0.456 0.25);
+      --lime9: color(display-p3 0.78 0.928 0.466);
+      --lime10: color(display-p3 0.865 0.995 0.519);
+      --lime11: color(display-p3 0.771 0.893 0.485);
+      --lime12: color(display-p3 0.905 0.966 0.753);
+      --mauve1: color(display-p3 0.07 0.067 0.074);
+      --mauve2: color(display-p3 0.101 0.098 0.105);
+      --mauve3: color(display-p3 0.138 0.134 0.144);
+      --mauve4: color(display-p3 0.167 0.161 0.175);
+      --mauve5: color(display-p3 0.196 0.189 0.206);
+      --mauve6: color(display-p3 0.232 0.225 0.245);
+      --mauve7: color(display-p3 0.286 0.277 0.302);
+      --mauve8: color(display-p3 0.383 0.373 0.408);
+      --mauve9: color(display-p3 0.434 0.428 0.467);
+      --mauve10: color(display-p3 0.487 0.48 0.519);
+      --mauve11: color(display-p3 0.707 0.7 0.735);
+      --mauve12: color(display-p3 0.933 0.933 0.94);
+      --mint1: color(display-p3 0.059 0.082 0.081);
+      --mint2: color(display-p3 0.068 0.104 0.105);
+      --mint3: color(display-p3 0.077 0.17 0.168);
+      --mint4: color(display-p3 0.068 0.224 0.22);
+      --mint5: color(display-p3 0.104 0.275 0.264);
+      --mint6: color(display-p3 0.154 0.332 0.313);
+      --mint7: color(display-p3 0.207 0.403 0.373);
+      --mint8: color(display-p3 0.258 0.49 0.441);
+      --mint9: color(display-p3 0.62 0.908 0.834);
+      --mint10: color(display-p3 0.725 0.954 0.898);
+      --mint11: color(display-p3 0.482 0.825 0.733);
+      --mint12: color(display-p3 0.807 0.955 0.887);
+      --olive1: color(display-p3 0.067 0.07 0.063);
+      --olive2: color(display-p3 0.095 0.098 0.091);
+      --olive3: color(display-p3 0.131 0.135 0.126);
+      --olive4: color(display-p3 0.158 0.163 0.153);
+      --olive5: color(display-p3 0.186 0.192 0.18);
+      --olive6: color(display-p3 0.221 0.229 0.215);
+      --olive7: color(display-p3 0.273 0.284 0.266);
+      --olive8: color(display-p3 0.365 0.382 0.359);
+      --olive9: color(display-p3 0.414 0.438 0.404);
+      --olive10: color(display-p3 0.467 0.49 0.458);
+      --olive11: color(display-p3 0.69 0.709 0.682);
+      --olive12: color(display-p3 0.927 0.933 0.926);
+      --orange1: color(display-p3 0.088 0.07 0.057);
+      --orange2: color(display-p3 0.113 0.089 0.061);
+      --orange3: color(display-p3 0.189 0.12 0.056);
+      --orange4: color(display-p3 0.262 0.132 0);
+      --orange5: color(display-p3 0.315 0.168 0.016);
+      --orange6: color(display-p3 0.376 0.219 0.088);
+      --orange7: color(display-p3 0.465 0.283 0.147);
+      --orange8: color(display-p3 0.601 0.359 0.201);
+      --orange9: color(display-p3 0.9 0.45 0.2);
+      --orange10: color(display-p3 0.98 0.51 0.23);
+      --orange11: color(display-p3 1 0.63 0.38);
+      --orange12: color(display-p3 0.98 0.883 0.775);
+      --pink1: color(display-p3 0.093 0.068 0.089);
+      --pink2: color(display-p3 0.121 0.073 0.11);
+      --pink3: color(display-p3 0.198 0.098 0.179);
+      --pink4: color(display-p3 0.271 0.095 0.231);
+      --pink5: color(display-p3 0.32 0.127 0.273);
+      --pink6: color(display-p3 0.382 0.177 0.326);
+      --pink7: color(display-p3 0.477 0.238 0.405);
+      --pink8: color(display-p3 0.612 0.304 0.51);
+      --pink9: color(display-p3 0.775 0.297 0.61);
+      --pink10: color(display-p3 0.808 0.356 0.645);
+      --pink11: color(display-p3 1 0.535 0.78);
+      --pink12: color(display-p3 0.964 0.826 0.912);
+      --plum1: color(display-p3 0.09 0.068 0.092);
+      --plum2: color(display-p3 0.118 0.077 0.121);
+      --plum3: color(display-p3 0.192 0.105 0.202);
+      --plum4: color(display-p3 0.25 0.121 0.271);
+      --plum5: color(display-p3 0.293 0.152 0.319);
+      --plum6: color(display-p3 0.343 0.198 0.372);
+      --plum7: color(display-p3 0.424 0.262 0.461);
+      --plum8: color(display-p3 0.54 0.341 0.595);
+      --plum9: color(display-p3 0.624 0.313 0.708);
+      --plum10: color(display-p3 0.666 0.365 0.748);
+      --plum11: color(display-p3 0.86 0.602 0.933);
+      --plum12: color(display-p3 0.936 0.836 0.949);
+      --purple1: color(display-p3 0.09 0.068 0.103);
+      --purple2: color(display-p3 0.113 0.082 0.134);
+      --purple3: color(display-p3 0.175 0.112 0.224);
+      --purple4: color(display-p3 0.224 0.137 0.297);
+      --purple5: color(display-p3 0.264 0.167 0.349);
+      --purple6: color(display-p3 0.311 0.208 0.406);
+      --purple7: color(display-p3 0.381 0.266 0.496);
+      --purple8: color(display-p3 0.49 0.349 0.649);
+      --purple9: color(display-p3 0.523 0.318 0.751);
+      --purple10: color(display-p3 0.57 0.373 0.791);
+      --purple11: color(display-p3 0.8 0.62 1);
+      --purple12: color(display-p3 0.913 0.854 0.971);
+      --red1: color(display-p3 0.093 0.068 0.067);
+      --red2: color(display-p3 0.118 0.077 0.079);
+      --red3: color(display-p3 0.211 0.081 0.099);
+      --red4: color(display-p3 0.287 0.079 0.113);
+      --red5: color(display-p3 0.348 0.11 0.142);
+      --red6: color(display-p3 0.414 0.16 0.183);
+      --red7: color(display-p3 0.508 0.224 0.236);
+      --red8: color(display-p3 0.659 0.298 0.297);
+      --red9: color(display-p3 0.83 0.329 0.324);
+      --red10: color(display-p3 0.861 0.403 0.387);
+      --red11: color(display-p3 1 0.57 0.55);
+      --red12: color(display-p3 0.971 0.826 0.852);
+      --ruby1: color(display-p3 0.093 0.068 0.074);
+      --ruby2: color(display-p3 0.113 0.083 0.089);
+      --ruby3: color(display-p3 0.208 0.088 0.117);
+      --ruby4: color(display-p3 0.279 0.092 0.147);
+      --ruby5: color(display-p3 0.337 0.12 0.18);
+      --ruby6: color(display-p3 0.401 0.166 0.223);
+      --ruby7: color(display-p3 0.495 0.224 0.281);
+      --ruby8: color(display-p3 0.652 0.295 0.359);
+      --ruby9: color(display-p3 0.83 0.323 0.408);
+      --ruby10: color(display-p3 0.857 0.392 0.455);
+      --ruby11: color(display-p3 1 0.57 0.59);
+      --ruby12: color(display-p3 0.968 0.83 0.88);
+      --sage1: color(display-p3 0.064 0.07 0.067);
+      --sage2: color(display-p3 0.092 0.098 0.094);
+      --sage3: color(display-p3 0.128 0.135 0.131);
+      --sage4: color(display-p3 0.155 0.164 0.159);
+      --sage5: color(display-p3 0.183 0.193 0.188);
+      --sage6: color(display-p3 0.218 0.23 0.224);
+      --sage7: color(display-p3 0.269 0.285 0.277);
+      --sage8: color(display-p3 0.362 0.382 0.373);
+      --sage9: color(display-p3 0.398 0.438 0.421);
+      --sage10: color(display-p3 0.453 0.49 0.474);
+      --sage11: color(display-p3 0.685 0.709 0.697);
+      --sage12: color(display-p3 0.927 0.933 0.93);
+      --sand1: color(display-p3 0.067 0.067 0.063);
+      --sand2: color(display-p3 0.098 0.098 0.094);
+      --sand3: color(display-p3 0.135 0.135 0.129);
+      --sand4: color(display-p3 0.164 0.163 0.156);
+      --sand5: color(display-p3 0.193 0.192 0.183);
+      --sand6: color(display-p3 0.23 0.229 0.217);
+      --sand7: color(display-p3 0.285 0.282 0.267);
+      --sand8: color(display-p3 0.384 0.378 0.357);
+      --sand9: color(display-p3 0.434 0.428 0.403);
+      --sand10: color(display-p3 0.487 0.481 0.456);
+      --sand11: color(display-p3 0.707 0.703 0.68);
+      --sand12: color(display-p3 0.933 0.933 0.926);
+      --sky1: color(display-p3 0.056 0.078 0.116);
+      --sky2: color(display-p3 0.075 0.101 0.149);
+      --sky3: color(display-p3 0.089 0.154 0.244);
+      --sky4: color(display-p3 0.106 0.207 0.323);
+      --sky5: color(display-p3 0.135 0.261 0.394);
+      --sky6: color(display-p3 0.17 0.322 0.469);
+      --sky7: color(display-p3 0.205 0.394 0.557);
+      --sky8: color(display-p3 0.232 0.48 0.665);
+      --sky9: color(display-p3 0.585 0.877 0.983);
+      --sky10: color(display-p3 0.718 0.925 0.991);
+      --sky11: color(display-p3 0.536 0.772 0.924);
+      --sky12: color(display-p3 0.799 0.947 0.993);
+      --slate1: color(display-p3 0.067 0.067 0.074);
+      --slate2: color(display-p3 0.095 0.098 0.105);
+      --slate3: color(display-p3 0.13 0.135 0.145);
+      --slate4: color(display-p3 0.156 0.163 0.176);
+      --slate5: color(display-p3 0.183 0.191 0.206);
+      --slate6: color(display-p3 0.215 0.226 0.244);
+      --slate7: color(display-p3 0.265 0.28 0.302);
+      --slate8: color(display-p3 0.357 0.381 0.409);
+      --slate9: color(display-p3 0.415 0.431 0.463);
+      --slate10: color(display-p3 0.469 0.483 0.514);
+      --slate11: color(display-p3 0.692 0.704 0.728);
+      --slate12: color(display-p3 0.93 0.933 0.94);
+      --teal1: color(display-p3 0.059 0.083 0.079);
+      --teal2: color(display-p3 0.075 0.11 0.107);
+      --teal3: color(display-p3 0.087 0.175 0.165);
+      --teal4: color(display-p3 0.087 0.227 0.214);
+      --teal5: color(display-p3 0.12 0.277 0.261);
+      --teal6: color(display-p3 0.162 0.335 0.314);
+      --teal7: color(display-p3 0.205 0.406 0.379);
+      --teal8: color(display-p3 0.245 0.489 0.453);
+      --teal9: color(display-p3 0.297 0.637 0.581);
+      --teal10: color(display-p3 0.319 0.69 0.62);
+      --teal11: color(display-p3 0.388 0.835 0.719);
+      --teal12: color(display-p3 0.734 0.934 0.87);
+      --tomato1: color(display-p3 0.09 0.068 0.067);
+      --tomato2: color(display-p3 0.115 0.084 0.076);
+      --tomato3: color(display-p3 0.205 0.097 0.083);
+      --tomato4: color(display-p3 0.282 0.099 0.077);
+      --tomato5: color(display-p3 0.339 0.129 0.101);
+      --tomato6: color(display-p3 0.398 0.179 0.141);
+      --tomato7: color(display-p3 0.487 0.245 0.194);
+      --tomato8: color(display-p3 0.629 0.322 0.248);
+      --tomato9: color(display-p3 0.831 0.345 0.231);
+      --tomato10: color(display-p3 0.862 0.415 0.298);
+      --tomato11: color(display-p3 1 0.585 0.455);
+      --tomato12: color(display-p3 0.959 0.833 0.802);
+      --violet1: color(display-p3 0.077 0.071 0.118);
+      --violet2: color(display-p3 0.101 0.084 0.141);
+      --violet3: color(display-p3 0.154 0.123 0.256);
+      --violet4: color(display-p3 0.191 0.148 0.345);
+      --violet5: color(display-p3 0.226 0.182 0.396);
+      --violet6: color(display-p3 0.269 0.223 0.449);
+      --violet7: color(display-p3 0.326 0.277 0.53);
+      --violet8: color(display-p3 0.399 0.346 0.656);
+      --violet9: color(display-p3 0.417 0.341 0.784);
+      --violet10: color(display-p3 0.477 0.402 0.823);
+      --violet11: color(display-p3 0.72 0.65 1);
+      --violet12: color(display-p3 0.883 0.867 0.986);
+      --yellow1: color(display-p3 0.078 0.069 0.047);
+      --yellow2: color(display-p3 0.103 0.094 0.063);
+      --yellow3: color(display-p3 0.168 0.137 0.039);
+      --yellow4: color(display-p3 0.209 0.169 0);
+      --yellow5: color(display-p3 0.255 0.209 0);
+      --yellow6: color(display-p3 0.31 0.261 0.07);
+      --yellow7: color(display-p3 0.389 0.331 0.135);
+      --yellow8: color(display-p3 0.497 0.42 0.182);
+      --yellow9: color(display-p3 1 0.92 0.22);
+      --yellow10: color(display-p3 1 1 0.456);
+      --yellow11: color(display-p3 0.948 0.885 0.392);
+      --yellow12: color(display-p3 0.959 0.934 0.731);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --amber1: #16120c;
+      --amber2: #1d180f;
+      --amber3: #302008;
+      --amber4: #3f2700;
+      --amber5: #4d3000;
+      --amber6: #5c3d05;
+      --amber7: #714f19;
+      --amber8: #8f6424;
+      --amber9: #ffc53d;
+      --amber10: #ffd60a;
+      --amber11: #ffca16;
+      --amber12: #ffe7b3;
+      --amber-contrast: var(--amber1);
+      --amber-hover: var(--amber10);
+      --blue1: #0d1520;
+      --blue2: #111927;
+      --blue3: #0d2847;
+      --blue4: #003362;
+      --blue5: #004074;
+      --blue6: #104d87;
+      --blue7: #205d9e;
+      --blue8: #2870bd;
+      --blue9: #0090ff;
+      --blue10: #3b9eff;
+      --blue11: #70b8ff;
+      --blue12: #c2e6ff;
+      --blue-contrast: var(--blue1);
+      --blue-hover: var(--blue10);
+      --bronze1: #141110;
+      --bronze2: #1c1917;
+      --bronze3: #262220;
+      --bronze4: #302a27;
+      --bronze5: #3b3330;
+      --bronze6: #493e3a;
+      --bronze7: #5a4c47;
+      --bronze8: #6f5f58;
+      --bronze9: #a18072;
+      --bronze10: #ae8c7e;
+      --bronze11: #d4b3a5;
+      --bronze12: #ede0d9;
+      --bronze-contrast: var(--bronze1);
+      --bronze-hover: var(--bronze10);
+      --brown1: #12110f;
+      --brown2: #1c1816;
+      --brown3: #28211d;
+      --brown4: #322922;
+      --brown5: #3e3128;
+      --brown6: #4d3c2f;
+      --brown7: #614a39;
+      --brown8: #7c5f46;
+      --brown9: #ad7f58;
+      --brown10: #b88c67;
+      --brown11: #dbb594;
+      --brown12: #f2e1ca;
+      --brown-contrast: var(--brown1);
+      --brown-hover: var(--brown10);
+      --crimson1: #191114;
+      --crimson2: #201318;
+      --crimson3: #381525;
+      --crimson4: #4d122f;
+      --crimson5: #5c1839;
+      --crimson6: #6d2545;
+      --crimson7: #873356;
+      --crimson8: #b0436e;
+      --crimson9: #e93d82;
+      --crimson10: #ee518a;
+      --crimson11: #ff92ad;
+      --crimson12: #fdd3e8;
+      --crimson-contrast: var(--crimson1);
+      --crimson-hover: var(--crimson10);
+      --cyan1: #0b161a;
+      --cyan2: #101b20;
+      --cyan3: #082c36;
+      --cyan4: #003848;
+      --cyan5: #004558;
+      --cyan6: #045468;
+      --cyan7: #12677e;
+      --cyan8: #11809c;
+      --cyan9: #00a2c7;
+      --cyan10: #23afd0;
+      --cyan11: #4ccce6;
+      --cyan12: #b6ecf7;
+      --cyan-contrast: var(--cyan1);
+      --cyan-hover: var(--cyan10);
+      --gold1: #121211;
+      --gold2: #1b1a17;
+      --gold3: #24231f;
+      --gold4: #2d2b26;
+      --gold5: #38352e;
+      --gold6: #444039;
+      --gold7: #544f46;
+      --gold8: #696256;
+      --gold9: #978365;
+      --gold10: #a39073;
+      --gold11: #cbb99f;
+      --gold12: #e8e2d9;
+      --gold-contrast: var(--gold1);
+      --gold-hover: var(--gold10);
+      --grass1: #0e1511;
+      --grass2: #141a15;
+      --grass3: #1b2a1e;
+      --grass4: #1d3a24;
+      --grass5: #25482d;
+      --grass6: #2d5736;
+      --grass7: #366740;
+      --grass8: #3e7949;
+      --grass9: #46a758;
+      --grass10: #53b365;
+      --grass11: #71d083;
+      --grass12: #c2f0c2;
+      --grass-contrast: var(--grass1);
+      --grass-hover: var(--grass10);
+      --gray1: #111111;
+      --gray2: #191919;
+      --gray3: #222222;
+      --gray4: #2a2a2a;
+      --gray5: #313131;
+      --gray6: #3a3a3a;
+      --gray7: #484848;
+      --gray8: #606060;
+      --gray9: #6e6e6e;
+      --gray10: #7b7b7b;
+      --gray11: #b4b4b4;
+      --gray12: #eeeeee;
+      --gray-contrast: #fff;
+      --gray-hover: var(--gray10);
+      --green1: #0e1512;
+      --green2: #121b17;
+      --green3: #132d21;
+      --green4: #113b29;
+      --green5: #174933;
+      --green6: #20573e;
+      --green7: #28684a;
+      --green8: #2f7c57;
+      --green9: #30a46c;
+      --green10: #33b074;
+      --green11: #3dd68c;
+      --green12: #b1f1cb;
+      --green-contrast: var(--green1);
+      --green-hover: var(--green10);
+      --indigo1: #11131f;
+      --indigo2: #141726;
+      --indigo3: #182449;
+      --indigo4: #1d2e62;
+      --indigo5: #253974;
+      --indigo6: #304384;
+      --indigo7: #3a4f97;
+      --indigo8: #435db1;
+      --indigo9: #3e63dd;
+      --indigo10: #5472e4;
+      --indigo11: #9eb1ff;
+      --indigo12: #d6e1ff;
+      --indigo-contrast: #fff;
+      --indigo-hover: var(--indigo10);
+      --iris1: #13131e;
+      --iris2: #171625;
+      --iris3: #202248;
+      --iris4: #262a65;
+      --iris5: #303374;
+      --iris6: #3d3e82;
+      --iris7: #4a4a95;
+      --iris8: #5958b1;
+      --iris9: #5b5bd6;
+      --iris10: #6e6ade;
+      --iris11: #b1a9ff;
+      --iris12: #e0dffe;
+      --iris-contrast: #fff;
+      --iris-hover: var(--iris10);
+      --jade1: #0d1512;
+      --jade2: #121c18;
+      --jade3: #0f2e22;
+      --jade4: #0b3b2c;
+      --jade5: #114837;
+      --jade6: #1b5745;
+      --jade7: #246854;
+      --jade8: #2a7e68;
+      --jade9: #29a383;
+      --jade10: #27b08b;
+      --jade11: #1fd8a4;
+      --jade12: #adf0d4;
+      --jade-contrast: var(--jade1);
+      --jade-hover: var(--jade10);
+      --lime1: #11130c;
+      --lime2: #151a10;
+      --lime3: #1f2917;
+      --lime4: #29371d;
+      --lime5: #334423;
+      --lime6: #3d522a;
+      --lime7: #496231;
+      --lime8: #577538;
+      --lime9: #bdee63;
+      --lime10: #d4ff70;
+      --lime11: #bde56c;
+      --lime12: #e3f7ba;
+      --lime-contrast: var(--lime1);
+      --lime-hover: var(--lime10);
+      --mauve1: #121113;
+      --mauve2: #1a191b;
+      --mauve3: #232225;
+      --mauve4: #2b292d;
+      --mauve5: #323035;
+      --mauve6: #3c393f;
+      --mauve7: #49474e;
+      --mauve8: #625f69;
+      --mauve9: #6f6d78;
+      --mauve10: #7c7a85;
+      --mauve11: #b5b2bc;
+      --mauve12: #eeeef0;
+      --mauve-contrast: #fff;
+      --mauve-hover: var(--mauve10);
+      --mint1: #0e1515;
+      --mint2: #0f1b1b;
+      --mint3: #092c2b;
+      --mint4: #003a38;
+      --mint5: #004744;
+      --mint6: #105650;
+      --mint7: #1e685f;
+      --mint8: #277f70;
+      --mint9: #86ead4;
+      --mint10: #a8f5e5;
+      --mint11: #58d5ba;
+      --mint12: #c4f5e1;
+      --mint-contrast: var(--mint1);
+      --mint-hover: var(--mint10);
+      --olive1: #111210;
+      --olive2: #181917;
+      --olive3: #212220;
+      --olive4: #282a27;
+      --olive5: #2f312e;
+      --olive6: #383a36;
+      --olive7: #454843;
+      --olive8: #5c625b;
+      --olive9: #687066;
+      --olive10: #767d74;
+      --olive11: #afb5ad;
+      --olive12: #eceeec;
+      --olive-contrast: #fff;
+      --olive-hover: var(--olive10);
+      --orange1: #17120e;
+      --orange2: #1e160f;
+      --orange3: #331e0b;
+      --orange4: #462100;
+      --orange5: #562800;
+      --orange6: #66350c;
+      --orange7: #7e451d;
+      --orange8: #a35829;
+      --orange9: #f76b15;
+      --orange10: #ff801f;
+      --orange11: #ffa057;
+      --orange12: #ffe0c2;
+      --orange-contrast: var(--orange1);
+      --orange-hover: var(--orange10);
+      --pink1: #191117;
+      --pink2: #21121d;
+      --pink3: #37172f;
+      --pink4: #4b143d;
+      --pink5: #591c47;
+      --pink6: #692955;
+      --pink7: #833869;
+      --pink8: #a84885;
+      --pink9: #d6409f;
+      --pink10: #de51a8;
+      --pink11: #ff8dcc;
+      --pink12: #fdd1ea;
+      --pink-contrast: var(--pink1);
+      --pink-hover: var(--pink10);
+      --plum1: #181118;
+      --plum2: #201320;
+      --plum3: #351a35;
+      --plum4: #451d47;
+      --plum5: #512454;
+      --plum6: #5e3061;
+      --plum7: #734079;
+      --plum8: #92549c;
+      --plum9: #ab4aba;
+      --plum10: #b658c4;
+      --plum11: #e796f3;
+      --plum12: #f4d4f4;
+      --plum-contrast: #fff;
+      --plum-hover: var(--plum10);
+      --purple1: #18111b;
+      --purple2: #1e1523;
+      --purple3: #301c3b;
+      --purple4: #3d224e;
+      --purple5: #48295c;
+      --purple6: #54346b;
+      --purple7: #664282;
+      --purple8: #8457aa;
+      --purple9: #8e4ec6;
+      --purple10: #9a5cd0;
+      --purple11: #d19dff;
+      --purple12: #ecd9fa;
+      --purple-contrast: #fff;
+      --purple-hover: var(--purple10);
+      --red1: #191111;
+      --red2: #201314;
+      --red3: #3b1219;
+      --red4: #500f1c;
+      --red5: #611623;
+      --red6: #72232d;
+      --red7: #8c333a;
+      --red8: #b54548;
+      --red9: #e5484d;
+      --red10: #ec5d5e;
+      --red11: #ff9592;
+      --red12: #ffd1d9;
+      --red-contrast: var(--red1);
+      --red-hover: var(--red10);
+      --ruby1: #191113;
+      --ruby2: #1e1517;
+      --ruby3: #3a141e;
+      --ruby4: #4e1325;
+      --ruby5: #5e1a2e;
+      --ruby6: #6f2539;
+      --ruby7: #883447;
+      --ruby8: #b3445a;
+      --ruby9: #e54666;
+      --ruby10: #ec5a72;
+      --ruby11: #ff949d;
+      --ruby12: #fed2e1;
+      --ruby-contrast: var(--ruby1);
+      --ruby-hover: var(--ruby10);
+      --sage1: #101211;
+      --sage2: #171918;
+      --sage3: #202221;
+      --sage4: #272a29;
+      --sage5: #2e3130;
+      --sage6: #373b39;
+      --sage7: #444947;
+      --sage8: #5b625f;
+      --sage9: #63706b;
+      --sage10: #717d79;
+      --sage11: #adb5b2;
+      --sage12: #eceeed;
+      --sage-contrast: #fff;
+      --sage-hover: var(--sage10);
+      --sand1: #111110;
+      --sand2: #191918;
+      --sand3: #222221;
+      --sand4: #2a2a28;
+      --sand5: #31312e;
+      --sand6: #3b3a37;
+      --sand7: #494844;
+      --sand8: #62605b;
+      --sand9: #6f6d66;
+      --sand10: #7c7b74;
+      --sand11: #b5b3ad;
+      --sand12: #eeeeec;
+      --sand-contrast: #fff;
+      --sand-hover: var(--sand10);
+      --sky1: #0d141f;
+      --sky2: #111a27;
+      --sky3: #112840;
+      --sky4: #113555;
+      --sky5: #154467;
+      --sky6: #1b537b;
+      --sky7: #1f6692;
+      --sky8: #197cae;
+      --sky9: #7ce2fe;
+      --sky10: #a8eeff;
+      --sky11: #75c7f0;
+      --sky12: #c2f3ff;
+      --sky-contrast: var(--sky1);
+      --sky-hover: var(--sky10);
+      --slate1: #111113;
+      --slate2: #18191b;
+      --slate3: #212225;
+      --slate4: #272a2d;
+      --slate5: #2e3135;
+      --slate6: #363a3f;
+      --slate7: #43484e;
+      --slate8: #5a6169;
+      --slate9: #696e77;
+      --slate10: #777b84;
+      --slate11: #b0b4ba;
+      --slate12: #edeef0;
+      --slate-contrast: #fff;
+      --slate-hover: var(--slate10);
+      --teal1: #0d1514;
+      --teal2: #111c1b;
+      --teal3: #0d2d2a;
+      --teal4: #023b37;
+      --teal5: #084843;
+      --teal6: #145750;
+      --teal7: #1c6961;
+      --teal8: #207e73;
+      --teal9: #12a594;
+      --teal10: #0eb39e;
+      --teal11: #0bd8b6;
+      --teal12: #adf0dd;
+      --teal-contrast: var(--teal1);
+      --teal-hover: var(--teal10);
+      --tomato1: #181111;
+      --tomato2: #1f1513;
+      --tomato3: #391714;
+      --tomato4: #4e1511;
+      --tomato5: #5e1c16;
+      --tomato6: #6e2920;
+      --tomato7: #853a2d;
+      --tomato8: #ac4d39;
+      --tomato9: #e54d2e;
+      --tomato10: #ec6142;
+      --tomato11: #ff977d;
+      --tomato12: #fbd3cb;
+      --tomato-contrast: var(--tomato1);
+      --tomato-hover: var(--tomato10);
+      --violet1: #14121f;
+      --violet2: #1b1525;
+      --violet3: #291f43;
+      --violet4: #33255b;
+      --violet5: #3c2e69;
+      --violet6: #473876;
+      --violet7: #56468b;
+      --violet8: #6958ad;
+      --violet9: #6e56cf;
+      --violet10: #7d66d9;
+      --violet11: #baa7ff;
+      --violet12: #e2ddfe;
+      --violet-contrast: #fff;
+      --violet-hover: var(--violet10);
+      --yellow1: #14120b;
+      --yellow2: #1b180f;
+      --yellow3: #2d2305;
+      --yellow4: #362b00;
+      --yellow5: #433500;
+      --yellow6: #524202;
+      --yellow7: #665417;
+      --yellow8: #836a21;
+      --yellow9: #ffe629;
+      --yellow10: #ffff57;
+      --yellow11: #f5e147;
+      --yellow12: #f6eeb4;
+      --yellow-contrast: var(--yellow1);
+      --yellow-hover: var(--yellow10);
+
+      @media (color-gamut: p3) {
+        --amber1: color(display-p3 0.082 0.07 0.05);
+        --amber2: color(display-p3 0.111 0.094 0.064);
+        --amber3: color(display-p3 0.178 0.128 0.049);
+        --amber4: color(display-p3 0.239 0.156 0);
+        --amber5: color(display-p3 0.29 0.193 0);
+        --amber6: color(display-p3 0.344 0.245 0.076);
+        --amber7: color(display-p3 0.422 0.314 0.141);
+        --amber8: color(display-p3 0.535 0.399 0.189);
+        --amber9: color(display-p3 1 0.77 0.26);
+        --amber10: color(display-p3 1 0.87 0.15);
+        --amber11: color(display-p3 1 0.8 0.29);
+        --amber12: color(display-p3 0.984 0.909 0.726);
+        --blue1: color(display-p3 0.057 0.081 0.122);
+        --blue2: color(display-p3 0.072 0.098 0.147);
+        --blue3: color(display-p3 0.078 0.154 0.27);
+        --blue4: color(display-p3 0.033 0.197 0.37);
+        --blue5: color(display-p3 0.08 0.245 0.441);
+        --blue6: color(display-p3 0.14 0.298 0.511);
+        --blue7: color(display-p3 0.195 0.361 0.6);
+        --blue8: color(display-p3 0.239 0.434 0.72);
+        --blue9: color(display-p3 0.247 0.556 0.969);
+        --blue10: color(display-p3 0.344 0.612 0.973);
+        --blue11: color(display-p3 0.49 0.72 1);
+        --blue12: color(display-p3 0.788 0.898 0.99);
+        --bronze1: color(display-p3 0.076 0.067 0.063);
+        --bronze2: color(display-p3 0.106 0.097 0.093);
+        --bronze3: color(display-p3 0.147 0.132 0.125);
+        --bronze4: color(display-p3 0.185 0.166 0.156);
+        --bronze5: color(display-p3 0.227 0.202 0.19);
+        --bronze6: color(display-p3 0.278 0.246 0.23);
+        --bronze7: color(display-p3 0.343 0.302 0.281);
+        --bronze8: color(display-p3 0.426 0.374 0.347);
+        --bronze9: color(display-p3 0.611 0.507 0.455);
+        --bronze10: color(display-p3 0.66 0.556 0.504);
+        --bronze11: color(display-p3 0.81 0.707 0.655);
+        --bronze12: color(display-p3 0.921 0.88 0.854);
+        --brown1: color(display-p3 0.071 0.067 0.059);
+        --brown2: color(display-p3 0.107 0.095 0.087);
+        --brown3: color(display-p3 0.151 0.13 0.115);
+        --brown4: color(display-p3 0.191 0.161 0.138);
+        --brown5: color(display-p3 0.235 0.194 0.162);
+        --brown6: color(display-p3 0.291 0.237 0.192);
+        --brown7: color(display-p3 0.365 0.295 0.232);
+        --brown8: color(display-p3 0.469 0.377 0.287);
+        --brown9: color(display-p3 0.651 0.505 0.368);
+        --brown10: color(display-p3 0.697 0.557 0.423);
+        --brown11: color(display-p3 0.835 0.715 0.597);
+        --brown12: color(display-p3 0.938 0.885 0.802);
+        --crimson1: color(display-p3 0.093 0.068 0.078);
+        --crimson2: color(display-p3 0.117 0.078 0.095);
+        --crimson3: color(display-p3 0.203 0.091 0.143);
+        --crimson4: color(display-p3 0.277 0.087 0.182);
+        --crimson5: color(display-p3 0.332 0.115 0.22);
+        --crimson6: color(display-p3 0.394 0.162 0.268);
+        --crimson7: color(display-p3 0.489 0.222 0.336);
+        --crimson8: color(display-p3 0.638 0.289 0.429);
+        --crimson9: color(display-p3 0.843 0.298 0.507);
+        --crimson10: color(display-p3 0.864 0.364 0.539);
+        --crimson11: color(display-p3 1 0.56 0.66);
+        --crimson12: color(display-p3 0.966 0.834 0.906);
+        --cyan1: color(display-p3 0.053 0.085 0.098);
+        --cyan2: color(display-p3 0.072 0.105 0.122);
+        --cyan3: color(display-p3 0.073 0.168 0.209);
+        --cyan4: color(display-p3 0.063 0.216 0.277);
+        --cyan5: color(display-p3 0.091 0.267 0.336);
+        --cyan6: color(display-p3 0.137 0.324 0.4);
+        --cyan7: color(display-p3 0.186 0.398 0.484);
+        --cyan8: color(display-p3 0.23 0.496 0.6);
+        --cyan9: color(display-p3 0.282 0.627 0.765);
+        --cyan10: color(display-p3 0.331 0.675 0.801);
+        --cyan11: color(display-p3 0.446 0.79 0.887);
+        --cyan12: color(display-p3 0.757 0.919 0.962);
+        --gold1: color(display-p3 0.071 0.071 0.067);
+        --gold2: color(display-p3 0.104 0.101 0.09);
+        --gold3: color(display-p3 0.141 0.136 0.122);
+        --gold4: color(display-p3 0.177 0.17 0.152);
+        --gold5: color(display-p3 0.217 0.207 0.185);
+        --gold6: color(display-p3 0.265 0.252 0.225);
+        --gold7: color(display-p3 0.327 0.31 0.277);
+        --gold8: color(display-p3 0.407 0.384 0.342);
+        --gold9: color(display-p3 0.579 0.517 0.41);
+        --gold10: color(display-p3 0.628 0.566 0.463);
+        --gold11: color(display-p3 0.784 0.728 0.635);
+        --gold12: color(display-p3 0.906 0.887 0.855);
+        --grass1: color(display-p3 0.062 0.083 0.067);
+        --grass2: color(display-p3 0.083 0.103 0.085);
+        --grass3: color(display-p3 0.118 0.163 0.122);
+        --grass4: color(display-p3 0.142 0.225 0.15);
+        --grass5: color(display-p3 0.178 0.279 0.186);
+        --grass6: color(display-p3 0.217 0.337 0.224);
+        --grass7: color(display-p3 0.258 0.4 0.264);
+        --grass8: color(display-p3 0.302 0.47 0.305);
+        --grass9: color(display-p3 0.38 0.647 0.378);
+        --grass10: color(display-p3 0.426 0.694 0.426);
+        --grass11: color(display-p3 0.535 0.807 0.542);
+        --grass12: color(display-p3 0.797 0.936 0.776);
+        --gray1: color(display-p3 0.067 0.067 0.067);
+        --gray2: color(display-p3 0.098 0.098 0.098);
+        --gray3: color(display-p3 0.135 0.135 0.135);
+        --gray4: color(display-p3 0.163 0.163 0.163);
+        --gray5: color(display-p3 0.192 0.192 0.192);
+        --gray6: color(display-p3 0.228 0.228 0.228);
+        --gray7: color(display-p3 0.283 0.283 0.283);
+        --gray8: color(display-p3 0.375 0.375 0.375);
+        --gray9: color(display-p3 0.431 0.431 0.431);
+        --gray10: color(display-p3 0.484 0.484 0.484);
+        --gray11: color(display-p3 0.706 0.706 0.706);
+        --gray12: color(display-p3 0.933 0.933 0.933);
+        --green1: color(display-p3 0.062 0.083 0.071);
+        --green2: color(display-p3 0.079 0.106 0.09);
+        --green3: color(display-p3 0.1 0.173 0.133);
+        --green4: color(display-p3 0.115 0.229 0.166);
+        --green5: color(display-p3 0.147 0.282 0.206);
+        --green6: color(display-p3 0.185 0.338 0.25);
+        --green7: color(display-p3 0.227 0.403 0.298);
+        --green8: color(display-p3 0.27 0.479 0.351);
+        --green9: color(display-p3 0.332 0.634 0.442);
+        --green10: color(display-p3 0.357 0.682 0.474);
+        --green11: color(display-p3 0.434 0.828 0.573);
+        --green12: color(display-p3 0.747 0.938 0.807);
+        --indigo1: color(display-p3 0.068 0.074 0.118);
+        --indigo2: color(display-p3 0.081 0.089 0.144);
+        --indigo3: color(display-p3 0.105 0.141 0.275);
+        --indigo4: color(display-p3 0.129 0.18 0.369);
+        --indigo5: color(display-p3 0.163 0.22 0.439);
+        --indigo6: color(display-p3 0.203 0.262 0.5);
+        --indigo7: color(display-p3 0.245 0.309 0.575);
+        --indigo8: color(display-p3 0.285 0.362 0.674);
+        --indigo9: color(display-p3 0.276 0.384 0.837);
+        --indigo10: color(display-p3 0.354 0.445 0.866);
+        --indigo11: color(display-p3 0.63 0.69 1);
+        --indigo12: color(display-p3 0.848 0.881 0.99);
+        --iris1: color(display-p3 0.075 0.075 0.114);
+        --iris2: color(display-p3 0.089 0.086 0.14);
+        --iris3: color(display-p3 0.128 0.134 0.272);
+        --iris4: color(display-p3 0.153 0.165 0.382);
+        --iris5: color(display-p3 0.192 0.201 0.44);
+        --iris6: color(display-p3 0.239 0.241 0.491);
+        --iris7: color(display-p3 0.291 0.289 0.565);
+        --iris8: color(display-p3 0.35 0.345 0.673);
+        --iris9: color(display-p3 0.357 0.357 0.81);
+        --iris10: color(display-p3 0.428 0.416 0.843);
+        --iris11: color(display-p3 0.685 0.662 1);
+        --iris12: color(display-p3 0.878 0.875 0.986);
+        --jade1: color(display-p3 0.059 0.083 0.071);
+        --jade2: color(display-p3 0.078 0.11 0.094);
+        --jade3: color(display-p3 0.091 0.176 0.138);
+        --jade4: color(display-p3 0.102 0.228 0.177);
+        --jade5: color(display-p3 0.133 0.279 0.221);
+        --jade6: color(display-p3 0.174 0.334 0.273);
+        --jade7: color(display-p3 0.219 0.402 0.335);
+        --jade8: color(display-p3 0.263 0.488 0.411);
+        --jade9: color(display-p3 0.319 0.63 0.521);
+        --jade10: color(display-p3 0.338 0.68 0.555);
+        --jade11: color(display-p3 0.4 0.835 0.656);
+        --jade12: color(display-p3 0.734 0.934 0.838);
+        --lime1: color(display-p3 0.067 0.073 0.048);
+        --lime2: color(display-p3 0.086 0.1 0.067);
+        --lime3: color(display-p3 0.13 0.16 0.099);
+        --lime4: color(display-p3 0.172 0.214 0.126);
+        --lime5: color(display-p3 0.213 0.266 0.153);
+        --lime6: color(display-p3 0.257 0.321 0.182);
+        --lime7: color(display-p3 0.307 0.383 0.215);
+        --lime8: color(display-p3 0.365 0.456 0.25);
+        --lime9: color(display-p3 0.78 0.928 0.466);
+        --lime10: color(display-p3 0.865 0.995 0.519);
+        --lime11: color(display-p3 0.771 0.893 0.485);
+        --lime12: color(display-p3 0.905 0.966 0.753);
+        --mauve1: color(display-p3 0.07 0.067 0.074);
+        --mauve2: color(display-p3 0.101 0.098 0.105);
+        --mauve3: color(display-p3 0.138 0.134 0.144);
+        --mauve4: color(display-p3 0.167 0.161 0.175);
+        --mauve5: color(display-p3 0.196 0.189 0.206);
+        --mauve6: color(display-p3 0.232 0.225 0.245);
+        --mauve7: color(display-p3 0.286 0.277 0.302);
+        --mauve8: color(display-p3 0.383 0.373 0.408);
+        --mauve9: color(display-p3 0.434 0.428 0.467);
+        --mauve10: color(display-p3 0.487 0.48 0.519);
+        --mauve11: color(display-p3 0.707 0.7 0.735);
+        --mauve12: color(display-p3 0.933 0.933 0.94);
+        --mint1: color(display-p3 0.059 0.082 0.081);
+        --mint2: color(display-p3 0.068 0.104 0.105);
+        --mint3: color(display-p3 0.077 0.17 0.168);
+        --mint4: color(display-p3 0.068 0.224 0.22);
+        --mint5: color(display-p3 0.104 0.275 0.264);
+        --mint6: color(display-p3 0.154 0.332 0.313);
+        --mint7: color(display-p3 0.207 0.403 0.373);
+        --mint8: color(display-p3 0.258 0.49 0.441);
+        --mint9: color(display-p3 0.62 0.908 0.834);
+        --mint10: color(display-p3 0.725 0.954 0.898);
+        --mint11: color(display-p3 0.482 0.825 0.733);
+        --mint12: color(display-p3 0.807 0.955 0.887);
+        --olive1: color(display-p3 0.067 0.07 0.063);
+        --olive2: color(display-p3 0.095 0.098 0.091);
+        --olive3: color(display-p3 0.131 0.135 0.126);
+        --olive4: color(display-p3 0.158 0.163 0.153);
+        --olive5: color(display-p3 0.186 0.192 0.18);
+        --olive6: color(display-p3 0.221 0.229 0.215);
+        --olive7: color(display-p3 0.273 0.284 0.266);
+        --olive8: color(display-p3 0.365 0.382 0.359);
+        --olive9: color(display-p3 0.414 0.438 0.404);
+        --olive10: color(display-p3 0.467 0.49 0.458);
+        --olive11: color(display-p3 0.69 0.709 0.682);
+        --olive12: color(display-p3 0.927 0.933 0.926);
+        --orange1: color(display-p3 0.088 0.07 0.057);
+        --orange2: color(display-p3 0.113 0.089 0.061);
+        --orange3: color(display-p3 0.189 0.12 0.056);
+        --orange4: color(display-p3 0.262 0.132 0);
+        --orange5: color(display-p3 0.315 0.168 0.016);
+        --orange6: color(display-p3 0.376 0.219 0.088);
+        --orange7: color(display-p3 0.465 0.283 0.147);
+        --orange8: color(display-p3 0.601 0.359 0.201);
+        --orange9: color(display-p3 0.9 0.45 0.2);
+        --orange10: color(display-p3 0.98 0.51 0.23);
+        --orange11: color(display-p3 1 0.63 0.38);
+        --orange12: color(display-p3 0.98 0.883 0.775);
+        --pink1: color(display-p3 0.093 0.068 0.089);
+        --pink2: color(display-p3 0.121 0.073 0.11);
+        --pink3: color(display-p3 0.198 0.098 0.179);
+        --pink4: color(display-p3 0.271 0.095 0.231);
+        --pink5: color(display-p3 0.32 0.127 0.273);
+        --pink6: color(display-p3 0.382 0.177 0.326);
+        --pink7: color(display-p3 0.477 0.238 0.405);
+        --pink8: color(display-p3 0.612 0.304 0.51);
+        --pink9: color(display-p3 0.775 0.297 0.61);
+        --pink10: color(display-p3 0.808 0.356 0.645);
+        --pink11: color(display-p3 1 0.535 0.78);
+        --pink12: color(display-p3 0.964 0.826 0.912);
+        --plum1: color(display-p3 0.09 0.068 0.092);
+        --plum2: color(display-p3 0.118 0.077 0.121);
+        --plum3: color(display-p3 0.192 0.105 0.202);
+        --plum4: color(display-p3 0.25 0.121 0.271);
+        --plum5: color(display-p3 0.293 0.152 0.319);
+        --plum6: color(display-p3 0.343 0.198 0.372);
+        --plum7: color(display-p3 0.424 0.262 0.461);
+        --plum8: color(display-p3 0.54 0.341 0.595);
+        --plum9: color(display-p3 0.624 0.313 0.708);
+        --plum10: color(display-p3 0.666 0.365 0.748);
+        --plum11: color(display-p3 0.86 0.602 0.933);
+        --plum12: color(display-p3 0.936 0.836 0.949);
+        --purple1: color(display-p3 0.09 0.068 0.103);
+        --purple2: color(display-p3 0.113 0.082 0.134);
+        --purple3: color(display-p3 0.175 0.112 0.224);
+        --purple4: color(display-p3 0.224 0.137 0.297);
+        --purple5: color(display-p3 0.264 0.167 0.349);
+        --purple6: color(display-p3 0.311 0.208 0.406);
+        --purple7: color(display-p3 0.381 0.266 0.496);
+        --purple8: color(display-p3 0.49 0.349 0.649);
+        --purple9: color(display-p3 0.523 0.318 0.751);
+        --purple10: color(display-p3 0.57 0.373 0.791);
+        --purple11: color(display-p3 0.8 0.62 1);
+        --purple12: color(display-p3 0.913 0.854 0.971);
+        --red1: color(display-p3 0.093 0.068 0.067);
+        --red2: color(display-p3 0.118 0.077 0.079);
+        --red3: color(display-p3 0.211 0.081 0.099);
+        --red4: color(display-p3 0.287 0.079 0.113);
+        --red5: color(display-p3 0.348 0.11 0.142);
+        --red6: color(display-p3 0.414 0.16 0.183);
+        --red7: color(display-p3 0.508 0.224 0.236);
+        --red8: color(display-p3 0.659 0.298 0.297);
+        --red9: color(display-p3 0.83 0.329 0.324);
+        --red10: color(display-p3 0.861 0.403 0.387);
+        --red11: color(display-p3 1 0.57 0.55);
+        --red12: color(display-p3 0.971 0.826 0.852);
+        --ruby1: color(display-p3 0.093 0.068 0.074);
+        --ruby2: color(display-p3 0.113 0.083 0.089);
+        --ruby3: color(display-p3 0.208 0.088 0.117);
+        --ruby4: color(display-p3 0.279 0.092 0.147);
+        --ruby5: color(display-p3 0.337 0.12 0.18);
+        --ruby6: color(display-p3 0.401 0.166 0.223);
+        --ruby7: color(display-p3 0.495 0.224 0.281);
+        --ruby8: color(display-p3 0.652 0.295 0.359);
+        --ruby9: color(display-p3 0.83 0.323 0.408);
+        --ruby10: color(display-p3 0.857 0.392 0.455);
+        --ruby11: color(display-p3 1 0.57 0.59);
+        --ruby12: color(display-p3 0.968 0.83 0.88);
+        --sage1: color(display-p3 0.064 0.07 0.067);
+        --sage2: color(display-p3 0.092 0.098 0.094);
+        --sage3: color(display-p3 0.128 0.135 0.131);
+        --sage4: color(display-p3 0.155 0.164 0.159);
+        --sage5: color(display-p3 0.183 0.193 0.188);
+        --sage6: color(display-p3 0.218 0.23 0.224);
+        --sage7: color(display-p3 0.269 0.285 0.277);
+        --sage8: color(display-p3 0.362 0.382 0.373);
+        --sage9: color(display-p3 0.398 0.438 0.421);
+        --sage10: color(display-p3 0.453 0.49 0.474);
+        --sage11: color(display-p3 0.685 0.709 0.697);
+        --sage12: color(display-p3 0.927 0.933 0.93);
+        --sand1: color(display-p3 0.067 0.067 0.063);
+        --sand2: color(display-p3 0.098 0.098 0.094);
+        --sand3: color(display-p3 0.135 0.135 0.129);
+        --sand4: color(display-p3 0.164 0.163 0.156);
+        --sand5: color(display-p3 0.193 0.192 0.183);
+        --sand6: color(display-p3 0.23 0.229 0.217);
+        --sand7: color(display-p3 0.285 0.282 0.267);
+        --sand8: color(display-p3 0.384 0.378 0.357);
+        --sand9: color(display-p3 0.434 0.428 0.403);
+        --sand10: color(display-p3 0.487 0.481 0.456);
+        --sand11: color(display-p3 0.707 0.703 0.68);
+        --sand12: color(display-p3 0.933 0.933 0.926);
+        --sky1: color(display-p3 0.056 0.078 0.116);
+        --sky2: color(display-p3 0.075 0.101 0.149);
+        --sky3: color(display-p3 0.089 0.154 0.244);
+        --sky4: color(display-p3 0.106 0.207 0.323);
+        --sky5: color(display-p3 0.135 0.261 0.394);
+        --sky6: color(display-p3 0.17 0.322 0.469);
+        --sky7: color(display-p3 0.205 0.394 0.557);
+        --sky8: color(display-p3 0.232 0.48 0.665);
+        --sky9: color(display-p3 0.585 0.877 0.983);
+        --sky10: color(display-p3 0.718 0.925 0.991);
+        --sky11: color(display-p3 0.536 0.772 0.924);
+        --sky12: color(display-p3 0.799 0.947 0.993);
+        --slate1: color(display-p3 0.067 0.067 0.074);
+        --slate2: color(display-p3 0.095 0.098 0.105);
+        --slate3: color(display-p3 0.13 0.135 0.145);
+        --slate4: color(display-p3 0.156 0.163 0.176);
+        --slate5: color(display-p3 0.183 0.191 0.206);
+        --slate6: color(display-p3 0.215 0.226 0.244);
+        --slate7: color(display-p3 0.265 0.28 0.302);
+        --slate8: color(display-p3 0.357 0.381 0.409);
+        --slate9: color(display-p3 0.415 0.431 0.463);
+        --slate10: color(display-p3 0.469 0.483 0.514);
+        --slate11: color(display-p3 0.692 0.704 0.728);
+        --slate12: color(display-p3 0.93 0.933 0.94);
+        --teal1: color(display-p3 0.059 0.083 0.079);
+        --teal2: color(display-p3 0.075 0.11 0.107);
+        --teal3: color(display-p3 0.087 0.175 0.165);
+        --teal4: color(display-p3 0.087 0.227 0.214);
+        --teal5: color(display-p3 0.12 0.277 0.261);
+        --teal6: color(display-p3 0.162 0.335 0.314);
+        --teal7: color(display-p3 0.205 0.406 0.379);
+        --teal8: color(display-p3 0.245 0.489 0.453);
+        --teal9: color(display-p3 0.297 0.637 0.581);
+        --teal10: color(display-p3 0.319 0.69 0.62);
+        --teal11: color(display-p3 0.388 0.835 0.719);
+        --teal12: color(display-p3 0.734 0.934 0.87);
+        --tomato1: color(display-p3 0.09 0.068 0.067);
+        --tomato2: color(display-p3 0.115 0.084 0.076);
+        --tomato3: color(display-p3 0.205 0.097 0.083);
+        --tomato4: color(display-p3 0.282 0.099 0.077);
+        --tomato5: color(display-p3 0.339 0.129 0.101);
+        --tomato6: color(display-p3 0.398 0.179 0.141);
+        --tomato7: color(display-p3 0.487 0.245 0.194);
+        --tomato8: color(display-p3 0.629 0.322 0.248);
+        --tomato9: color(display-p3 0.831 0.345 0.231);
+        --tomato10: color(display-p3 0.862 0.415 0.298);
+        --tomato11: color(display-p3 1 0.585 0.455);
+        --tomato12: color(display-p3 0.959 0.833 0.802);
+        --violet1: color(display-p3 0.077 0.071 0.118);
+        --violet2: color(display-p3 0.101 0.084 0.141);
+        --violet3: color(display-p3 0.154 0.123 0.256);
+        --violet4: color(display-p3 0.191 0.148 0.345);
+        --violet5: color(display-p3 0.226 0.182 0.396);
+        --violet6: color(display-p3 0.269 0.223 0.449);
+        --violet7: color(display-p3 0.326 0.277 0.53);
+        --violet8: color(display-p3 0.399 0.346 0.656);
+        --violet9: color(display-p3 0.417 0.341 0.784);
+        --violet10: color(display-p3 0.477 0.402 0.823);
+        --violet11: color(display-p3 0.72 0.65 1);
+        --violet12: color(display-p3 0.883 0.867 0.986);
+        --yellow1: color(display-p3 0.078 0.069 0.047);
+        --yellow2: color(display-p3 0.103 0.094 0.063);
+        --yellow3: color(display-p3 0.168 0.137 0.039);
+        --yellow4: color(display-p3 0.209 0.169 0);
+        --yellow5: color(display-p3 0.255 0.209 0);
+        --yellow6: color(display-p3 0.31 0.261 0.07);
+        --yellow7: color(display-p3 0.389 0.331 0.135);
+        --yellow8: color(display-p3 0.497 0.42 0.182);
+        --yellow9: color(display-p3 1 0.92 0.22);
+        --yellow10: color(display-p3 1 1 0.456);
+        --yellow11: color(display-p3 0.948 0.885 0.392);
+        --yellow12: color(display-p3 0.959 0.934 0.731);
+      }
+    }
+  }
+}
+/*
+ * Mode blocks (§1.11.9), follow-OS strategy: light on :root and
+ * [data-theme="light"]; dark on [data-theme="dark"] and, screen only, on an
+ * html without data-theme="light". The attribute block follows the :root
+ * block. Scale values and the per-scale contrast inks live in colors.css.
+ */
+@layer theme {
+  :root,
+  [data-theme='light'] {
+    color-scheme: light;
+    --ds-font-fine: var(--ds-font-text);
+    --ds-muted-weight-step: 0;
+  }
+
+  [data-theme='dark'] {
+    color-scheme: dark;
+    --ds-font-fine: var(--ds-font-ui);
+    --ds-muted-weight-step: 100;
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      color-scheme: dark;
+      --ds-font-fine: var(--ds-font-ui);
+      --ds-muted-weight-step: 100;
+    }
+  }
+}
+/*
+ * Role maps (§1.5.3, §1.11.9, §1.5.16), follow-OS strategy.
+ *
+ * Keyed on data-ground / data-tone / data-scheme, which Ground and every
+ * component root write from React context [D148]. Each alias is declared on
+ * the element carrying the attribute, so var(--primaryN) / var(--secondaryN)
+ * resolve with that element's OWN scales (its primary<Scale> class, or the
+ * values it inherits from its scope). Roles name role scale steps, never a
+ * Radix variable, except --role-ground, the preset's fixed ground step.
+ *
+ * `page` schemes (the eight page grounds [D176]) take the light map, and the
+ * dark map under the root's dark selectors. `light` / `dark` schemes (the
+ * night band, the fields and light islands) keep their preset map in both
+ * modes. --role-seam is visible only on the night band in dark mode [D179].
+ *
+ * --role-edge (the container edge) is not keyed here: Ground's kind class
+ * publishes it on each scope [D178], and component roots inherit it.
+ *
+ * Hover [D181]: --role-link-hover, --role-action-hover (the label stays
+ * --role-action-label, the edge is unchanged), --role-select-hover, and
+ * --role-soft-hover, the outline Button's --primary3 fill (the ground where
+ * soft fills drop). --role-soft-hover-face is the same hover for a part
+ * whose rest face is --role-halo (the slider thumb): --primary3 where soft
+ * fills apply, --role-halo (no change) where they drop, so the face never
+ * turns the ground color [D181]. --secondary-hover is the per-scale lighter
+ * neighbour (step 10 in a dark scope) that the scales module publishes.
+ *
+ * Text-bearing selection: --role-select-text / -label / -edge / -hover, for
+ * a selected state that carries words (option pill, filter chip with a
+ * label). It is the selection pair wherever the mark is text-safe, and the
+ * inverse pair on light rose, where --mauve12 on --red9 is 4.16:1 (glyph
+ * only); glyph-only marks (✓, ●, thumbs) keep --role-select there
+ * [decided by orchestrator; flagged for user review, §1.8].
+ *
+ * Charts [D125]: --role-series-odd is the odd series slots' ink,
+ * --secondary11 on light base grounds (and a `white` plate) and --primary12
+ * elsewhere (§8.7); the --ds-series-fill / --ds-series-pattern switches
+ * (tokens.css) pick the sequential cells' screen fill or one-ink pattern.
+ */
+@layer roles {
+  /* System defaults: the page root is a paper band, olive × green, action amber (§1.4.3). */
+  :root {
+    --primary1: var(--olive1);
+    --primary2: var(--olive2);
+    --primary3: var(--olive3);
+    --primary4: var(--olive4);
+    --primary5: var(--olive5);
+    --primary6: var(--olive6);
+    --primary7: var(--olive7);
+    --primary8: var(--olive8);
+    --primary9: var(--olive9);
+    --primary10: var(--olive10);
+    --primary11: var(--olive11);
+    --primary12: var(--olive12);
+    --primary-contrast: var(--olive-contrast);
+    --primary-hover: var(--olive-hover);
+    --secondary1: var(--green1);
+    --secondary2: var(--green2);
+    --secondary3: var(--green3);
+    --secondary4: var(--green4);
+    --secondary5: var(--green5);
+    --secondary6: var(--green6);
+    --secondary7: var(--green7);
+    --secondary8: var(--green8);
+    --secondary9: var(--green9);
+    --secondary10: var(--green10);
+    --secondary11: var(--green11);
+    --secondary12: var(--green12);
+    --secondary-contrast: var(--green-contrast);
+    --secondary-hover: var(--green-hover);
+    --action1: var(--amber1);
+    --action2: var(--amber2);
+    --action3: var(--amber3);
+    --action4: var(--amber4);
+    --action5: var(--amber5);
+    --action6: var(--amber6);
+    --action7: var(--amber7);
+    --action8: var(--amber8);
+    --action9: var(--amber9);
+    --action10: var(--amber10);
+    --action11: var(--amber11);
+    --action12: var(--amber12);
+    --action-contrast: var(--amber-contrast);
+    --action-hover: var(--amber-hover);
+
+    /* The page root is a band: no container edge, so --role-edge is the rule [D178]. */
+    --role-edge: var(--role-rule);
+  }
+
+  /* Every scope: invariant and fallback aliases. */
+  :root,
+  [data-ground] {
+    --role-inverse: var(--primary1);
+    --role-halo: var(--primary1); /* P1 in every scope and mode [D150] */
+    --role-seam: var(--role-ground); /* invisible; --primary12 on the night band in dark mode [D179] */
+    --role-glyph: var(--primary12);
+    --role-status: var(--secondary11);
+    --role-status-text: var(--primary12);
+    --role-status-fill: var(--role-ground);
+    --role-grain-light: var(--role-ground);
+    --role-grain-dark: var(--role-ground);
+    /* Pressed primary action: the inverse pair (§1.11.4) [D96]. */
+    --role-action-pressed: var(--primary12);
+    --role-action-pressed-label: var(--role-inverse);
+    /* Disabled edge (line-dotted-fine) [D16]; --primary12 on one-ink grounds [D85]. */
+    --role-disabled-edge: var(--role-rule);
+    /* Hover [D181]: S12 link ink, the lighter-neighbour fills, the soft outline fill. */
+    --role-link-hover: var(--secondary12);
+    --role-action-hover: var(--secondary-hover);
+    --role-select-hover: var(--secondary-hover);
+    --role-soft-hover: var(--primary3);
+    --role-soft-hover-face: var(--primary3);
+    /*
+     * The pill: a solid badge's fill, label and edge (S9, its contrast ink,
+     * S11 where S9 is below 3:1 on light grounds); the ink pill on saturated
+     * fields [D14].
+     */
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    /* Text-bearing selection: the selection pair; light rose swaps in the inverse pair (below). */
+    --role-select-text: var(--role-select);
+    --role-select-text-label: var(--role-select-mark);
+    --role-select-text-edge: var(--role-select-edge);
+    --role-select-text-hover: var(--role-select-hover);
+    /* Charts: one ink off the light base grounds (§8.7) [D125]. */
+    --role-series-odd: var(--primary12);
+    /* Switches (tokens.css): shaped edges only on the night band in light mode [D179]. */
+    --ds-edge-shaped: none;
+    --ds-link-hover-line: none;
+    --ds-soft-hover-line: none;
+    --ds-series-fill: none;
+    --ds-series-pattern: inline;
+  }
+
+  /* Tone-resolved aliases [D155, D141]. */
+  :root,
+  [data-tone='light-base'] {
+    --role-glyph: var(--role-accent);
+    --role-status-fill: var(--secondary4);
+    /* Two-ink charts: odd slots --secondary11 and the sequential screen fills, in both modes (§8.7). */
+    --role-series-odd: var(--secondary11);
+    --ds-series-fill: inline;
+    --ds-series-pattern: none;
+  }
+
+  [data-tone='tinted'] {
+    --role-glyph: var(--role-accent);
+  }
+
+  /*
+   * Soft fills drop on tinted grounds (the pastels, forest) and the solid
+   * fields: the outline Button's hover takes the bare-text underline instead
+   * of its --primary3 fill, and a --role-halo face keeps its rest face
+   * [D181].
+   */
+  [data-tone='tinted'],
+  [data-tone='dark-tinted'],
+  [data-tone='solid-light'],
+  [data-tone='solid-dark'] {
+    --role-soft-hover: var(--role-ground);
+    --role-soft-hover-face: var(--role-halo);
+    --ds-soft-hover-line: underline;
+  }
+
+  /* Dark fixed scopes: a pill fill that reaches 3:1 is its own edge. */
+  [data-scheme='dark'] {
+    --role-pill-edge: var(--secondary9);
+  }
+
+  [data-tone='solid-light'],
+  [data-tone='solid-dark'] {
+    --role-status: var(--primary12);
+    --role-disabled-edge: var(--primary12);
+    /* One ink [D14]: link hover is that ink plus the underline; selection hovers the inverse pair [D181]. */
+    --role-link-hover: var(--primary12);
+    --role-select-hover: var(--primary11);
+    --ds-link-hover-line: underline;
+    /* The ink pill. */
+    --role-pill: var(--primary12);
+    --role-pill-label: var(--role-inverse);
+    --role-pill-edge: var(--primary12);
+  }
+
+  /* Ink pill pressed: a --primary1 face with a --primary12 label (§1.11.10, §9.2) [D144]. */
+  [data-tone='solid-light'] {
+    --role-action-pressed: var(--primary1);
+    --role-action-pressed-label: var(--primary12);
+    --role-action-hover: var(--primary11); /* the ink pill's hover [D181] */
+  }
+
+  /* Page grounds paint the same step in both modes (§1.4.2) [D176]; their role maps follow below. */
+  :root,
+  [data-ground='paper'] {
+    --role-ground: var(--orange2);
+  }
+
+  [data-ground='white'] {
+    --role-ground: var(--olive1);
+  }
+
+  [data-ground='tide'] {
+    --role-ground: var(--blue3);
+  }
+
+  [data-ground='meadow'] {
+    --role-ground: var(--green3);
+  }
+
+  [data-ground='pollen'] {
+    --role-ground: var(--yellow3);
+  }
+
+  [data-ground='apricot'] {
+    --role-ground: var(--orange3);
+  }
+
+  [data-ground='rose'] {
+    --role-ground: var(--red3);
+  }
+
+  [data-ground='heather'] {
+    --role-ground: var(--purple3);
+  }
+
+  /*
+   * The night band and the fields (§1.5.3): fixed mode, one map in both
+   * modes; dark presets resolve through their data-theme. Fields keep their
+   * maps unchanged [D177].
+   */
+  [data-ground='night'] {
+    --role-ground: var(--blue2);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary6);
+    --role-tint: var(--primary4);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-link-hover: var(--secondary9); /* --green9 5.6 */
+    --role-grain-light: var(--primary4);
+    --role-grain-dark: var(--primary1);
+    /* The one seam tone separates (from a light page ground): the shaped edge may sit here [D179]. */
+    --ds-edge-shaped: block;
+  }
+
+  [data-ground='forest'] {
+    --role-ground: var(--green6);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary11);
+    --role-hairline: var(--primary9);
+    --role-tint: var(--primary8);
+    --role-accent: var(--secondary9);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-link-hover: var(--secondary9); /* --amber9 5.3 */
+    --role-select-hover: var(--primary11); /* the inverse pair: --sage11 */
+    --role-grain-light: var(--primary8);
+    --role-grain-dark: var(--primary6);
+    --role-disabled-edge: var(--primary12); /* one text ink [D85, D115] */
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='leaf'] {
+    --role-ground: var(--green9);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary10);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='amber'] {
+    --role-ground: var(--amber10);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary6);
+    --role-grain-dark: var(--secondary8);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='clay'] {
+    --role-ground: var(--orange9);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary11);
+    --role-tint: var(--secondary8);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary10);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='pink'] {
+    --role-ground: var(--pink8);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary9);
+    --role-tint: var(--secondary7);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--primary12);
+    --role-action-label: var(--primary1);
+    --role-action-edge: var(--primary12);
+    --role-grain-light: var(--secondary7);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='royal'] {
+    --role-ground: var(--indigo8);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary6);
+    --role-tint: var(--secondary7);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-grain-dark: var(--secondary7);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  [data-ground='brick'] {
+    --role-ground: var(--red7);
+    --role-heading: var(--primary12);
+    --role-muted: var(--primary12);
+    --role-rule: var(--primary12);
+    --role-hairline: var(--secondary5);
+    --role-tint: var(--secondary6);
+    --role-accent: var(--primary12);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status: var(--secondary12);
+    --role-status-text: var(--secondary12);
+    --role-grain-light: var(--secondary8);
+    --role-grain-dark: var(--secondary6);
+    --ds-muted-weight-step: 0; /* no muted tier [D175] */
+  }
+
+  /*
+   * The night band in dark mode [D179]: its seam turns visible as its
+   * --primary12 (12.7–16.2:1 against the eight dark page grounds), and its
+   * shaped edge drops for that straight rule.
+   *
+   * The dark ancestor is the page's mode: data-theme on html or on a preview
+   * wrapper, neither of which carries data-ground. Ground writes
+   * data-theme="dark" on the night band itself, and that must not count, or
+   * every root nested in the band would match in light mode and drop its
+   * fringe. Nested roots match only when the page is dark, and then they
+   * restate the band's values.
+   */
+  [data-theme='dark']:not([data-ground]) [data-ground='night'] {
+    --role-seam: var(--primary12);
+    --ds-edge-shaped: none;
+  }
+
+  /*
+   * Page grounds, dark mode (§1.11.9 and the §1.5.3 dark table) [D138, D176].
+   * `data-theme="dark"` on html, or on a preview wrapper: a `page` scheme
+   * never sits inside a fixed scope, so in a product this is always the
+   * root's mode. Each pastel paints the same step in its dark value.
+   */
+
+  :root[data-theme='dark'],
+  [data-theme='dark'] [data-ground='paper'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary6);
+    --role-tint: var(--primary4);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary9);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary9);
+    --ds-link-hover-line: none;
+  }
+
+  [data-theme='dark'] [data-ground='white'][data-scheme='page'] {
+    --role-tint: var(--primary3);
+  }
+
+  [data-theme='dark'] [data-ground='tide'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='meadow'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='pollen'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='apricot'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary10);
+    --role-hairline: var(--primary7);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary9);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--secondary-contrast);
+    --role-select-edge: var(--secondary9);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary9);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary9);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary9);
+    /* Text-bearing selection: the selection pair again (--red1 on dark --red9 is 4.75:1). */
+    --role-select-text: var(--role-select);
+    --role-select-text-label: var(--role-select-mark);
+    --role-select-text-edge: var(--role-select-edge);
+    --role-select-text-hover: var(--role-select-hover);
+    --ds-link-hover-line: none;
+  }
+
+  [data-theme='dark'] [data-ground='rose'][data-scheme='page'],
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
+    --role-link-hover: var(--primary12);
+    --ds-link-hover-line: underline;
+  }
+
+  [data-theme='dark'] [data-ground='heather'][data-scheme='page'] {
+    /* --purple9 is 2.99: accent --purple10 (3.55, non-text); selection is the inverse pair. */
+    --role-accent: var(--secondary10);
+    --role-select: var(--primary12);
+    --role-select-mark: var(--primary1);
+    --role-select-edge: var(--primary12);
+    --role-select-hover: var(--primary11);
+    --role-pill: var(--primary12);
+    --role-pill-label: var(--role-inverse);
+    --role-pill-edge: var(--primary12);
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']),
+    :root:not([data-theme='light']) [data-ground='paper'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
+      --role-heading: var(--secondary12);
+      --role-muted: var(--primary11);
+      --role-rule: var(--primary9);
+      --role-hairline: var(--primary6);
+      --role-tint: var(--primary4);
+      --role-accent: var(--secondary9);
+      --role-select: var(--secondary9);
+      --role-select-mark: var(--secondary-contrast);
+      --role-select-edge: var(--secondary9);
+      --role-action: var(--secondary9);
+      --role-action-label: var(--secondary-contrast);
+      --role-action-edge: var(--secondary9);
+      --role-status-fill: var(--role-ground);
+      --role-link-hover: var(--secondary9);
+      --role-select-hover: var(--secondary-hover);
+      --role-pill: var(--secondary9);
+      --role-pill-label: var(--secondary-contrast);
+      --role-pill-edge: var(--secondary9);
+      --ds-link-hover-line: none;
+    }
+
+    :root:not([data-theme='light']) [data-ground='white'][data-scheme='page'] {
+      --role-tint: var(--primary3);
+    }
+
+    :root:not([data-theme='light']) [data-ground='tide'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='meadow'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='pollen'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='apricot'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      --role-heading: var(--secondary12);
+      --role-muted: var(--primary11);
+      --role-rule: var(--primary10);
+      --role-hairline: var(--primary7);
+      --role-tint: var(--primary5);
+      --role-accent: var(--secondary9);
+      --role-select: var(--secondary9);
+      --role-select-mark: var(--secondary-contrast);
+      --role-select-edge: var(--secondary9);
+      --role-action: var(--secondary9);
+      --role-action-label: var(--secondary-contrast);
+      --role-action-edge: var(--secondary9);
+      --role-status-fill: var(--role-ground);
+      --role-link-hover: var(--secondary9);
+      --role-select-hover: var(--secondary-hover);
+      --role-pill: var(--secondary9);
+      --role-pill-label: var(--secondary-contrast);
+      --role-pill-edge: var(--secondary9);
+      --role-select-text: var(--role-select);
+      --role-select-text-label: var(--role-select-mark);
+      --role-select-text-edge: var(--role-select-edge);
+      --role-select-text-hover: var(--role-select-hover);
+      --ds-link-hover-line: none;
+    }
+
+    :root:not([data-theme='light']) [data-ground='rose'][data-scheme='page'],
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      /* No text-safe accent (--red9 4.17, --purple10 3.55): links stay ink, and hover adds the underline [D176, D181]. */
+      --role-link-hover: var(--primary12);
+      --ds-link-hover-line: underline;
+    }
+
+    :root:not([data-theme='light']) [data-ground='heather'][data-scheme='page'] {
+      /* --purple9 is 2.99: accent --purple10 (3.55, non-text); selection is the inverse pair. */
+      --role-accent: var(--secondary10);
+      --role-select: var(--primary12);
+      --role-select-mark: var(--primary1);
+      --role-select-edge: var(--primary12);
+      --role-select-hover: var(--primary11);
+      --role-pill: var(--primary12);
+      --role-pill-label: var(--role-inverse);
+      --role-pill-edge: var(--primary12);
+    }
+
+    :root:not([data-theme='light']) [data-ground='night'] {
+      --role-seam: var(--primary12);
+      --ds-edge-shaped: none;
+    }
+  }
+
+  /*
+   * Page grounds, light mode (§1.5.3) [D176]. After the dark maps: each rule's
+   * second selector re-applies the light map under a `data-theme="light"`
+   * ancestor below html (a preview wrapper), which must beat the OS query.
+   * Every mode-dependent role is restated, so that reset is complete.
+   */
+
+  :root,
+  [data-ground='paper'],
+  :root [data-theme='light'] [data-ground='paper'][data-scheme='page'],
+  [data-ground='white'],
+  :root [data-theme='light'] [data-ground='white'][data-scheme='page'] {
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary9);
+    --role-hairline: var(--primary7);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary11);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--primary12);
+    --role-select-edge: var(--secondary11);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary11);
+    --role-status-fill: var(--secondary4);
+    --role-link-hover: var(--secondary12);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    --ds-link-hover-line: none;
+  }
+
+  [data-ground='white'],
+  :root [data-theme='light'] [data-ground='white'][data-scheme='page'] {
+    --role-tint: var(--primary4);
+  }
+
+  [data-ground='tide'],
+  :root [data-theme='light'] [data-ground='tide'][data-scheme='page'],
+  [data-ground='meadow'],
+  :root [data-theme='light'] [data-ground='meadow'][data-scheme='page'],
+  [data-ground='pollen'],
+  :root [data-theme='light'] [data-ground='pollen'][data-scheme='page'],
+  [data-ground='apricot'],
+  :root [data-theme='light'] [data-ground='apricot'][data-scheme='page'],
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'],
+  [data-ground='heather'],
+  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
+    /* The pastel ladder [D176]: rule P10, hairline P8 (P7 in dark mode), tint P5; soft fills drop. */
+    --role-heading: var(--secondary12);
+    --role-muted: var(--primary11);
+    --role-rule: var(--primary10);
+    --role-hairline: var(--primary8);
+    --role-tint: var(--primary5);
+    --role-accent: var(--secondary11);
+    --role-select: var(--secondary9);
+    --role-select-mark: var(--primary12);
+    --role-select-edge: var(--secondary11);
+    --role-action: var(--secondary9);
+    --role-action-label: var(--secondary-contrast);
+    --role-action-edge: var(--secondary11);
+    --role-status-fill: var(--role-ground);
+    --role-link-hover: var(--secondary12);
+    --role-select-hover: var(--secondary-hover);
+    --role-pill: var(--secondary9);
+    --role-pill-label: var(--secondary-contrast);
+    --role-pill-edge: var(--secondary11);
+    --ds-link-hover-line: none;
+  }
+
+  [data-ground='pollen'],
+  :root [data-theme='light'] [data-ground='pollen'][data-scheme='page'],
+  [data-ground='heather'],
+  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
+    /* Selection mark: the scale's own contrast ink (--yellow12 8.68, --purple1 5.07). */
+    --role-select-mark: var(--secondary-contrast);
+  }
+
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'],
+  [data-ground='heather'],
+  :root [data-theme='light'] [data-ground='heather'][data-scheme='page'] {
+    /* The fill reaches 3:1 (--red9 3.41, --purple9 4.56), so the edge is the fill; rose's --mauve12 mark is glyph-only (4.16). */
+    --role-select-edge: var(--secondary9);
+    --role-pill-edge: var(--secondary9);
+  }
+
+  /*
+   * Light rose, text-bearing selection: --mauve12 on --red9 is 4.16:1, below
+   * text contrast, so a selected state that carries words takes the inverse
+   * pair (fill --primary12, label --role-inverse, hover --primary11), as dark
+   * heather does; glyph-only marks keep --red9 / --mauve12 (≥ 3:1)
+   * [decided by orchestrator; flagged for user review, §1.8].
+   */
+  [data-ground='rose'],
+  :root [data-theme='light'] [data-ground='rose'][data-scheme='page'] {
+    --role-select-text: var(--primary12);
+    --role-select-text-label: var(--role-inverse);
+    --role-select-text-edge: var(--primary12);
+    --role-select-text-hover: var(--primary11);
+  }
+
+  /*
+   * The night band under a light preview wrapper keeps its light-mode seam
+   * and shaped edge. Like the dark rule, only the page's mode counts, never
+   * a data-theme that Ground writes.
+   */
+  :root [data-theme='light']:not([data-ground]) [data-ground='night'] {
+    --role-seam: var(--role-ground);
+    --ds-edge-shaped: block;
+  }
+}
+/*
+ * The print remap (§1.11.6, §1.4.5). Print always renders light, whatever
+ * the screen mode, including inside a data-theme="dark" band: steps 1–5 of
+ * the role scales go white and 6–12 black; contrast inks and label aliases
+ * black; halo, grounds, tints and grain white; the seam black. Browsers drop
+ * backgrounds by default, so fills and decorative patterns vanish; borders
+ * and inline SVG print. Modules add structural print rules only.
+ */
+@layer print {
+  @media print {
+    @page {
+      margin: var(--ds-print-margin-block) var(--ds-print-margin-inline);
+    }
+
+    :root {
+      color-scheme: light;
+      --ds-font-fine: var(--ds-font-text);
+      --ds-muted-weight-step: 0;
+
+      /* Print values of the tokens (§1.5). 1 px = 0.75 pt, so most px values already map exactly. */
+      --ds-font-size-display-xl: 26pt;
+      --ds-font-size-stat: 24pt; /* type-stat (§1.5.6, §8.8); type-display-xl keeps 26 pt */
+      --ds-font-size-display: 22pt;
+      --ds-font-size-h2: 17pt;
+      --ds-font-size-itemhead: 13pt;
+      --ds-font-size-kicker: 10.5pt;
+      --ds-font-size-subhead: 11pt;
+      --ds-font-size-lead: 12pt;
+      --ds-font-size-quote: 14pt;
+      --ds-font-size-body: 10.5pt;
+      --ds-font-size-body-ui: 10pt;
+      --ds-font-size-marquee: 11pt;
+      --ds-font-size-button-lg: 10pt;
+      --ds-font-size-button: 9pt;
+      --ds-font-size-footnote: 8.5pt;
+      --ds-font-size-caption: 8.5pt;
+      --ds-font-size-eyebrow: 8pt;
+      --ds-font-size-label: 8pt;
+      --ds-leading-reading: var(--ds-leading-compact);
+      --ds-space-56: 36pt;
+      --ds-space-section: 36pt;
+      --size-px-10: 36pt;
+      --size-px-11: 48pt;
+      --ds-space-margin: 0;
+      --ds-stroke-0-75: 0.75pt;
+      --ds-stroke-1-25: 1pt;
+      --ds-stroke-1-5: 1.1pt;
+      --ds-stroke-8: 4pt;
+      --ds-measure-reading: var(--ds-measure-print);
+    }
+
+    :root,
+    [data-ground] {
+      --primary1: #fff;
+      --primary2: #fff;
+      --primary3: #fff;
+      --primary4: #fff;
+      --primary5: #fff;
+      --primary6: #000;
+      --primary7: #000;
+      --primary8: #000;
+      --primary9: #000;
+      --primary10: #000;
+      --primary11: #000;
+      --primary12: #000;
+      --secondary1: #fff;
+      --secondary2: #fff;
+      --secondary3: #fff;
+      --secondary4: #fff;
+      --secondary5: #fff;
+      --secondary6: #000;
+      --secondary7: #000;
+      --secondary8: #000;
+      --secondary9: #000;
+      --secondary10: #000;
+      --secondary11: #000;
+      --secondary12: #000;
+      --action1: #fff;
+      --action2: #fff;
+      --action3: #fff;
+      --action4: #fff;
+      --action5: #fff;
+      --action6: #000;
+      --action7: #000;
+      --action8: #000;
+      --action9: #000;
+      --action10: #000;
+      --action11: #000;
+      --action12: #000;
+      --primary-contrast: #000;
+      --secondary-contrast: #000;
+      --action-contrast: #000;
+      --role-inverse: #000;
+      --role-action-label: #000;
+      --role-action-pressed-label: #000;
+      --role-select-mark: #000;
+      --role-status-text: #000;
+      --role-halo: #fff;
+      --role-ground: #fff;
+      --role-seam: #000;
+      --role-tint: #fff;
+      --role-grain-light: #fff;
+      --role-grain-dark: #fff;
+    }
+
+    :where(h1, h2, h3, h4, h5, h6) {
+      break-after: avoid;
+      break-inside: avoid;
+    }
+
+    :where(figure, table, tr, img, svg, blockquote) {
+      break-inside: avoid;
+    }
+
+    :where(p, li) {
+      orphans: 3;
+      widows: 3;
+    }
+
+    /* Long-form documents start each H2 on a new page [D168]; a page-template flag, never a prop. */
+    :root[data-print='long-form'] h2:not(:first-of-type) {
+      break-before: page;
+    }
+  }
+}