@kenlo/sds-design-system 0.9.9

package/foundations/tokens.css

@@ -0,0 +1,1656 @@
+/* SDS design tokens.
+   Derived from kdls-design-system v2.5.1 (0f3edf8) by scripts/derive-tokens.mjs.
+   Divergences from KDLS, all deliberate:
+     - the secondary, tertiary and lya colour families are removed, along with
+       their [data-color-scheme] blocks and the --color-kenlo-blue-* aliases;
+     - primary is a slot with a neutral floor, never a Kenlo value;
+     - the Kenlo radius scheme named `default` is removed; `soft` is the install
+       default and keeps its name.
+   SDS owns this file from here on — edit it directly, do not regenerate. */
+/* Source for foundations/tokens.css — run `npm run gen:tokens` after editing.
+   No usage-rule comments here — token usage rules live in
+   .claude/tokens-reference.md. General component rules: .claude/component-rules.md. */
+
+/* ── The one layout rule this package asserts ──────────────────────────────────
+
+   A component that sets `width: 100%` and also has padding is wider than its parent
+   under the CSS default of `content-box`. Measured at 320px: Alert, Checkbox, Switch,
+   RadioGroup, Pagination, Skeleton, AccordionGroup and Separator each reached 48px past
+   their container, and the page scrolled sideways under every section.
+
+   KDLS has the same components and does not say this anywhere in the package — its
+   portal carries a global reset (`portal/src/styles/_reset.css`), so the problem is
+   invisible there and arrives in any consumer that does not have one.
+
+   The selector claims only elements this package named. A design system may not impose
+   a global reset on a page it does not own; it may insist its own boxes measure the way
+   its stylesheets assume. It lives in the token sheet because that is the one file SDS
+   cannot be used without.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+[class*="sds-"],
+[class*="sds-"]::before,
+[class*="sds-"]::after {
+  box-sizing: border-box;
+}
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");/* -------------------------------SEMANTIC ALIASES------------------------------- */
+:root {
+  /* The absolutes: the two ends of the neutral ramp, and the only colours in the system
+     that do NOT invert with the theme.
+
+     `--color-neutral-00` used to invert — #ffffff in the light theme, #1a1a1a in the dark
+     one — which made two tokens with symmetric names behave in opposite ways once
+     `--color-neutral-100` existed. Rafael asked for them as a pair, and a pair is what
+     they are now: white and black, meaning exactly that in both themes.
+
+     What inverts moved to where it belongs, which is the semantic layer. Every one of the
+     29 rules that read `--color-neutral-00` was painting a component's ground, and says so
+     now with `--component-bg-color` — which reads the inverting pair directly. Nothing on
+     screen changed; the same colour arrives by a name that admits what it is for.
+
+     `--color-white` and `--color-black` stay as the plain names for the same two values.
+     Both spellings are in the system already and neither is wrong. */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-neutral-00: var(--color-white);
+  --color-neutral-100: var(--color-black);
+  /* What goes ON a primary-50 surface. It was a fixed `--color-white`, and
+     `--color-primary-50` inverts between the themes while white does not — so in the dark
+     theme every filled primary surface painted white text on #f2f2f2, measured at 1.12:1.
+     A Button, a Notification, an Avatar's initials, an active Pill, an active Toggle item:
+     all unreadable, all for the same reason.
+
+     Thirteen rules across the components tried to patch it with
+     `[data-color-scheme="neutral"][data-theme="dark"]`, and not one of them ever ran:
+     `neutral` is the install default, and a value equal to the default is written by
+     REMOVING the attribute rather than setting it (see theme-server.js `resolveSlot`). The
+     selector could not match in the configuration it was written for.
+
+     `--color-primary-50-on` is the palette's own answer for this surface — it is derived
+     per family and it inverts with the theme, so the guards are not needed and the
+     per-scheme black overrides are not either. */
+  --color-on-primary: var(--color-primary-50-on);
+  /* The pair, not the tone: `--color-neutral-00` is absolute white now, and this is the
+     thing that has to follow the theme. `--color-neutral-00-90` is the pair it always
+     read through. */
+  --component-bg-color: var(--color-neutral-00-90);
+  --border-interactive-color: var(--color-neutral-30);
+  --border-static-color: var(--color-neutral-20);
+  --placeholder-color: var(--color-neutral-50);
+  --focus-stroke-color: var(--color-neutral-90-00);
+
+  /* The focus ring, declared once.
+     Two rings rather than one: the inner one is the surface the control sits on, so the
+     outer one reads as a ring and not as a thick border, whatever the control is touching.
+     `--focus-ring-inset` is the same shape turned inwards, for a control whose own box is
+     clipped by something above it.
+     `--focus-ring-outline` is for a control inside a scroll container, where a box-shadow
+     would be cut off — an outline is never clipped. */
+  --focus-ring-width: 2px;
+  --focus-ring: 0 0 0 var(--focus-ring-width) var(--component-bg-color),
+                0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-stroke-color);
+  --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--component-bg-color),
+                      inset 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-stroke-color);
+}
+
+/* ------------------------------------------------------------------------------ *//* ORDER MATTERS HERE. :root and [data-color-scheme="x"] have the same specificity, so
+   whichever comes last in the file wins. This floor must therefore sit BEFORE the scheme
+   blocks — placed after them, it silently overrode every one of them and selecting a
+   colour scheme did nothing at all. */
+/* Primary is a slot, not a value.
+   SDS carries no Kenlo brand colour. The slot is filled by the site's own colour
+   through applyCustomColor / applyCustomGradient, and falls back to neutral so a
+   consumer that declares nothing still gets a coherent system.
+
+   In kdls-design-system v2.5.1 (0f3edf8) this section held the Kenlo blue ramp
+   (--color-primary-*-* hexes, light and dark) plus the --color-kenlo-blue-*
+   aliases. All of it is removed; the mapping below is lifted verbatim from that
+   file's own [data-color-scheme="neutral"] block. */
+:root {
+  --color-primary-10: var(--color-neutral-10);
+  --color-primary-20: var(--color-neutral-20);
+  --color-primary-30: var(--color-neutral-30);
+  --color-primary-40: var(--color-neutral-50);
+  /* The principal tone. It points at neutral-80 rather than neutral-50, and it is the only
+     scheme where the 50 is not the family's own 50: a mid grey has no presence as the
+     colour of a button. */
+  --color-primary-50: var(--color-neutral-80);
+  /* Above the 50 the neutral ramp runs out — it ends at 90, and the slot still needs four
+     steps. KDLS answered by repeating neutral-90 four times, and the port carried that
+     verbatim: tones 60, 70, 80 and 90 were ONE colour. That is 81 declarations across the
+     stylesheets resolving to #1a1a1a, and it showed: a primary button's `:hover` reads
+     `--color-primary-60` and its `:active` reads `--color-primary-70`, so in the default
+     scheme pressing the button changed nothing at all.
+
+     The missing steps are mixed from the two ends rather than written as new hexes — the
+     rule here is that the answer to a missing value is a token, not a literal, which is
+     how --color-scrim is built too. The ramp is monotonic again: each step is darker than
+     the one before it, and nothing repeats. */
+  --color-primary-60: var(--color-neutral-90);
+  --color-primary-70: color-mix(in srgb, var(--color-neutral-90) 65%, var(--color-black));
+  --color-primary-80: color-mix(in srgb, var(--color-neutral-90) 30%, var(--color-black));
+  --color-primary-90: var(--color-black);
+}
+
+/* --------------------------------COLOR SCHEMES--------------------------------- */
+[data-color-scheme="neutral"] {
+  --color-primary-10: var(--color-neutral-10);
+  --color-primary-20: var(--color-neutral-20);
+  --color-primary-30: var(--color-neutral-30);
+  --color-primary-40: var(--color-neutral-50);
+  --color-primary-50: var(--color-neutral-80);
+  --color-primary-60: var(--color-neutral-90);
+  --color-primary-70: var(--color-neutral-90);
+  --color-primary-80: var(--color-neutral-90);
+  --color-primary-90: var(--color-neutral-90);
+}
+
+/* Map key = attribute value; tuple = (source family, force --color-on-primary: black?) */
+[data-color-scheme="leaf"] {
+  --color-primary-10: var(--color-leaf-10);
+  --color-primary-20: var(--color-leaf-20);
+  --color-primary-30: var(--color-leaf-30);
+  --color-primary-40: var(--color-leaf-40);
+  --color-primary-50: var(--color-leaf-50);
+  --color-primary-60: var(--color-leaf-60);
+  --color-primary-70: var(--color-leaf-70);
+  --color-primary-80: var(--color-leaf-80);
+  --color-primary-90: var(--color-leaf-90);
+}
+
+[data-color-scheme="sand"] {
+  --color-primary-10: var(--color-sand-10);
+  --color-primary-20: var(--color-sand-20);
+  --color-primary-30: var(--color-sand-30);
+  --color-primary-40: var(--color-sand-40);
+  --color-primary-50: var(--color-sand-50);
+  --color-primary-60: var(--color-sand-60);
+  --color-primary-70: var(--color-sand-70);
+  --color-primary-80: var(--color-sand-80);
+  --color-primary-90: var(--color-sand-90);
+}
+
+[data-color-scheme="wood"] {
+  --color-primary-10: var(--color-wood-10);
+  --color-primary-20: var(--color-wood-20);
+  --color-primary-30: var(--color-wood-30);
+  --color-primary-40: var(--color-wood-40);
+  --color-primary-50: var(--color-wood-50);
+  --color-primary-60: var(--color-wood-60);
+  --color-primary-70: var(--color-wood-70);
+  --color-primary-80: var(--color-wood-80);
+  --color-primary-90: var(--color-wood-90);
+}
+
+[data-color-scheme="clay"] {
+  --color-primary-10: var(--color-clay-10);
+  --color-primary-20: var(--color-clay-20);
+  --color-primary-30: var(--color-clay-30);
+  --color-primary-40: var(--color-clay-40);
+  --color-primary-50: var(--color-clay-50);
+  --color-primary-60: var(--color-clay-60);
+  --color-primary-70: var(--color-clay-70);
+  --color-primary-80: var(--color-clay-80);
+  --color-primary-90: var(--color-clay-90);
+}
+
+[data-color-scheme="flower"] {
+  --color-primary-10: var(--color-flower-10);
+  --color-primary-20: var(--color-flower-20);
+  --color-primary-30: var(--color-flower-30);
+  --color-primary-40: var(--color-flower-40);
+  --color-primary-50: var(--color-flower-50);
+  --color-primary-60: var(--color-flower-60);
+  --color-primary-70: var(--color-flower-70);
+  --color-primary-80: var(--color-flower-80);
+  --color-primary-90: var(--color-flower-90);
+}
+
+[data-color-scheme="dusk"] {
+  --color-primary-10: var(--color-dusk-10);
+  --color-primary-20: var(--color-dusk-20);
+  --color-primary-30: var(--color-dusk-30);
+  --color-primary-40: var(--color-dusk-40);
+  --color-primary-50: var(--color-dusk-50);
+  --color-primary-60: var(--color-dusk-60);
+  --color-primary-70: var(--color-dusk-70);
+  --color-primary-80: var(--color-dusk-80);
+  --color-primary-90: var(--color-dusk-90);
+}
+
+[data-color-scheme="sky"] {
+  --color-primary-10: var(--color-sky-10);
+  --color-primary-20: var(--color-sky-20);
+  --color-primary-30: var(--color-sky-30);
+  --color-primary-40: var(--color-sky-40);
+  --color-primary-50: var(--color-sky-50);
+  --color-primary-60: var(--color-sky-60);
+  --color-primary-70: var(--color-sky-70);
+  --color-primary-80: var(--color-sky-80);
+  --color-primary-90: var(--color-sky-90);
+}
+
+[data-color-scheme="sea"] {
+  --color-primary-10: var(--color-sea-10);
+  --color-primary-20: var(--color-sea-20);
+  --color-primary-30: var(--color-sea-30);
+  --color-primary-40: var(--color-sea-40);
+  --color-primary-50: var(--color-sea-50);
+  --color-primary-60: var(--color-sea-60);
+  --color-primary-70: var(--color-sea-70);
+  --color-primary-80: var(--color-sea-80);
+  --color-primary-90: var(--color-sea-90);
+}
+
+[data-color-scheme="lake"] {
+  --color-primary-10: var(--color-lake-10);
+  --color-primary-20: var(--color-lake-20);
+  --color-primary-30: var(--color-lake-30);
+  --color-primary-40: var(--color-lake-40);
+  --color-primary-50: var(--color-lake-50);
+  --color-primary-60: var(--color-lake-60);
+  --color-primary-70: var(--color-lake-70);
+  --color-primary-80: var(--color-lake-80);
+  --color-primary-90: var(--color-lake-90);
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------------NEUTRAL------------------------------------ */
+:root {
+  --color-neutral-00-90: #ffffff;
+  --color-neutral-10-80: #f2f2f2;
+  --color-neutral-20-70: #e6e6e6;
+  --color-neutral-30-60: #d8d8d8;
+  --color-neutral-40-50: #b8b8b8;
+  --color-neutral-50-40: #808080;
+  --color-neutral-60-30: #595959;
+  --color-neutral-70-20: #404040;
+  --color-neutral-80-10: #262626;
+  --color-neutral-90-00: #1a1a1a;
+}
+
+[data-theme="dark"] {
+  --color-neutral-00-90: #1a1a1a;
+  --color-neutral-10-80: #262626;
+  --color-neutral-20-70: #404040;
+  --color-neutral-30-60: #595959;
+  --color-neutral-40-50: #808080;
+  --color-neutral-50-40: #b8b8b8;
+  --color-neutral-60-30: #d8d8d8;
+  --color-neutral-70-20: #e6e6e6;
+  --color-neutral-80-10: #f2f2f2;
+  --color-neutral-90-00: #ffffff;
+}
+
+:root {
+  --color-neutral-10: var(
+    --color-neutral-10-80
+  );
+  --color-neutral-20: var(
+    --color-neutral-20-70
+  );
+  --color-neutral-30: var(
+    --color-neutral-30-60
+  );
+  --color-neutral-40: var(
+    --color-neutral-40-50
+  );
+  --color-neutral-50: var(
+    --color-neutral-50-40
+  );
+  --color-neutral-60: var(
+    --color-neutral-60-30
+  );
+  --color-neutral-70: var(
+    --color-neutral-70-20
+  );
+  --color-neutral-80: var(
+    --color-neutral-80-10
+  );
+  --color-neutral-90: var(
+    --color-neutral-90-00
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------------PRIMARY------------------------------------ */
+
+
+/* Solid companions to the primary slot.
+   `background` accepts a gradient; `color`, `box-shadow` and `border-color` do not —
+   they treat one as an invalid value and fall back. So every component that paints
+   TEXT or a BORDER from the primary slot reads the -solid companion instead, and
+   every component that paints a SURFACE reads the slot itself.
+
+   In solid mode these are the same value and this costs nothing. applyCustomGradient
+   overrides only the companions, with a representative stop, so a gradient theme keeps
+   readable text and a visible outline while surfaces still get the real gradient. */
+:root {
+  --color-primary-10-solid: var(--color-primary-10);
+  --color-primary-20-solid: var(--color-primary-20);
+  --color-primary-30-solid: var(--color-primary-30);
+  --color-primary-40-solid: var(--color-primary-40);
+  --color-primary-50-solid: var(--color-primary-50);
+  --color-primary-60-solid: var(--color-primary-60);
+  --color-primary-70-solid: var(--color-primary-70);
+  --color-primary-80-solid: var(--color-primary-80);
+  --color-primary-90-solid: var(--color-primary-90);
+}
+
+/* ------------------------------FEEDBACK - SUCCESS------------------------------ */
+:root {
+  --color-success-10-90: #d1fad8;
+  --color-success-20-80: #a3f5b1;
+  --color-success-30-70: #75f08a;
+  --color-success-40-60: #47eb63;
+  --color-success-50-50: #14b830;
+  --color-success-60-40: #0f8a24;
+  --color-success-70-30: #0a5c18;
+  --color-success-80-20: #084512;
+  --color-success-90-10: #052e0c;
+}
+
+[data-theme="dark"] {
+  --color-success-10-90: #052e0c;
+  --color-success-20-80: #084512;
+  --color-success-30-70: #0a5c18;
+  --color-success-40-60: #0f8a24;
+  --color-success-50-50: #14b830;
+  --color-success-60-40: #47eb63;
+  --color-success-70-30: #75f08a;
+  --color-success-80-20: #a3f5b1;
+  --color-success-90-10: #d1fad8;
+}
+
+:root {
+  --color-success-10: var(
+    --color-success-10-90
+  );
+  --color-success-20: var(
+    --color-success-20-80
+  );
+  --color-success-30: var(
+    --color-success-30-70
+  );
+  --color-success-40: var(
+    --color-success-40-60
+  );
+  --color-success-50: var(
+    --color-success-50-50
+  );
+  --color-success-60: var(
+    --color-success-60-40
+  );
+  --color-success-70: var(
+    --color-success-70-30
+  );
+  --color-success-80: var(
+    --color-success-80-20
+  );
+  --color-success-90: var(
+    --color-success-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* -------------------------------FEEDBACK - ALERT------------------------------- */
+:root {
+  --color-alert-10-90: #faecd1;
+  --color-alert-20-80: #f5daa3;
+  --color-alert-30-70: #f0c775;
+  --color-alert-40-60: #ebb447;
+  --color-alert-50-50: #e5a119;
+  --color-alert-60-40: #b88114;
+  --color-alert-70-30: #8a610f;
+  --color-alert-80-20: #5c410a;
+  --color-alert-90-10: #2e2005;
+}
+
+[data-theme="dark"] {
+  --color-alert-10-90: #2e2005;
+  --color-alert-20-80: #5c410a;
+  --color-alert-30-70: #8a610f;
+  --color-alert-40-60: #b88114;
+  --color-alert-50-50: #e5a119;
+  --color-alert-60-40: #ebb447;
+  --color-alert-70-30: #f0c775;
+  --color-alert-80-20: #f5daa3;
+  --color-alert-90-10: #faecd1;
+}
+
+:root {
+  --color-alert-10: var(
+    --color-alert-10-90
+  );
+  --color-alert-20: var(
+    --color-alert-20-80
+  );
+  --color-alert-30: var(
+    --color-alert-30-70
+  );
+  --color-alert-40: var(
+    --color-alert-40-60
+  );
+  --color-alert-50: var(
+    --color-alert-50-50
+  );
+  --color-alert-60: var(
+    --color-alert-60-40
+  );
+  --color-alert-70: var(
+    --color-alert-70-30
+  );
+  --color-alert-80: var(
+    --color-alert-80-20
+  );
+  --color-alert-90: var(
+    --color-alert-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* -------------------------------FEEDBACK - ERROR------------------------------- */
+:root {
+  --color-error-10-90: #fad5d1;
+  --color-error-20-80: #f5aaa3;
+  --color-error-30-70: #ef8076;
+  --color-error-40-60: #ea5548;
+  --color-error-50-50: #e52b1a;
+  --color-error-60-40: #b72215;
+  --color-error-70-30: #891a10;
+  --color-error-80-20: #5c110a;
+  --color-error-90-10: #2e0905;
+}
+
+[data-theme="dark"] {
+  --color-error-10-90: #2e0905;
+  --color-error-20-80: #5c110a;
+  --color-error-30-70: #891a10;
+  --color-error-40-60: #b72215;
+  --color-error-50-50: #e52b1a;
+  --color-error-60-40: #ea5548;
+  --color-error-70-30: #ef8076;
+  --color-error-80-20: #f5aaa3;
+  --color-error-90-10: #fad5d1;
+}
+
+:root {
+  --color-error-10: var(
+    --color-error-10-90
+  );
+  --color-error-20: var(
+    --color-error-20-80
+  );
+  --color-error-30: var(
+    --color-error-30-70
+  );
+  --color-error-40: var(
+    --color-error-40-60
+  );
+  --color-error-50: var(
+    --color-error-50-50
+  );
+  --color-error-60: var(
+    --color-error-60-40
+  );
+  --color-error-70: var(
+    --color-error-70-30
+  );
+  --color-error-80: var(
+    --color-error-80-20
+  );
+  --color-error-90: var(
+    --color-error-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - LEAF-------------------------------- */
+:root {
+  --color-leaf-10-90: #ecf2d9;
+  --color-leaf-20-80: #d9e5b3;
+  --color-leaf-30-70: #c5d98c;
+  --color-leaf-40-60: #b2cc66;
+  --color-leaf-50-50: #9fbf40;
+  --color-leaf-60-40: #7f9933;
+  --color-leaf-70-30: #5f7326;
+  --color-leaf-80-20: #404c1a;
+  --color-leaf-90-10: #20260d;
+}
+
+[data-theme="dark"] {
+  --color-leaf-10-90: #20260d;
+  --color-leaf-20-80: #404c1a;
+  --color-leaf-30-70: #5f7326;
+  --color-leaf-40-60: #7f9933;
+  --color-leaf-50-50: #9fbf40;
+  --color-leaf-60-40: #b2cc66;
+  --color-leaf-70-30: #c5d98c;
+  --color-leaf-80-20: #d9e5b3;
+  --color-leaf-90-10: #ecf2d9;
+}
+
+:root {
+  --color-leaf-10: var(
+    --color-leaf-10-90
+  );
+  --color-leaf-20: var(
+    --color-leaf-20-80
+  );
+  --color-leaf-30: var(
+    --color-leaf-30-70
+  );
+  --color-leaf-40: var(
+    --color-leaf-40-60
+  );
+  --color-leaf-50: var(
+    --color-leaf-50-50
+  );
+  --color-leaf-60: var(
+    --color-leaf-60-40
+  );
+  --color-leaf-70: var(
+    --color-leaf-70-30
+  );
+  --color-leaf-80: var(
+    --color-leaf-80-20
+  );
+  --color-leaf-90: var(
+    --color-leaf-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - SAND-------------------------------- */
+:root {
+  --color-sand-10-90: #f2eed9;
+  --color-sand-20-80: #e5ddb3;
+  --color-sand-30-70: #d9cc8c;
+  --color-sand-40-60: #ccbb66;
+  --color-sand-50-50: #bfaa40;
+  --color-sand-60-40: #998833;
+  --color-sand-70-30: #736626;
+  --color-sand-80-20: #4c441a;
+  --color-sand-90-10: #26220d;
+}
+
+[data-theme="dark"] {
+  --color-sand-10-90: #26220d;
+  --color-sand-20-80: #4c441a;
+  --color-sand-30-70: #736626;
+  --color-sand-40-60: #998833;
+  --color-sand-50-50: #bfaa40;
+  --color-sand-60-40: #ccbb66;
+  --color-sand-70-30: #d9cc8c;
+  --color-sand-80-20: #e5ddb3;
+  --color-sand-90-10: #f2eed9;
+}
+
+:root {
+  --color-sand-10: var(
+    --color-sand-10-90
+  );
+  --color-sand-20: var(
+    --color-sand-20-80
+  );
+  --color-sand-30: var(
+    --color-sand-30-70
+  );
+  --color-sand-40: var(
+    --color-sand-40-60
+  );
+  --color-sand-50: var(
+    --color-sand-50-50
+  );
+  --color-sand-60: var(
+    --color-sand-60-40
+  );
+  --color-sand-70: var(
+    --color-sand-70-30
+  );
+  --color-sand-80: var(
+    --color-sand-80-20
+  );
+  --color-sand-90: var(
+    --color-sand-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - WOOD-------------------------------- */
+:root {
+  --color-wood-10-90: #f2e1d9;
+  --color-wood-20-80: #e5c3b3;
+  --color-wood-30-70: #d9a68c;
+  --color-wood-40-60: #cc8866;
+  --color-wood-50-50: #bf6a40;
+  --color-wood-60-40: #995533;
+  --color-wood-70-30: #734026;
+  --color-wood-80-20: #4c2a1a;
+  --color-wood-90-10: #26170d;
+}
+
+[data-theme="dark"] {
+  --color-wood-10-90: #26170d;
+  --color-wood-20-80: #4c2a1a;
+  --color-wood-30-70: #734026;
+  --color-wood-40-60: #995533;
+  --color-wood-50-50: #bf6a40;
+  --color-wood-60-40: #cc8866;
+  --color-wood-70-30: #d9a68c;
+  --color-wood-80-20: #e5c3b3;
+  --color-wood-90-10: #f2e1d9;
+}
+
+:root {
+  --color-wood-10: var(
+    --color-wood-10-90
+  );
+  --color-wood-20: var(
+    --color-wood-20-80
+  );
+  --color-wood-30: var(
+    --color-wood-30-70
+  );
+  --color-wood-40: var(
+    --color-wood-40-60
+  );
+  --color-wood-50: var(
+    --color-wood-50-50
+  );
+  --color-wood-60: var(
+    --color-wood-60-40
+  );
+  --color-wood-70: var(
+    --color-wood-70-30
+  );
+  --color-wood-80: var(
+    --color-wood-80-20
+  );
+  --color-wood-90: var(
+    --color-wood-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - CLAY-------------------------------- */
+:root {
+  --color-clay-10-90: #f2d9df;
+  --color-clay-20-80: #e5b3bf;
+  --color-clay-30-70: #d98ca0;
+  --color-clay-40-60: #cc6680;
+  --color-clay-50-50: #bf4060;
+  --color-clay-60-40: #99334d;
+  --color-clay-70-30: #73263a;
+  --color-clay-80-20: #4c1a26;
+  --color-clay-90-10: #260d13;
+}
+
+[data-theme="dark"] {
+  --color-clay-10-90: #260d13;
+  --color-clay-20-80: #4c1a26;
+  --color-clay-30-70: #73263a;
+  --color-clay-40-60: #99334d;
+  --color-clay-50-50: #bf4060;
+  --color-clay-60-40: #cc6680;
+  --color-clay-70-30: #d98ca0;
+  --color-clay-80-20: #e5b3bf;
+  --color-clay-90-10: #f2d9df;
+}
+
+:root {
+  --color-clay-10: var(
+    --color-clay-10-90
+  );
+  --color-clay-20: var(
+    --color-clay-20-80
+  );
+  --color-clay-30: var(
+    --color-clay-30-70
+  );
+  --color-clay-40: var(
+    --color-clay-40-60
+  );
+  --color-clay-50: var(
+    --color-clay-50-50
+  );
+  --color-clay-60: var(
+    --color-clay-60-40
+  );
+  --color-clay-70: var(
+    --color-clay-70-30
+  );
+  --color-clay-80: var(
+    --color-clay-80-20
+  );
+  --color-clay-90: var(
+    --color-clay-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* -------------------------------SUPPORT - FLOWER------------------------------- */
+:root {
+  --color-flower-10-90: #f2d9f2;
+  --color-flower-20-80: #e5b3e5;
+  --color-flower-30-70: #d98cd9;
+  --color-flower-40-60: #cc66cc;
+  --color-flower-50-50: #bf40bf;
+  --color-flower-60-40: #993399;
+  --color-flower-70-30: #732673;
+  --color-flower-80-20: #4c1a4c;
+  --color-flower-90-10: #260d26;
+}
+
+[data-theme="dark"] {
+  --color-flower-10-90: #260d26;
+  --color-flower-20-80: #4c1a4c;
+  --color-flower-30-70: #732673;
+  --color-flower-40-60: #993399;
+  --color-flower-50-50: #bf40bf;
+  --color-flower-60-40: #cc66cc;
+  --color-flower-70-30: #d98cd9;
+  --color-flower-80-20: #e5b3e5;
+  --color-flower-90-10: #f2d9f2;
+}
+
+:root {
+  --color-flower-10: var(
+    --color-flower-10-90
+  );
+  --color-flower-20: var(
+    --color-flower-20-80
+  );
+  --color-flower-30: var(
+    --color-flower-30-70
+  );
+  --color-flower-40: var(
+    --color-flower-40-60
+  );
+  --color-flower-50: var(
+    --color-flower-50-50
+  );
+  --color-flower-60: var(
+    --color-flower-60-40
+  );
+  --color-flower-70: var(
+    --color-flower-70-30
+  );
+  --color-flower-80: var(
+    --color-flower-80-20
+  );
+  --color-flower-90: var(
+    --color-flower-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - DUSK-------------------------------- */
+:root {
+  --color-dusk-10-90: #e1d9f2;
+  --color-dusk-20-80: #c3b3e5;
+  --color-dusk-30-70: #a68cd9;
+  --color-dusk-40-60: #8866cc;
+  --color-dusk-50-50: #6a40bf;
+  --color-dusk-60-40: #553399;
+  --color-dusk-70-30: #402673;
+  --color-dusk-80-20: #2a1a4c;
+  --color-dusk-90-10: #150d26;
+}
+
+[data-theme="dark"] {
+  --color-dusk-10-90: #150d26;
+  --color-dusk-20-80: #2a1a4c;
+  --color-dusk-30-70: #402673;
+  --color-dusk-40-60: #553399;
+  --color-dusk-50-50: #6a40bf;
+  --color-dusk-60-40: #8866cc;
+  --color-dusk-70-30: #a68cd9;
+  --color-dusk-80-20: #c3b3e5;
+  --color-dusk-90-10: #e1d9f2;
+}
+
+:root {
+  --color-dusk-10: var(
+    --color-dusk-10-90
+  );
+  --color-dusk-20: var(
+    --color-dusk-20-80
+  );
+  --color-dusk-30: var(
+    --color-dusk-30-70
+  );
+  --color-dusk-40: var(
+    --color-dusk-40-60
+  );
+  --color-dusk-50: var(
+    --color-dusk-50-50
+  );
+  --color-dusk-60: var(
+    --color-dusk-60-40
+  );
+  --color-dusk-70: var(
+    --color-dusk-70-30
+  );
+  --color-dusk-80: var(
+    --color-dusk-80-20
+  );
+  --color-dusk-90: var(
+    --color-dusk-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - SKY--------------------------------- */
+:root {
+  --color-sky-10-90: #d9e1f2;
+  --color-sky-20-80: #b3c3e5;
+  --color-sky-30-70: #8ca6d9;
+  --color-sky-40-60: #6688cc;
+  --color-sky-50-50: #406abf;
+  --color-sky-60-40: #335599;
+  --color-sky-70-30: #264073;
+  --color-sky-80-20: #1a2a4c;
+  --color-sky-90-10: #0d1526;
+}
+
+[data-theme="dark"] {
+  --color-sky-10-90: #0d1526;
+  --color-sky-20-80: #1a2a4c;
+  --color-sky-30-70: #264073;
+  --color-sky-40-60: #335599;
+  --color-sky-50-50: #406abf;
+  --color-sky-60-40: #6688cc;
+  --color-sky-70-30: #8ca6d9;
+  --color-sky-80-20: #b3c3e5;
+  --color-sky-90-10: #d9e1f2;
+}
+
+:root {
+  --color-sky-10: var(
+    --color-sky-10-90
+  );
+  --color-sky-20: var(
+    --color-sky-20-80
+  );
+  --color-sky-30: var(
+    --color-sky-30-70
+  );
+  --color-sky-40: var(
+    --color-sky-40-60
+  );
+  --color-sky-50: var(
+    --color-sky-50-50
+  );
+  --color-sky-60: var(
+    --color-sky-60-40
+  );
+  --color-sky-70: var(
+    --color-sky-70-30
+  );
+  --color-sky-80: var(
+    --color-sky-80-20
+  );
+  --color-sky-90: var(
+    --color-sky-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - SEA--------------------------------- */
+:root {
+  --color-sea-10-90: #d9eaf2;
+  --color-sea-20-80: #b3d5e5;
+  --color-sea-30-70: #8cbfd9;
+  --color-sea-40-60: #66aacc;
+  --color-sea-50-50: #4095bf;
+  --color-sea-60-40: #337799;
+  --color-sea-70-30: #265973;
+  --color-sea-80-20: #1a3c4c;
+  --color-sea-90-10: #0d1e26;
+}
+
+[data-theme="dark"] {
+  --color-sea-10-90: #0d1e26;
+  --color-sea-20-80: #1a3c4c;
+  --color-sea-30-70: #265973;
+  --color-sea-40-60: #337799;
+  --color-sea-50-50: #4095bf;
+  --color-sea-60-40: #66aacc;
+  --color-sea-70-30: #8cbfd9;
+  --color-sea-80-20: #b3d5e5;
+  --color-sea-90-10: #d9eaf2;
+}
+
+:root {
+  --color-sea-10: var(
+    --color-sea-10-90
+  );
+  --color-sea-20: var(
+    --color-sea-20-80
+  );
+  --color-sea-30: var(
+    --color-sea-30-70
+  );
+  --color-sea-40: var(
+    --color-sea-40-60
+  );
+  --color-sea-50: var(
+    --color-sea-50-50
+  );
+  --color-sea-60: var(
+    --color-sea-60-40
+  );
+  --color-sea-70: var(
+    --color-sea-70-30
+  );
+  --color-sea-80: var(
+    --color-sea-80-20
+  );
+  --color-sea-90: var(
+    --color-sea-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------SUPPORT - LAKE-------------------------------- */
+:root {
+  --color-lake-10-90: #d9f2ee;
+  --color-lake-20-80: #b3e5dd;
+  --color-lake-30-70: #8cd9cc;
+  --color-lake-40-60: #66ccbb;
+  --color-lake-50-50: #40bfaa;
+  --color-lake-60-40: #339988;
+  --color-lake-70-30: #267366;
+  --color-lake-80-20: #1a4c44;
+  --color-lake-90-10: #0d2622;
+}
+
+[data-theme="dark"] {
+  --color-lake-10-90: #0d2622;
+  --color-lake-20-80: #1a4c44;
+  --color-lake-30-70: #267366;
+  --color-lake-40-60: #339988;
+  --color-lake-50-50: #40bfaa;
+  --color-lake-60-40: #66ccbb;
+  --color-lake-70-30: #8cd9cc;
+  --color-lake-80-20: #b3e5dd;
+  --color-lake-90-10: #d9f2ee;
+}
+
+:root {
+  --color-lake-10: var(
+    --color-lake-10-90
+  );
+  --color-lake-20: var(
+    --color-lake-20-80
+  );
+  --color-lake-30: var(
+    --color-lake-30-70
+  );
+  --color-lake-40: var(
+    --color-lake-40-60
+  );
+  --color-lake-50: var(
+    --color-lake-50-50
+  );
+  --color-lake-60: var(
+    --color-lake-60-40
+  );
+  --color-lake-70: var(
+    --color-lake-70-30
+  );
+  --color-lake-80: var(
+    --color-lake-80-20
+  );
+  --color-lake-90: var(
+    --color-lake-90-10
+  );
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------------OPACITY------------------------------------ */
+:root {
+  --color-opacity-05: rgba(26, 26, 26, 0.05);
+  /* The step between hover and active, which is where a keyboard focus sits: Nav and
+     BottomSheet both reach for it by name, and neither KDLS nor this system had ever
+     declared it — so the declaration was dropped and a focused row had no tint at all. */
+  --color-opacity-08: rgba(26, 26, 26, 0.08);
+  --color-opacity-10: rgba(26, 26, 26, 0.1);
+  --color-opacity-20: rgba(26, 26, 26, 0.2);
+  --color-opacity-30: rgba(26, 26, 26, 0.3);
+  --color-opacity-40: rgba(26, 26, 26, 0.4);
+  --color-opacity-50: rgba(26, 26, 26, 0.5);
+}
+
+[data-theme="dark"] {
+  --color-opacity-05: rgba(255, 255, 255, 0.05);
+  --color-opacity-08: rgba(255, 255, 255, 0.08);
+  --color-opacity-10: rgba(255, 255, 255, 0.1);
+  --color-opacity-20: rgba(255, 255, 255, 0.2);
+  --color-opacity-30: rgba(255, 255, 255, 0.3);
+  --color-opacity-40: rgba(255, 255, 255, 0.4);
+  --color-opacity-50: rgba(255, 255, 255, 0.5);
+}
+
+/* The same veil, for a surface that runs against the theme.
+
+   A toast is dark in the light theme and light in the dark one, so --color-opacity-*, which
+   follows the theme, is exactly backwards on it: a dark hover state on an already dark
+   panel. KDLS writes the four values below as rgba literals inside Toast.css for want of a
+   token; this is that token, and anything else with an inverted surface can now reach it.
+
+   The dark-theme alphas are lower on purpose, carried from KDLS: a dark veil reads stronger
+   than a light one at the same opacity, so matching the numbers would not match the effect. */
+:root {
+  --color-opacity-inverse-10: rgba(255, 255, 255, 0.1);
+  --color-opacity-inverse-20: rgba(255, 255, 255, 0.2);
+}
+
+[data-theme="dark"] {
+  --color-opacity-inverse-10: rgba(26, 26, 26, 0.08);
+  --color-opacity-inverse-20: rgba(26, 26, 26, 0.16);
+}
+
+/* ------------------------------------------------------------------------------ *//* ---------------------------CORNER RADIUS (SOFT)---------------------------- */
+
+/* Radius: `soft` is the install default.
+   KDLS had a fifth, Kenlo-specific scheme living in :root and named `default`
+   (8 / 8 / 12 / 24 px). SDS removes it and promotes `soft` into :root instead.
+   [data-radius="soft"] still exists below, unchanged in name and value. */
+:root {
+  --corner-radius-x-small: 4px;
+  --corner-radius-small: 8px;
+  --corner-radius-medium: 16px;
+  --corner-radius-large: 28px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+/* ------------------------------------------------------------------------------ */
+/* ----------------------------------LAYERING------------------------------------ */
+
+/* The stacking order, which KDLS has as an implicit scale spread across eight stylesheets
+   as bare numbers: 100, 200, 300, 400, 500, 9900, 9999. The numbers were consistent, which
+   is lucky rather than designed — nothing said what they meant and nothing stopped the next
+   component picking 150.
+
+   Naming them is what makes the order arguable. The gaps are deliberate: something that
+   needs to sit between two of these has room without renumbering the system. */
+:root {
+  /* Sticks to the page but does not cover it: a header, a bulk action bar. */
+  --z-sticky: 100;
+  /* Anchored to something on the page: menus, popovers, select panels. */
+  --z-floating: 200;
+  /* Covers the page and takes the keyboard: a modal and its veil. */
+  --z-modal: 300;
+  /* Covers the page from an edge: a drawer, a bottom sheet. Above a modal, because a modal
+     can open one. */
+  --z-overlay: 400;
+  /* Said over everything and never reachable any other way: a toast, a tooltip, a
+     fullscreen spinner. Nothing may be hidden behind these. */
+  --z-notice: 9900;
+}
+
+/* -----------------------------------SPACING------------------------------------ */
+:root {
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  /* Half steps. KDLS has only 0-5 and writes the rest as literals — the tooltip's
+     `padding: 6px 10px` is the case that forced these two to exist. Added rather than
+     carried, because a value with no token is a value nobody can theme. */
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-2-5: 10px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+}
+
+/* ------------------------------------------------------------------------------ *//* ----------------------------------TYPOGRAPHY---------------------------------- */
+:root {
+  --font-family-base: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-weight-regular: 400;
+  /* KDLS had no token for 500 and components wrote the number — Badge's root is one.
+     The scale needs the step, so the step exists. */
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-size-display-lg: 56px;
+  --font-size-display-md: 40px;
+  --font-size-display-sm: 32px;
+  --font-size-title-lg: 24px;
+  --font-size-title-md: 20px;
+  --font-size-title-sm: 16px;
+  --font-size-body-md: 16px;
+  --font-size-body-sm: 14px;
+  --font-size-label-sm: 12px;
+  --lh-display-lg: 64px;
+  --lh-display-md: 48px;
+  --lh-display-sm: 40px;
+  --lh-title-lg: 32px;
+  --lh-title-md: 24px;
+  --lh-title-sm: 24px;
+  --lh-body-md: 24px;
+  --lh-body-sm: 20px;
+  --lh-label-sm: 16px;
+  --display-color: var(--color-neutral-90);
+  --title-color: var(--color-neutral-90);
+  --body-color: var(--color-neutral-80);
+  --label-color: var(--color-neutral-50);
+}
+
+/* ------------------------------------------------------------------------------ *//* -------------------------------ICON SIZE------------------------------- */
+:root {
+  /* KDLS drew a few small controls with 12px inline SVG and had no token for it — the
+     Input's incrementer chevrons are one. The step exists now. */
+  --icon-size-xs: 12px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 24px;
+  --icon-size-lg: 32px;
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------------SHADOWS------------------------------------ */
+:root {
+  --shadow-drop-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
+  --shadow-drop-md: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
+  --shadow-drop-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
+}
+
+[data-theme="dark"] {
+  --shadow-drop-sm: 0 2px 10px 0 rgba(255, 255, 255, 0.07);
+  --shadow-drop-md: 0 4px 18px 0 rgba(255, 255, 255, 0.09);
+  --shadow-drop-lg: 0 8px 28px 0 rgba(255, 255, 255, 0.11);
+}
+
+/* ------------------------------------------------------------------------------ *//* ------------------------------------EASING------------------------------------ */
+:root {
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ------------------------------------------------------------------------------ *//* --------------------------------------SCRIM---------------------------------- */
+/* The veil behind a fullscreen overlay. Deliberately NOT part of the opacity family:
+   that family inverts with the theme, and a scrim must darken in both — a white veil in
+   dark mode would light the screen up instead of dimming it.
+
+   Derived from --color-black rather than written as rgba(), so no new literal enters the
+   system. This is the token that did not exist when the Spinner's overlay was ported;
+   the rule is that the answer to a missing value is a token, not a literal. */
+:root {
+  --color-scrim: color-mix(in srgb, var(--color-black) 70%, transparent);
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------PAGE BACKGROUND----------------------------- */
+/* KDLS wrote both of these as literals. They are the palette values they always meant:
+   #f2f2f2 is --color-neutral-10 in the light theme, and #000000 is --color-black. */
+:root {
+  --page-bg-color: var(--color-neutral-10);
+}
+
+[data-theme="dark"] {
+  --page-bg-color: var(--color-black);
+}
+
+/* ------------------------------------------------------------------------------ *//* -----------------------------FEEDBACK SURFACES----------------------------- */
+/* The tinted ground a message sits on — the Alert today, and anything else that tints a
+   whole surface with a feedback family rather than just its text or its border.
+
+   The families invert themselves between the themes: `--color-success-10` reads the pair
+   `10-90`, so in the dark theme it resolves to the palette's tone 90, the darkest step
+   there is. That is right for a line of text and too much for a surface — the message
+   reads as a hole cut in the page, and next to the near-black page background it barely
+   separates at all.
+
+   So the surface takes tone 10 in the light theme and tone 80 in the dark, which is the
+   step above. There is no `10-80` pair and there should not be one: the pairs are the
+   palette's own symmetry and inventing an asymmetric one hides the exception inside a
+   name that promises otherwise. The exception is spelled out here instead, reading the
+   pair that already lands on 80 in the dark — `--color-success-20` is `20-80`.
+
+   No literal enters the system: both sides are the palette's own tokens. */
+:root {
+  --surface-info: var(--color-primary-10);
+  --surface-success: var(--color-success-10);
+  --surface-alert: var(--color-alert-10);
+  --surface-error: var(--color-error-10);
+  --surface-neutral: var(--color-neutral-10);
+}
+
+[data-theme="dark"] {
+  --surface-info: var(--color-primary-20);
+  --surface-success: var(--color-success-20);
+  --surface-alert: var(--color-alert-20);
+  --surface-error: var(--color-error-20);
+  --surface-neutral: var(--color-neutral-20);
+}
+
+/* ------------------------------------------------------------------------------ *//* -------------------------------RADIUS VARIANTS-------------------------------- */
+/* A escada dos cantos é uma crescente, e nos dois degraus pequenos ela não era.
+
+   `--corner-radius-x-small` valia 8px tanto em `medium` quanto em `rounded`, e
+   `--corner-radius-small` valia 16px nos dois. Todo controle pequeno do sistema — o
+   Checkbox, o Switch, as células do calendário — chegava ao seu formato final um esquema
+   antes do fim, e os dois últimos ficavam indistinguíveis.
+
+   Ajustado em 2026-09-14, a pedido do Rafael, depois de ele encontrar o mesmo sintoma em
+   três componentes diferentes. `rounded` não mudou: quem desceu foi o meio, que é o que
+   abre espaço para os quatro passos serem quatro.
+
+     x-small   0 → 4 → 6 → 8
+     small     0 → 8 → 12 → 16
+
+   `medium` e `large` já cresciam e ficaram como estavam. */
+[data-radius="soft"] {
+  --corner-radius-x-small: 4px;
+  --corner-radius-small: 8px;
+  --corner-radius-medium: 16px;
+  --corner-radius-large: 28px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+[data-radius="flat"] {
+  --corner-radius-x-small: 0px;
+  --corner-radius-small: 0px;
+  --corner-radius-medium: 0px;
+  --corner-radius-large: 0px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+[data-radius="medium"] {
+  --corner-radius-x-small: 6px;
+  --corner-radius-small: 12px;
+  --corner-radius-medium: 24px;
+  --corner-radius-large: 32px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+[data-radius="rounded"] {
+  --corner-radius-x-small: 8px;
+  --corner-radius-small: 16px;
+  --corner-radius-medium: 32px;
+  --corner-radius-large: 40px;
+  --corner-radius-full: 9999px;
+  --radius-xs: var(--corner-radius-x-small);
+  --radius-sm: var(--corner-radius-small);
+  --radius-md: var(--corner-radius-medium);
+  --radius-lg: var(--corner-radius-large);
+  --radius-full: var(--corner-radius-full);
+}
+
+/* ------------------------------------------------------------------------------ *//* ----------------------------FONT FAMILY OVERRIDES----------------------------- */
+[data-font="inter"] {
+  --font-family-base: "Inter", sans-serif;
+}
+
+[data-font="helvetica"] {
+  --font-family-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+[data-font="source-sans"] {
+  --font-family-base: "Source Sans 3", "Source Sans Pro", sans-serif;
+}
+
+[data-font="nunito"] {
+  --font-family-base: "Nunito", sans-serif;
+}
+
+[data-font="montserrat"] {
+  --font-family-base: "Montserrat", sans-serif;
+}
+
+/* ------------------------------------------------------------------------------ */
+
+/* >>> generated: label contrast tokens — do not edit by hand <<< */
+
+/* The colour a label must be to stay readable on each surface.
+   Derived from the palettes above by scripts/gen-contrast-tokens.mjs: the step of the
+   family itself that reads best, falling back to white or black only where the family
+   cannot reach WCAG AA. A component paints its label with these and never picks a step
+   by eye. */
+
+:root {
+  --color-neutral-10-on: var(--color-neutral-90);
+  --color-neutral-20-on: var(--color-neutral-90);
+  --color-neutral-30-on: var(--color-neutral-90);
+  --color-neutral-40-on: var(--color-neutral-90);
+  --color-neutral-50-on: var(--color-black);
+  --color-neutral-60-on: var(--color-neutral-10);
+  --color-neutral-70-on: var(--color-neutral-10);
+  --color-neutral-80-on: var(--color-neutral-10);
+  --color-neutral-90-on: var(--color-neutral-10);
+  --color-success-10-on: var(--color-success-90);
+  --color-success-20-on: var(--color-success-90);
+  --color-success-30-on: var(--color-success-90);
+  --color-success-40-on: var(--color-success-90);
+  --color-success-50-on: var(--color-success-90);
+  --color-success-60-on: var(--color-black);
+  --color-success-70-on: var(--color-success-10);
+  --color-success-80-on: var(--color-success-10);
+  --color-success-90-on: var(--color-success-10);
+  --color-alert-10-on: var(--color-alert-90);
+  --color-alert-20-on: var(--color-alert-90);
+  --color-alert-30-on: var(--color-alert-90);
+  --color-alert-40-on: var(--color-alert-90);
+  --color-alert-50-on: var(--color-alert-90);
+  --color-alert-60-on: var(--color-alert-90);
+  --color-alert-70-on: var(--color-alert-10);
+  --color-alert-80-on: var(--color-alert-10);
+  --color-alert-90-on: var(--color-alert-10);
+  --color-error-10-on: var(--color-error-90);
+  --color-error-20-on: var(--color-error-90);
+  --color-error-30-on: var(--color-error-90);
+  --color-error-40-on: var(--color-error-90);
+  --color-error-50-on: var(--color-black);
+  --color-error-60-on: var(--color-error-10);
+  --color-error-70-on: var(--color-error-10);
+  --color-error-80-on: var(--color-error-10);
+  --color-error-90-on: var(--color-error-10);
+  --color-leaf-10-on: var(--color-leaf-90);
+  --color-leaf-20-on: var(--color-leaf-90);
+  --color-leaf-30-on: var(--color-leaf-90);
+  --color-leaf-40-on: var(--color-leaf-90);
+  --color-leaf-50-on: var(--color-leaf-90);
+  --color-leaf-60-on: var(--color-leaf-90);
+  --color-leaf-70-on: var(--color-leaf-10);
+  --color-leaf-80-on: var(--color-leaf-10);
+  --color-leaf-90-on: var(--color-leaf-10);
+  --color-sand-10-on: var(--color-sand-90);
+  --color-sand-20-on: var(--color-sand-90);
+  --color-sand-30-on: var(--color-sand-90);
+  --color-sand-40-on: var(--color-sand-90);
+  --color-sand-50-on: var(--color-sand-90);
+  --color-sand-60-on: var(--color-black);
+  --color-sand-70-on: var(--color-sand-10);
+  --color-sand-80-on: var(--color-sand-10);
+  --color-sand-90-on: var(--color-sand-10);
+  --color-wood-10-on: var(--color-wood-90);
+  --color-wood-20-on: var(--color-wood-90);
+  --color-wood-30-on: var(--color-wood-90);
+  --color-wood-40-on: var(--color-wood-90);
+  --color-wood-50-on: var(--color-black);
+  --color-wood-60-on: var(--color-white);
+  --color-wood-70-on: var(--color-wood-10);
+  --color-wood-80-on: var(--color-wood-10);
+  --color-wood-90-on: var(--color-wood-10);
+  --color-clay-10-on: var(--color-clay-90);
+  --color-clay-20-on: var(--color-clay-90);
+  --color-clay-30-on: var(--color-clay-90);
+  --color-clay-40-on: var(--color-clay-90);
+  --color-clay-50-on: var(--color-white);
+  --color-clay-60-on: var(--color-clay-10);
+  --color-clay-70-on: var(--color-clay-10);
+  --color-clay-80-on: var(--color-clay-10);
+  --color-clay-90-on: var(--color-clay-10);
+  --color-flower-10-on: var(--color-flower-90);
+  --color-flower-20-on: var(--color-flower-90);
+  --color-flower-30-on: var(--color-flower-90);
+  --color-flower-40-on: var(--color-flower-90);
+  --color-flower-50-on: var(--color-black);
+  --color-flower-60-on: var(--color-flower-10);
+  --color-flower-70-on: var(--color-flower-10);
+  --color-flower-80-on: var(--color-flower-10);
+  --color-flower-90-on: var(--color-flower-10);
+  --color-dusk-10-on: var(--color-dusk-90);
+  --color-dusk-20-on: var(--color-dusk-90);
+  --color-dusk-30-on: var(--color-dusk-90);
+  --color-dusk-40-on: var(--color-black);
+  --color-dusk-50-on: var(--color-dusk-10);
+  --color-dusk-60-on: var(--color-dusk-10);
+  --color-dusk-70-on: var(--color-dusk-10);
+  --color-dusk-80-on: var(--color-dusk-10);
+  --color-dusk-90-on: var(--color-dusk-10);
+  --color-sky-10-on: var(--color-sky-90);
+  --color-sky-20-on: var(--color-sky-90);
+  --color-sky-30-on: var(--color-sky-90);
+  --color-sky-40-on: var(--color-sky-90);
+  --color-sky-50-on: var(--color-white);
+  --color-sky-60-on: var(--color-sky-10);
+  --color-sky-70-on: var(--color-sky-10);
+  --color-sky-80-on: var(--color-sky-10);
+  --color-sky-90-on: var(--color-sky-10);
+  --color-sea-10-on: var(--color-sea-90);
+  --color-sea-20-on: var(--color-sea-90);
+  --color-sea-30-on: var(--color-sea-90);
+  --color-sea-40-on: var(--color-sea-90);
+  --color-sea-50-on: var(--color-sea-90);
+  --color-sea-60-on: var(--color-white);
+  --color-sea-70-on: var(--color-sea-10);
+  --color-sea-80-on: var(--color-sea-10);
+  --color-sea-90-on: var(--color-sea-10);
+  --color-lake-10-on: var(--color-lake-90);
+  --color-lake-20-on: var(--color-lake-90);
+  --color-lake-30-on: var(--color-lake-90);
+  --color-lake-40-on: var(--color-lake-90);
+  --color-lake-50-on: var(--color-lake-90);
+  --color-lake-60-on: var(--color-lake-90);
+  --color-lake-70-on: var(--color-lake-10);
+  --color-lake-80-on: var(--color-lake-10);
+  --color-lake-90-on: var(--color-lake-10);
+}
+
+[data-theme="dark"] {
+  --color-neutral-10-on: var(--color-neutral-90);
+  --color-neutral-20-on: var(--color-neutral-90);
+  --color-neutral-30-on: var(--color-neutral-90);
+  --color-neutral-40-on: var(--color-black);
+  --color-neutral-50-on: var(--color-neutral-10);
+  --color-neutral-60-on: var(--color-neutral-10);
+  --color-neutral-70-on: var(--color-neutral-10);
+  --color-neutral-80-on: var(--color-neutral-10);
+  --color-neutral-90-on: var(--color-neutral-10);
+  --color-success-10-on: var(--color-success-90);
+  --color-success-20-on: var(--color-success-90);
+  --color-success-30-on: var(--color-success-90);
+  --color-success-40-on: var(--color-black);
+  --color-success-50-on: var(--color-success-10);
+  --color-success-60-on: var(--color-success-10);
+  --color-success-70-on: var(--color-success-10);
+  --color-success-80-on: var(--color-success-10);
+  --color-success-90-on: var(--color-success-10);
+  --color-alert-10-on: var(--color-alert-90);
+  --color-alert-20-on: var(--color-alert-90);
+  --color-alert-30-on: var(--color-alert-90);
+  --color-alert-40-on: var(--color-alert-10);
+  --color-alert-50-on: var(--color-alert-10);
+  --color-alert-60-on: var(--color-alert-10);
+  --color-alert-70-on: var(--color-alert-10);
+  --color-alert-80-on: var(--color-alert-10);
+  --color-alert-90-on: var(--color-alert-10);
+  --color-error-10-on: var(--color-error-90);
+  --color-error-20-on: var(--color-error-90);
+  --color-error-30-on: var(--color-error-90);
+  --color-error-40-on: var(--color-error-90);
+  --color-error-50-on: var(--color-black);
+  --color-error-60-on: var(--color-error-10);
+  --color-error-70-on: var(--color-error-10);
+  --color-error-80-on: var(--color-error-10);
+  --color-error-90-on: var(--color-error-10);
+  --color-leaf-10-on: var(--color-leaf-90);
+  --color-leaf-20-on: var(--color-leaf-90);
+  --color-leaf-30-on: var(--color-leaf-90);
+  --color-leaf-40-on: var(--color-leaf-10);
+  --color-leaf-50-on: var(--color-leaf-10);
+  --color-leaf-60-on: var(--color-leaf-10);
+  --color-leaf-70-on: var(--color-leaf-10);
+  --color-leaf-80-on: var(--color-leaf-10);
+  --color-leaf-90-on: var(--color-leaf-10);
+  --color-sand-10-on: var(--color-sand-90);
+  --color-sand-20-on: var(--color-sand-90);
+  --color-sand-30-on: var(--color-sand-90);
+  --color-sand-40-on: var(--color-black);
+  --color-sand-50-on: var(--color-sand-10);
+  --color-sand-60-on: var(--color-sand-10);
+  --color-sand-70-on: var(--color-sand-10);
+  --color-sand-80-on: var(--color-sand-10);
+  --color-sand-90-on: var(--color-sand-10);
+  --color-wood-10-on: var(--color-wood-90);
+  --color-wood-20-on: var(--color-wood-90);
+  --color-wood-30-on: var(--color-wood-90);
+  --color-wood-40-on: var(--color-white);
+  --color-wood-50-on: var(--color-black);
+  --color-wood-60-on: var(--color-wood-10);
+  --color-wood-70-on: var(--color-wood-10);
+  --color-wood-80-on: var(--color-wood-10);
+  --color-wood-90-on: var(--color-wood-10);
+  --color-clay-10-on: var(--color-clay-90);
+  --color-clay-20-on: var(--color-clay-90);
+  --color-clay-30-on: var(--color-clay-90);
+  --color-clay-40-on: var(--color-clay-90);
+  --color-clay-50-on: var(--color-white);
+  --color-clay-60-on: var(--color-clay-10);
+  --color-clay-70-on: var(--color-clay-10);
+  --color-clay-80-on: var(--color-clay-10);
+  --color-clay-90-on: var(--color-clay-10);
+  --color-flower-10-on: var(--color-flower-90);
+  --color-flower-20-on: var(--color-flower-90);
+  --color-flower-30-on: var(--color-flower-90);
+  --color-flower-40-on: var(--color-flower-90);
+  --color-flower-50-on: var(--color-black);
+  --color-flower-60-on: var(--color-flower-10);
+  --color-flower-70-on: var(--color-flower-10);
+  --color-flower-80-on: var(--color-flower-10);
+  --color-flower-90-on: var(--color-flower-10);
+  --color-dusk-10-on: var(--color-dusk-90);
+  --color-dusk-20-on: var(--color-dusk-90);
+  --color-dusk-30-on: var(--color-dusk-90);
+  --color-dusk-40-on: var(--color-dusk-90);
+  --color-dusk-50-on: var(--color-dusk-90);
+  --color-dusk-60-on: var(--color-black);
+  --color-dusk-70-on: var(--color-dusk-10);
+  --color-dusk-80-on: var(--color-dusk-10);
+  --color-dusk-90-on: var(--color-dusk-10);
+  --color-sky-10-on: var(--color-sky-90);
+  --color-sky-20-on: var(--color-sky-90);
+  --color-sky-30-on: var(--color-sky-90);
+  --color-sky-40-on: var(--color-sky-90);
+  --color-sky-50-on: var(--color-white);
+  --color-sky-60-on: var(--color-sky-10);
+  --color-sky-70-on: var(--color-sky-10);
+  --color-sky-80-on: var(--color-sky-10);
+  --color-sky-90-on: var(--color-sky-10);
+  --color-sea-10-on: var(--color-sea-90);
+  --color-sea-20-on: var(--color-sea-90);
+  --color-sea-30-on: var(--color-sea-90);
+  --color-sea-40-on: var(--color-white);
+  --color-sea-50-on: var(--color-sea-10);
+  --color-sea-60-on: var(--color-sea-10);
+  --color-sea-70-on: var(--color-sea-10);
+  --color-sea-80-on: var(--color-sea-10);
+  --color-sea-90-on: var(--color-sea-10);
+  --color-lake-10-on: var(--color-lake-90);
+  --color-lake-20-on: var(--color-lake-90);
+  --color-lake-30-on: var(--color-lake-90);
+  --color-lake-40-on: var(--color-lake-10);
+  --color-lake-50-on: var(--color-lake-10);
+  --color-lake-60-on: var(--color-lake-10);
+  --color-lake-70-on: var(--color-lake-10);
+  --color-lake-80-on: var(--color-lake-10);
+  --color-lake-90-on: var(--color-lake-10);
+}
+
+/* The primary slot follows the scheme it is pointed at. applyCustomColor and
+   applyCustomGradient override these at runtime with the same contrast rule. */
+
+:root {
+  --color-primary-10-on: var(--color-neutral-10-on);
+  --color-primary-20-on: var(--color-neutral-20-on);
+  --color-primary-30-on: var(--color-neutral-30-on);
+  --color-primary-40-on: var(--color-neutral-50-on);
+  --color-primary-50-on: var(--color-neutral-80-on);
+}
+
+[data-color-scheme="leaf"] {
+  --color-primary-10-on: var(--color-leaf-10-on);
+  --color-primary-20-on: var(--color-leaf-20-on);
+  --color-primary-30-on: var(--color-leaf-30-on);
+  --color-primary-40-on: var(--color-leaf-40-on);
+  --color-primary-50-on: var(--color-leaf-50-on);
+}
+
+[data-color-scheme="sand"] {
+  --color-primary-10-on: var(--color-sand-10-on);
+  --color-primary-20-on: var(--color-sand-20-on);
+  --color-primary-30-on: var(--color-sand-30-on);
+  --color-primary-40-on: var(--color-sand-40-on);
+  --color-primary-50-on: var(--color-sand-50-on);
+}
+
+[data-color-scheme="wood"] {
+  --color-primary-10-on: var(--color-wood-10-on);
+  --color-primary-20-on: var(--color-wood-20-on);
+  --color-primary-30-on: var(--color-wood-30-on);
+  --color-primary-40-on: var(--color-wood-40-on);
+  --color-primary-50-on: var(--color-wood-50-on);
+}
+
+[data-color-scheme="clay"] {
+  --color-primary-10-on: var(--color-clay-10-on);
+  --color-primary-20-on: var(--color-clay-20-on);
+  --color-primary-30-on: var(--color-clay-30-on);
+  --color-primary-40-on: var(--color-clay-40-on);
+  --color-primary-50-on: var(--color-clay-50-on);
+}
+
+[data-color-scheme="flower"] {
+  --color-primary-10-on: var(--color-flower-10-on);
+  --color-primary-20-on: var(--color-flower-20-on);
+  --color-primary-30-on: var(--color-flower-30-on);
+  --color-primary-40-on: var(--color-flower-40-on);
+  --color-primary-50-on: var(--color-flower-50-on);
+}
+
+[data-color-scheme="dusk"] {
+  --color-primary-10-on: var(--color-dusk-10-on);
+  --color-primary-20-on: var(--color-dusk-20-on);
+  --color-primary-30-on: var(--color-dusk-30-on);
+  --color-primary-40-on: var(--color-dusk-40-on);
+  --color-primary-50-on: var(--color-dusk-50-on);
+}
+
+[data-color-scheme="sky"] {
+  --color-primary-10-on: var(--color-sky-10-on);
+  --color-primary-20-on: var(--color-sky-20-on);
+  --color-primary-30-on: var(--color-sky-30-on);
+  --color-primary-40-on: var(--color-sky-40-on);
+  --color-primary-50-on: var(--color-sky-50-on);
+}
+
+[data-color-scheme="sea"] {
+  --color-primary-10-on: var(--color-sea-10-on);
+  --color-primary-20-on: var(--color-sea-20-on);
+  --color-primary-30-on: var(--color-sea-30-on);
+  --color-primary-40-on: var(--color-sea-40-on);
+  --color-primary-50-on: var(--color-sea-50-on);
+}
+
+[data-color-scheme="lake"] {
+  --color-primary-10-on: var(--color-lake-10-on);
+  --color-primary-20-on: var(--color-lake-20-on);
+  --color-primary-30-on: var(--color-lake-30-on);
+  --color-primary-40-on: var(--color-lake-40-on);
+  --color-primary-50-on: var(--color-lake-50-on);
+}
+
+[data-color-scheme="neutral"] {
+  --color-primary-10-on: var(--color-neutral-10-on);
+  --color-primary-20-on: var(--color-neutral-20-on);
+  --color-primary-30-on: var(--color-neutral-30-on);
+  --color-primary-40-on: var(--color-neutral-50-on);
+  --color-primary-50-on: var(--color-neutral-80-on);
+}
+
+/* <<< end generated: label contrast tokens >>> */