@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/theme.css

@@ -0,0 +1,538 @@
+/* GENERATED FILE — DO NOT EDIT.
+ *
+ * Source: src/theme/levels.ts   (edit that, not this)
+ * Regenerate: pnpm tokens:build   ·   Verify: pnpm tokens:check
+ *
+ * Import order in a consumer's entrypoint:
+ *
+ *   @import "tailwindcss";
+ *   @import "@rtkelly-labs/design-system/theme.css";
+ *
+ * ============================================================================
+ * How the cascade works here, because it is not obvious
+ * ============================================================================
+ *
+ * Every level block below declares LITERAL colours. That matters: a custom
+ * property containing a var() reference is substituted where it is DECLARED,
+ * not where it is used, so a token defined once on :root as var(--something)
+ * inherits into descendants already resolved to the root theme's value — and a
+ * nested theme panel keeps the outer theme's colours. The previous hand-written
+ * token layer worked around that by re-declaring the indirected tokens on every
+ * mode class. With literals the problem does not arise at all, and nesting to
+ * any depth resolves by ordinary CSS inheritance.
+ *
+ * The Tailwind --color-* aliases DO indirect through --ds-*, so that a consumer
+ * can override a role and have the utilities follow. Those are therefore
+ * re-declared inside each level block, which is free in a generated file.
+ */
+
+/* Tailwind v4 skips node_modules during automatic content detection, so the
+ * utilities used inside the compiled components would never be generated in a
+ * consumer's build without this. */
+@source "./";
+
+/* ==========================================================================
+   Variants — one per level, plus the two polarity groups
+   ==========================================================================
+
+   Prefer a role token over a variant: a component written against
+   --ds-surface-raised needs no variant at all and picks up a fifth level for
+   free. Reach for these only for what tokens genuinely cannot express, such as
+   a different border weight on one level. */
+
+@custom-variant midnight (&:where([data-theme="midnight"], [data-theme="midnight"] *):not(:where([data-theme]:not([data-theme="midnight"]), [data-theme]:not([data-theme="midnight"]) *)));
+@custom-variant sketch (&:where([data-theme="sketch"], [data-theme="sketch"] *):not(:where([data-theme]:not([data-theme="sketch"]), [data-theme]:not([data-theme="sketch"]) *)));
+
+/* Polarity is a declared property of a level, so these are derived rather than
+ * being the axis the system hangs off. Use them for non-colour utilities that
+ * genuinely depend on light-vs-dark — a shadow spread, an image filter — never
+ * for colour, which the tokens already handle. */
+@custom-variant dark (&:where([data-theme="midnight"], [data-theme="midnight"] *):not(:where([data-theme]:not([data-theme="midnight"]), [data-theme]:not([data-theme="midnight"]) *)));
+@custom-variant light (&:where([data-theme="sketch"], [data-theme="sketch"] *):not(:where([data-theme]:not([data-theme="sketch"]), [data-theme]:not([data-theme="sketch"]) *)));
+
+/* `light:` is not declared here: a level named `light` already declares it
+ * above, and the two would be the same rule. `dark:` still spans polarity
+ * rather than naming a level, which is why it survives the collapse. */
+
+/* ==========================================================================
+   Utility surface
+   ==========================================================================
+
+   Declaring the token here is what makes Tailwind emit `bg-surface-raised`,
+   `text-accent-primary`, `border-edge-subtle` and friends. The values are
+   references; the literals live in the level blocks below. */
+
+@theme {
+  --color-surface-base: var(--ds-surface-base);
+  --color-surface-raised: var(--ds-surface-raised);
+  --color-surface-sunken: var(--ds-surface-sunken);
+  --color-surface-overlay: var(--ds-surface-overlay);
+  --color-content-primary: var(--ds-text-primary);
+  --color-content-secondary: var(--ds-text-secondary);
+  --color-content-muted: var(--ds-text-muted);
+  --color-content-inverse: var(--ds-text-inverse);
+  --color-edge-strong: var(--ds-border-strong);
+  --color-edge-default: var(--ds-border-default);
+  --color-edge-subtle: var(--ds-border-subtle);
+  --color-accent-primary: var(--ds-accent-primary);
+  --color-accent-secondary: var(--ds-accent-secondary);
+  --color-accent-tertiary: var(--ds-accent-tertiary);
+  --color-accent-quiet: var(--ds-accent-quiet);
+  --color-intent-info: var(--ds-intent-info);
+  --color-intent-success: var(--ds-intent-success);
+  --color-intent-warning: var(--ds-intent-warning);
+  --color-intent-danger: var(--ds-intent-danger);
+  --color-palette-red: var(--ds-palette-red);
+  --color-palette-orange: var(--ds-palette-orange);
+  --color-palette-yellow: var(--ds-palette-yellow);
+  --color-palette-green: var(--ds-palette-green);
+  --color-palette-teal: var(--ds-palette-teal);
+  --color-palette-cyan: var(--ds-palette-cyan);
+  --color-palette-blue: var(--ds-palette-blue);
+  --color-palette-violet: var(--ds-palette-violet);
+  --color-palette-magenta: var(--ds-palette-magenta);
+  --color-palette-pink: var(--ds-palette-pink);
+  --color-palette-bright-red: var(--ds-palette-bright-red);
+  --color-palette-bright-orange: var(--ds-palette-bright-orange);
+  --color-palette-bright-yellow: var(--ds-palette-bright-yellow);
+  --color-palette-bright-green: var(--ds-palette-bright-green);
+  --color-palette-bright-teal: var(--ds-palette-bright-teal);
+  --color-palette-bright-cyan: var(--ds-palette-bright-cyan);
+  --color-palette-bright-blue: var(--ds-palette-bright-blue);
+  --color-palette-bright-violet: var(--ds-palette-bright-violet);
+  --color-palette-bright-magenta: var(--ds-palette-bright-magenta);
+  --color-palette-bright-pink: var(--ds-palette-bright-pink);
+  --shadow-hard-sm: var(--ds-elev-sm) var(--ds-shadow-color);
+  --shadow-hard-md: var(--ds-elev-md) var(--ds-shadow-color);
+  --shadow-hard-lg: var(--ds-elev-lg) var(--ds-shadow-color);
+  --shadow-hard-accent-primary: 4px 4px 0px 0px var(--ds-accent-primary);
+  --shadow-hard-accent-secondary: 4px 4px 0px 0px var(--ds-accent-secondary);
+  --shadow-hard-accent-tertiary: 4px 4px 0px 0px var(--ds-accent-tertiary);
+  --shadow-hard-accent-quiet: 4px 4px 0px 0px var(--ds-accent-quiet);
+  --shadow-hard-intent-info: 4px 4px 0px 0px var(--ds-intent-info);
+  --shadow-hard-intent-success: 4px 4px 0px 0px var(--ds-intent-success);
+  --shadow-hard-intent-warning: 4px 4px 0px 0px var(--ds-intent-warning);
+  --shadow-hard-intent-danger: 4px 4px 0px 0px var(--ds-intent-danger);
+  --shadow-glow-accent-primary: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+  --shadow-glow-accent-secondary: 0 0 10px color-mix(in oklab, var(--ds-accent-secondary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-secondary) 30%, transparent);
+  --shadow-glow-accent-tertiary: 0 0 10px color-mix(in oklab, var(--ds-accent-tertiary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-tertiary) 30%, transparent);
+  --shadow-glow-accent-quiet: 0 0 10px color-mix(in oklab, var(--ds-accent-quiet) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-quiet) 30%, transparent);
+  --shadow-glow-intent-info: 0 0 10px color-mix(in oklab, var(--ds-intent-info) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-info) 30%, transparent);
+  --shadow-glow-intent-success: 0 0 10px color-mix(in oklab, var(--ds-intent-success) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-success) 30%, transparent);
+  --shadow-glow-intent-warning: 0 0 10px color-mix(in oklab, var(--ds-intent-warning) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-warning) 30%, transparent);
+  --shadow-glow-intent-danger: 0 0 10px color-mix(in oklab, var(--ds-intent-danger) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-danger) 30%, transparent);
+  --shadow-glow-accent: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+
+  --font-sans: var(--ds-font-body);
+  --font-display: var(--ds-font-display);
+  --font-mono: var(--ds-font-mono);
+  --font-pixel: var(--ds-font-pixel);
+}
+
+/* ==========================================================================
+   Fixed colours — level-independent, and that is the point
+   ==========================================================================
+
+   These three do not swap with the level. `--color-black` and
+   `--color-white` below DO — they are compat aliases tracking
+   `surface.base` and `text.primary`, which is why `--color-black`
+   resolves to #ffffff on the `white` level. Use these when true black or
+   true white is meant; use `surface.base` for a page ground. */
+
+:root {
+  --ds-fixed-black: #000000;
+  --ds-fixed-white: #ffffff;
+  --ds-fixed-transparent: transparent;
+}
+
+@theme {
+  --color-fixed-black: var(--ds-fixed-black);
+  --color-fixed-white: var(--ds-fixed-white);
+  --color-fixed-transparent: var(--ds-fixed-transparent);
+}
+
+/* ==========================================================================
+   The web Medium — geometry and time, level-independent
+   ==========================================================================
+
+   The second axis. A Level varies colour and is selected at runtime; a Medium
+   varies geometry and time and is selected at build time by which artifact is
+   being emitted. Neither varies on the other's axis, so none of this appears
+   inside a level block. See `docs/adr/0004-two-axes-level-and-medium.md`.
+
+   `video` and `graphic` are real Media with their own numbers — a 1080p
+   frame's type scale is not this one scaled — and they are emitted to their own
+   artifacts rather than to a selector here. */
+
+:root {
+  --ds-space-0: 0;
+  --ds-space-1: 0.25rem;
+  --ds-space-2: 0.5rem;
+  --ds-space-3: 0.75rem;
+  --ds-space-4: 1rem;
+  --ds-space-5: 1.5rem;
+  --ds-space-6: 2rem;
+  --ds-space-7: 3rem;
+  --ds-space-8: 4rem;
+  --ds-space-9: 6rem;
+  --ds-space-10: 8rem;
+  --ds-type-caption: 0.75rem;
+  --ds-leading-caption: 1.4;
+  --ds-type-body: 1rem;
+  --ds-leading-body: 1.6;
+  --ds-type-lead: 1.125rem;
+  --ds-leading-lead: 1.55;
+  --ds-type-title: 1.5rem;
+  --ds-leading-title: 1.2;
+  --ds-type-display: 2.25rem;
+  --ds-leading-display: 1.05;
+  --ds-type-hero: 3rem;
+  --ds-leading-hero: 0.95;
+  --ds-weight-regular: 400;
+  --ds-weight-bold: 700;
+  --ds-weight-black: 900;
+  --ds-stroke-hairline: 1px;
+  --ds-stroke-edge: 2px;
+  --ds-stroke-heavy: 4px;
+  --ds-elev-sm: 2px 2px 0px 0px;
+  --ds-elev-md: 4px 4px 0px 0px;
+  --ds-elev-lg: 6px 6px 0px 0px;
+  --ds-radius-none: 0px;
+  --ds-radius-soft: 0px;
+  --ds-duration-instant: 0ms;
+  --ds-duration-quick: 150ms;
+  --ds-duration-considered: 300ms;
+  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ds-layer-base: 0;
+  --ds-layer-raised: 10;
+  --ds-layer-overlay: 100;
+  --ds-layer-top: 1000;
+  --ds-focus-width: 2px;
+  --ds-focus-offset: 2px;
+}
+
+@theme {
+  --text-caption: var(--ds-type-caption);
+  --text-caption--line-height: var(--ds-leading-caption);
+  --text-body: var(--ds-type-body);
+  --text-body--line-height: var(--ds-leading-body);
+  --text-lead: var(--ds-type-lead);
+  --text-lead--line-height: var(--ds-leading-lead);
+  --text-title: var(--ds-type-title);
+  --text-title--line-height: var(--ds-leading-title);
+  --text-display: var(--ds-type-display);
+  --text-display--line-height: var(--ds-leading-display);
+  --text-hero: var(--ds-type-hero);
+  --text-hero--line-height: var(--ds-leading-hero);
+  --font-weight-regular: var(--ds-weight-regular);
+  --font-weight-bold: var(--ds-weight-bold);
+  --font-weight-black: var(--ds-weight-black);
+  --radius-none: var(--ds-radius-none);
+  --radius-soft: var(--ds-radius-soft);
+  --radius-xs: var(--ds-radius-none);
+  --radius-sm: var(--ds-radius-none);
+  --radius-md: var(--ds-radius-none);
+  --radius-lg: var(--ds-radius-none);
+  --radius-xl: var(--ds-radius-none);
+  --radius-2xl: var(--ds-radius-none);
+  --radius-3xl: var(--ds-radius-none);
+  --radius-4xl: var(--ds-radius-none);
+  --duration-instant: var(--ds-duration-instant);
+  --duration-quick: var(--ds-duration-quick);
+  --duration-considered: var(--ds-duration-considered);
+  --z-index-base: var(--ds-layer-base);
+  --z-index-raised: var(--ds-layer-raised);
+  --z-index-overlay: var(--ds-layer-overlay);
+  --z-index-top: var(--ds-layer-top);
+  --ease-brutalist: var(--ds-ease);
+}
+
+/* Looping animations — `animate-ds-spin`, `-spin-slow`, `-pulse`, `-track`.
+ * Declared in `src/theme/media.ts` (`LOOPS`); the period is a multiple of
+ * the Medium's `considered` duration and the keyframes are invariant.
+ * `prefers-reduced-motion` is answered at the call site with `motion-reduce:`. */
+@theme {
+  --animate-ds-spin: ds-spin calc(var(--ds-duration-considered) * 3) linear infinite;
+  --animate-ds-spin-slow: ds-spin calc(var(--ds-duration-considered) * 9) linear infinite;
+  --animate-ds-pulse: ds-pulse calc(var(--ds-duration-considered) * 4) var(--ds-ease) infinite;
+  --animate-ds-track: ds-track calc(var(--ds-duration-considered) * 5) var(--ds-ease) infinite;
+
+  @keyframes ds-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ds-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.45;
+    }
+  }
+
+  @keyframes ds-track {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
+    }
+  }
+}
+
+/* ==========================================================================
+   Typography roles — level-independent
+   ========================================================================== */
+
+:root {
+  /* Fallback chains matter as much as the first choice: when the web font has
+   * not loaded — a blocked CDN, a slow connection, the first paint — the next
+   * entry decides the metrics, and a different fallback reflows the page. These
+   * chains are the ones the global rules in styles.css have always used, so the
+   * tokens and the globals now agree instead of quietly disagreeing.
+   *
+   * Every stack ends its shipped part with the two symbol faces, before any
+   * system font: both are unicode-range bounded, so they draw only what the text
+   * face lacks, and a symbol never falls to whatever the machine has installed.
+   * check:fonts holds every rendered character to that. */
+  --ds-font-display: var(--font-space-grotesk, "Space Grotesk Variable", "Space Grotesk"), var(--font-inter, "Inter Variable", "Inter"), "Symbols Nerd Font Mono", "DS Symbols", sans-serif;
+  --ds-font-body: var(--font-inter, "Inter Variable", "Inter"), "Symbols Nerd Font Mono", "DS Symbols", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --ds-font-mono: var(--font-ibm-plex-mono, "IBM Plex Mono"), "Symbols Nerd Font Mono", "DS Symbols", "Courier New", monospace;
+  --ds-font-pixel: var(--font-vt323, "VT323"), "Symbols Nerd Font Mono", "DS Symbols", monospace;
+}
+
+/* ==========================================================================
+   The ladder
+   ========================================================================== */
+
+/* Midnight — Neon on blue-black. The maximal end of the ladder. */
+:root, [data-theme="midnight"] {
+  color-scheme: dark;
+  --ds-ink-weight: 400;
+
+  --ds-surface-base: #0a0a1a;
+  --ds-surface-raised: #14142a;
+  --ds-surface-sunken: #050510;
+  --ds-surface-overlay: rgba(5, 5, 16, 0.82);
+  --ds-text-primary: #ffffff;
+  --ds-text-secondary: #c3c3d4;
+  --ds-text-muted: #9d9db4;
+  --ds-text-inverse: #0a0a1a;
+  --ds-border-strong: #ffffff;
+  --ds-border-default: #9d9db4;
+  --ds-border-subtle: #33334d;
+  --ds-accent-primary: #22d3ee;
+  --ds-accent-secondary: #facc15;
+  --ds-accent-tertiary: #f955a4;
+  --ds-accent-quiet: #8b8ba3;
+  --ds-intent-info: #22d3ee;
+  --ds-intent-success: #39ff14;
+  --ds-intent-warning: #facc15;
+  --ds-intent-danger: #f955a4;
+  --ds-palette-red: #ff586e;
+  --ds-palette-orange: #ff8c00;
+  --ds-palette-yellow: #facc15;
+  --ds-palette-green: #39ff14;
+  --ds-palette-teal: #34d399;
+  --ds-palette-cyan: #22d3ee;
+  --ds-palette-blue: #38bdf8;
+  --ds-palette-violet: #c3afff;
+  --ds-palette-magenta: #ff1cff;
+  --ds-palette-pink: #f955a4;
+  --ds-palette-bright-red: #ff939b;
+  --ds-palette-bright-orange: #ffba85;
+  --ds-palette-bright-yellow: #ffeaab;
+  --ds-palette-bright-green: #c0ffb8;
+  --ds-palette-bright-teal: #00f7ae;
+  --ds-palette-bright-cyan: #88ebff;
+  --ds-palette-bright-blue: #8cd7ff;
+  --ds-palette-bright-violet: #ddd4ff;
+  --ds-palette-bright-magenta: #ff88fd;
+  --ds-palette-bright-pink: #ff8ebe;
+  --ds-shadow-color: #ffffff;
+  --ds-polarity: dark;
+
+  --color-surface-base: var(--ds-surface-base);
+  --color-surface-raised: var(--ds-surface-raised);
+  --color-surface-sunken: var(--ds-surface-sunken);
+  --color-surface-overlay: var(--ds-surface-overlay);
+  --color-content-primary: var(--ds-text-primary);
+  --color-content-secondary: var(--ds-text-secondary);
+  --color-content-muted: var(--ds-text-muted);
+  --color-content-inverse: var(--ds-text-inverse);
+  --color-edge-strong: var(--ds-border-strong);
+  --color-edge-default: var(--ds-border-default);
+  --color-edge-subtle: var(--ds-border-subtle);
+  --color-accent-primary: var(--ds-accent-primary);
+  --color-accent-secondary: var(--ds-accent-secondary);
+  --color-accent-tertiary: var(--ds-accent-tertiary);
+  --color-accent-quiet: var(--ds-accent-quiet);
+  --color-intent-info: var(--ds-intent-info);
+  --color-intent-success: var(--ds-intent-success);
+  --color-intent-warning: var(--ds-intent-warning);
+  --color-intent-danger: var(--ds-intent-danger);
+  --color-palette-red: var(--ds-palette-red);
+  --color-palette-orange: var(--ds-palette-orange);
+  --color-palette-yellow: var(--ds-palette-yellow);
+  --color-palette-green: var(--ds-palette-green);
+  --color-palette-teal: var(--ds-palette-teal);
+  --color-palette-cyan: var(--ds-palette-cyan);
+  --color-palette-blue: var(--ds-palette-blue);
+  --color-palette-violet: var(--ds-palette-violet);
+  --color-palette-magenta: var(--ds-palette-magenta);
+  --color-palette-pink: var(--ds-palette-pink);
+  --color-palette-bright-red: var(--ds-palette-bright-red);
+  --color-palette-bright-orange: var(--ds-palette-bright-orange);
+  --color-palette-bright-yellow: var(--ds-palette-bright-yellow);
+  --color-palette-bright-green: var(--ds-palette-bright-green);
+  --color-palette-bright-teal: var(--ds-palette-bright-teal);
+  --color-palette-bright-cyan: var(--ds-palette-bright-cyan);
+  --color-palette-bright-blue: var(--ds-palette-bright-blue);
+  --color-palette-bright-violet: var(--ds-palette-bright-violet);
+  --color-palette-bright-magenta: var(--ds-palette-bright-magenta);
+  --color-palette-bright-pink: var(--ds-palette-bright-pink);
+  --shadow-hard-sm: var(--ds-elev-sm) var(--ds-shadow-color);
+  --shadow-hard-md: var(--ds-elev-md) var(--ds-shadow-color);
+  --shadow-hard-lg: var(--ds-elev-lg) var(--ds-shadow-color);
+  --shadow-hard-accent-primary: 4px 4px 0px 0px var(--ds-accent-primary);
+  --shadow-hard-accent-secondary: 4px 4px 0px 0px var(--ds-accent-secondary);
+  --shadow-hard-accent-tertiary: 4px 4px 0px 0px var(--ds-accent-tertiary);
+  --shadow-hard-accent-quiet: 4px 4px 0px 0px var(--ds-accent-quiet);
+  --shadow-hard-intent-info: 4px 4px 0px 0px var(--ds-intent-info);
+  --shadow-hard-intent-success: 4px 4px 0px 0px var(--ds-intent-success);
+  --shadow-hard-intent-warning: 4px 4px 0px 0px var(--ds-intent-warning);
+  --shadow-hard-intent-danger: 4px 4px 0px 0px var(--ds-intent-danger);
+  --shadow-glow-accent-primary: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+  --shadow-glow-accent-secondary: 0 0 10px color-mix(in oklab, var(--ds-accent-secondary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-secondary) 30%, transparent);
+  --shadow-glow-accent-tertiary: 0 0 10px color-mix(in oklab, var(--ds-accent-tertiary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-tertiary) 30%, transparent);
+  --shadow-glow-accent-quiet: 0 0 10px color-mix(in oklab, var(--ds-accent-quiet) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-quiet) 30%, transparent);
+  --shadow-glow-intent-info: 0 0 10px color-mix(in oklab, var(--ds-intent-info) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-info) 30%, transparent);
+  --shadow-glow-intent-success: 0 0 10px color-mix(in oklab, var(--ds-intent-success) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-success) 30%, transparent);
+  --shadow-glow-intent-warning: 0 0 10px color-mix(in oklab, var(--ds-intent-warning) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-warning) 30%, transparent);
+  --shadow-glow-intent-danger: 0 0 10px color-mix(in oklab, var(--ds-intent-danger) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-danger) 30%, transparent);
+  --shadow-glow-accent: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+
+}
+
+/* Sketch — Warm paper and pen ink. The light half of the pair. */
+[data-theme="sketch"] {
+  color-scheme: light;
+  --ds-ink-weight: 450;
+
+  --ds-surface-base: #f5f3ec;
+  --ds-surface-raised: #ffffff;
+  --ds-surface-sunken: #efeadf;
+  --ds-surface-overlay: rgba(35, 38, 46, 0.72);
+  --ds-text-primary: #23262e;
+  --ds-text-secondary: #33373f;
+  --ds-text-muted: #5c5546;
+  --ds-text-inverse: #f5f3ec;
+  --ds-border-strong: #23262e;
+  --ds-border-default: #8f8672;
+  --ds-border-subtle: #c8c3b4;
+  --ds-accent-primary: #1450d7;
+  --ds-accent-secondary: #006b2e;
+  --ds-accent-tertiary: #bd0010;
+  --ds-accent-quiet: #6a6252;
+  --ds-intent-info: #1450d7;
+  --ds-intent-success: #006b2e;
+  --ds-intent-warning: #974503;
+  --ds-intent-danger: #bd0010;
+  --ds-palette-red: #bd0010;
+  --ds-palette-orange: #974503;
+  --ds-palette-yellow: #705a00;
+  --ds-palette-green: #006b2e;
+  --ds-palette-teal: #006859;
+  --ds-palette-cyan: #006675;
+  --ds-palette-blue: #1450d7;
+  --ds-palette-violet: #7d00f4;
+  --ds-palette-magenta: #a300ad;
+  --ds-palette-pink: #b4006c;
+  --ds-palette-bright-red: #8f002a;
+  --ds-palette-bright-orange: #6c3700;
+  --ds-palette-bright-yellow: #534200;
+  --ds-palette-bright-green: #024f00;
+  --ds-palette-bright-teal: #004d34;
+  --ds-palette-bright-cyan: #004b56;
+  --ds-palette-bright-blue: #004e6d;
+  --ds-palette-bright-violet: #6000bd;
+  --ds-palette-bright-magenta: #7f0080;
+  --ds-palette-bright-pink: #8a0052;
+  --ds-shadow-color: #23262e;
+  --ds-polarity: light;
+
+  --color-surface-base: var(--ds-surface-base);
+  --color-surface-raised: var(--ds-surface-raised);
+  --color-surface-sunken: var(--ds-surface-sunken);
+  --color-surface-overlay: var(--ds-surface-overlay);
+  --color-content-primary: var(--ds-text-primary);
+  --color-content-secondary: var(--ds-text-secondary);
+  --color-content-muted: var(--ds-text-muted);
+  --color-content-inverse: var(--ds-text-inverse);
+  --color-edge-strong: var(--ds-border-strong);
+  --color-edge-default: var(--ds-border-default);
+  --color-edge-subtle: var(--ds-border-subtle);
+  --color-accent-primary: var(--ds-accent-primary);
+  --color-accent-secondary: var(--ds-accent-secondary);
+  --color-accent-tertiary: var(--ds-accent-tertiary);
+  --color-accent-quiet: var(--ds-accent-quiet);
+  --color-intent-info: var(--ds-intent-info);
+  --color-intent-success: var(--ds-intent-success);
+  --color-intent-warning: var(--ds-intent-warning);
+  --color-intent-danger: var(--ds-intent-danger);
+  --color-palette-red: var(--ds-palette-red);
+  --color-palette-orange: var(--ds-palette-orange);
+  --color-palette-yellow: var(--ds-palette-yellow);
+  --color-palette-green: var(--ds-palette-green);
+  --color-palette-teal: var(--ds-palette-teal);
+  --color-palette-cyan: var(--ds-palette-cyan);
+  --color-palette-blue: var(--ds-palette-blue);
+  --color-palette-violet: var(--ds-palette-violet);
+  --color-palette-magenta: var(--ds-palette-magenta);
+  --color-palette-pink: var(--ds-palette-pink);
+  --color-palette-bright-red: var(--ds-palette-bright-red);
+  --color-palette-bright-orange: var(--ds-palette-bright-orange);
+  --color-palette-bright-yellow: var(--ds-palette-bright-yellow);
+  --color-palette-bright-green: var(--ds-palette-bright-green);
+  --color-palette-bright-teal: var(--ds-palette-bright-teal);
+  --color-palette-bright-cyan: var(--ds-palette-bright-cyan);
+  --color-palette-bright-blue: var(--ds-palette-bright-blue);
+  --color-palette-bright-violet: var(--ds-palette-bright-violet);
+  --color-palette-bright-magenta: var(--ds-palette-bright-magenta);
+  --color-palette-bright-pink: var(--ds-palette-bright-pink);
+  --shadow-hard-sm: var(--ds-elev-sm) var(--ds-shadow-color);
+  --shadow-hard-md: var(--ds-elev-md) var(--ds-shadow-color);
+  --shadow-hard-lg: var(--ds-elev-lg) var(--ds-shadow-color);
+  --shadow-hard-accent-primary: 4px 4px 0px 0px var(--ds-accent-primary);
+  --shadow-hard-accent-secondary: 4px 4px 0px 0px var(--ds-accent-secondary);
+  --shadow-hard-accent-tertiary: 4px 4px 0px 0px var(--ds-accent-tertiary);
+  --shadow-hard-accent-quiet: 4px 4px 0px 0px var(--ds-accent-quiet);
+  --shadow-hard-intent-info: 4px 4px 0px 0px var(--ds-intent-info);
+  --shadow-hard-intent-success: 4px 4px 0px 0px var(--ds-intent-success);
+  --shadow-hard-intent-warning: 4px 4px 0px 0px var(--ds-intent-warning);
+  --shadow-hard-intent-danger: 4px 4px 0px 0px var(--ds-intent-danger);
+  --shadow-glow-accent-primary: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+  --shadow-glow-accent-secondary: 0 0 10px color-mix(in oklab, var(--ds-accent-secondary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-secondary) 30%, transparent);
+  --shadow-glow-accent-tertiary: 0 0 10px color-mix(in oklab, var(--ds-accent-tertiary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-tertiary) 30%, transparent);
+  --shadow-glow-accent-quiet: 0 0 10px color-mix(in oklab, var(--ds-accent-quiet) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-quiet) 30%, transparent);
+  --shadow-glow-intent-info: 0 0 10px color-mix(in oklab, var(--ds-intent-info) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-info) 30%, transparent);
+  --shadow-glow-intent-success: 0 0 10px color-mix(in oklab, var(--ds-intent-success) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-success) 30%, transparent);
+  --shadow-glow-intent-warning: 0 0 10px color-mix(in oklab, var(--ds-intent-warning) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-warning) 30%, transparent);
+  --shadow-glow-intent-danger: 0 0 10px color-mix(in oklab, var(--ds-intent-danger) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-intent-danger) 30%, transparent);
+  --shadow-glow-accent: 0 0 10px color-mix(in oklab, var(--ds-accent-primary) 50%, transparent), 0 0 20px color-mix(in oklab, var(--ds-accent-primary) 30%, transparent);
+
+}
+
+/* Native form controls, scrollbars and the caret follow `color-scheme`, which
+ * each level declares above. Without it a light level renders dark scrollbars
+ * and an unreadable date picker while every styled element looks correct. */
+
+/* Running-text weight by polarity — INK_WEIGHT in src/theme/levels.ts. */
+@layer base {
+  :root, [data-theme] {
+    font-weight: var(--ds-ink-weight);
+  }
+}
+

package/dist/tokens.js

@@ -0,0 +1 @@
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}