@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/styles/spark-default.css

@@ -0,0 +1,883 @@
+/*
+ * Default Spark brand tokens.
+ *
+ * These match the portal runtime generator defaults (primary: #005EB4),
+ * but are shipped statically so the UI library has a sensible default.
+ *
+ * Consumers can override any `--spark-*` variables if they want runtime theming.
+ */
+
+@layer base {
+  :root,
+  .light,
+  .light-theme {
+    --spark-1: #fcfdfe;
+    --spark-2: #f6fafe;
+    --spark-3: #ebf3fd;
+    --spark-4: #dcebfe;
+    --spark-5: #cbe1fe;
+    --spark-6: #b6d5fc;
+    --spark-7: #9dc3f2;
+    --spark-8: #7aabe7;
+    --spark-9: #005eb4;
+    --spark-10: #004fa3;
+    --spark-11: #0f65bc;
+    --spark-12: #113157;
+
+    --spark-a1: #0055aa03;
+    --spark-a2: #0072e309;
+    --spark-a3: #0066e614;
+    --spark-a4: #006ef823;
+    --spark-a5: #006cfb34;
+    --spark-a6: #006df549;
+    --spark-a7: #0063de62;
+    --spark-a8: #005ed185;
+    --spark-a9: #005eb4;
+    --spark-a10: #004fa3;
+    --spark-a11: #005bb8f0;
+    --spark-a12: #00224bee;
+
+    --spark-contrast: #ffffff;
+    --spark-on-solid: #fff;
+    --spark-surface: #f4f9fecc;
+    --spark-background: #ffffff;
+    --spark-indicator: #005eb4;
+    --spark-track: #005eb4;
+
+    /* Companion tokens for the colour axis (Button color="neutral"|"danger").
+       These reference gamut-aware scales / flip per appearance, so one declaration
+       covers sRGB + p3 and light + dark. --neutral-contrast tracks the neutral knob;
+       --red-contrast is white (clears 3:1 on the appearance-stable red-9). */
+    --red-contrast: #fff;
+    --red-on-solid: #fff;
+    --red-surface: var(--red-2);
+    --neutral-contrast: var(--neutral-12);
+    --neutral-on-solid: #fff;
+    --neutral-surface: var(--neutral-2);
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root,
+      .light,
+      .light-theme {
+        --spark-1: oklch(99.4% 0.0013 254.2);
+        --spark-2: oklch(98.3% 0.0072 254.2);
+        --spark-3: oklch(96.1% 0.0155 254.2);
+        --spark-4: oklch(93.5% 0.0304 254.2);
+        --spark-5: oklch(90.3% 0.046 254.2);
+        --spark-6: oklch(86.3% 0.0643 254.2);
+        --spark-7: oklch(80.7% 0.0782 254.2);
+        --spark-8: oklch(73% 0.102 254.2);
+        --spark-9: oklch(48.6% 0.1556 254.2);
+        --spark-10: oklch(43.5% 0.1556 254.2);
+        --spark-11: oklch(51% 0.1556 254.2);
+        --spark-12: oklch(31.3% 0.077 254.2);
+
+        --spark-a1: color(display-p3 0.0235 0.349 0.6745 / 0.012);
+        --spark-a2: color(display-p3 0.0196 0.3882 0.8784 / 0.032);
+        --spark-a3: color(display-p3 0.0078 0.3725 0.8431 / 0.075);
+        --spark-a4: color(display-p3 0.0078 0.3804 0.9098 / 0.126);
+        --spark-a5: color(display-p3 0.0078 0.3569 0.9176 / 0.189);
+        --spark-a6: color(display-p3 0.0039 0.3608 0.898 / 0.263);
+        --spark-a7: color(display-p3 0.0039 0.3255 0.8118 / 0.353);
+        --spark-a8: color(display-p3 0.0039 0.3098 0.7647 / 0.483);
+        --spark-a9: color(display-p3 0 0.2471 0.6235 / 0.848);
+        --spark-a10: color(display-p3 0 0.2118 0.5608 / 0.879);
+        --spark-a11: color(display-p3 0 0.2549 0.651 / 0.82);
+        --spark-a12: color(display-p3 0 0.098 0.2549 / 0.899);
+
+        --spark-contrast: #ffffff;
+        --spark-on-solid: #fff;
+        --spark-surface: color(display-p3 0.9608 0.9765 0.9961 / 0.8);
+        --spark-background: #ffffff;
+        --spark-indicator: oklch(48.6% 0.1556 254.2);
+        --spark-track: oklch(48.6% 0.1556 254.2);
+      }
+    }
+  }
+
+  .dark,
+  .dark-theme {
+    --spark-1: #07121f;
+    --spark-2: #0b1929;
+    --spark-3: #002650;
+    --spark-4: #002f6f;
+    --spark-5: #003b83;
+    --spark-6: #004996;
+    --spark-7: #0058ae;
+    --spark-8: #0069cf;
+    --spark-9: #005eb4;
+    --spark-10: #00509d;
+    --spark-11: #71b8ff;
+    --spark-12: #c5e4ff;
+
+    --spark-a1: #0025ff0d;
+    --spark-a2: #0066fd18;
+    --spark-a3: #0062ff42;
+    --spark-a4: #005efd64;
+    --spark-a5: #0069fd7a;
+    --spark-a6: #0075ff8e;
+    --spark-a7: #007dffa8;
+    --spark-a8: #007ffecc;
+    --spark-a9: #0082ffae;
+    --spark-a10: #007cfe96;
+    --spark-a11: #71b8ff;
+    --spark-a12: #c5e4ff;
+
+    --spark-contrast: #fff;
+    --spark-on-solid: #fff;
+    --spark-surface: #06213f80;
+    --spark-background: #111113;
+    --spark-indicator: #005eb4;
+    --spark-track: #005eb4;
+
+    --red-contrast: #fff;
+    --red-on-solid: #fff;
+    --red-surface: var(--red-2);
+    --neutral-contrast: var(--neutral-12);
+    --neutral-on-solid: #fff;
+    --neutral-surface: var(--neutral-2);
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      .dark,
+      .dark-theme {
+        --spark-1: oklch(17.9% 0.0326 254.2);
+        --spark-2: oklch(20.9% 0.0382 254.2);
+        --spark-3: oklch(27.2% 0.0872 254.2);
+        --spark-4: oklch(31.7% 0.126 254.2);
+        --spark-5: oklch(36.4% 0.1378 254.2);
+        --spark-6: oklch(41.2% 0.144 254.2);
+        --spark-7: oklch(46.8% 0.1556 254.2);
+        --spark-8: oklch(53% 0.1789 254.2);
+        --spark-9: oklch(48.6% 0.1556 254.2);
+        --spark-10: oklch(43.5% 0.144 254.2);
+        --spark-11: oklch(77.1% 0.1674 254.2);
+        --spark-12: oklch(90.8% 0.0614 254.2);
+
+        --spark-a1: color(display-p3 0 0.1529 0.9961 / 0.047);
+        --spark-a2: color(display-p3 0 0.4196 1 / 0.089);
+        --spark-a3: color(display-p3 0 0.3882 1 / 0.246);
+        --spark-a4: color(display-p3 0.0588 0.3725 1 / 0.373);
+        --spark-a5: color(display-p3 0.1137 0.4235 1 / 0.454);
+        --spark-a6: color(display-p3 0.149 0.4706 1 / 0.534);
+        --spark-a7: color(display-p3 0.1882 0.502 1 / 0.632);
+        --spark-a8: color(display-p3 0.2039 0.5059 1 / 0.767);
+        --spark-a9: color(display-p3 0.1961 0.5137 0.9961 / 0.657);
+        --spark-a10: color(display-p3 0.1725 0.498 1 / 0.564);
+        --spark-a11: color(display-p3 0.5176 0.7333 1 / 0.975);
+        --spark-a12: color(display-p3 0.8039 0.902 1 / 0.988);
+
+        --spark-contrast: #fff;
+        --spark-on-solid: #fff;
+        --spark-surface: color(display-p3 0.0431 0.1176 0.2353 / 0.5);
+        --spark-background: #111113;
+        --spark-indicator: oklch(48.6% 0.1556 254.2);
+        --spark-track: oklch(48.6% 0.1556 254.2);
+      }
+    }
+  }
+
+  /*
+   * Default "shape" (border radius) tokens.
+   * Default radius preset = `medium` (factor 2) = today's portal look.
+   * The [data-radius] presets below scale the factor; `full` also enables the
+   * pill token (--spark-rounded-full) used by the max() idiom on Button etc.
+   */
+  /* factor + pill on :root only, so nested scopes inherit rather than reset. */
+  :root {
+    --spark-rounded-factor: 2;
+    --spark-rounded-full: 0px;
+  }
+
+  /* size calcs on .spark-theme too, so a scope re-resolves them from its factor. */
+  :root,
+  .spark-theme {
+    --spark-rounded-sm: calc(3px * var(--spark-rounded-factor));
+    --spark-rounded-md: calc(4px * var(--spark-rounded-factor));
+    --spark-rounded-lg: calc(6px * var(--spark-rounded-factor));
+    --spark-rounded-xl: calc(8px * var(--spark-rounded-factor));
+    --spark-rounded-2xl: calc(12px * var(--spark-rounded-factor));
+    --spark-rounded-3xl: calc(16px * var(--spark-rounded-factor));
+  }
+
+  /*
+   * Roundness presets. Sets the factor on the scoped element; descendants
+   * inherit, so it cascades and is overridable at any level (global → block →
+   * element). No attribute = medium (the :root default above).
+   */
+  [data-radius='none'] {
+    --spark-rounded-factor: 0;
+  }
+
+  [data-radius='small'] {
+    --spark-rounded-factor: 1;
+  }
+
+  [data-radius='medium'] {
+    --spark-rounded-factor: 2;
+  }
+
+  [data-radius='large'] {
+    --spark-rounded-factor: 3;
+  }
+
+  /* non-full presets clear the pill, so a nested override drops an inherited full. */
+  [data-radius='none'],
+  [data-radius='small'],
+  [data-radius='medium'],
+  [data-radius='large'] {
+    --spark-rounded-full: 0px;
+  }
+
+  /* `full` does two complementary things (both intentional, not a temp hack): */
+  [data-radius='full'] {
+    --spark-rounded-factor: 3; /* large radii for normally-rounded elements */
+    --spark-rounded-full: 9999px; /* + pill token: pill-able components (Button via max()) become pills */
+  }
+
+  /*
+   * Neutral scale indirection. The semantic gray tokens in theme.css read
+   * --neutral-* instead of a hardwired scale, so [data-neutral-color] can swap the
+   * neutral. Default = slate; cascades & overrides like the radius presets.
+   */
+  /* also under .dark so neutrals re-resolve in dark mode with no [data-neutral-color] set. */
+  :root,
+  .dark,
+  .dark-theme {
+    --neutral-1: var(--slate-1);
+    --neutral-2: var(--slate-2);
+    --neutral-3: var(--slate-3);
+    --neutral-4: var(--slate-4);
+    --neutral-5: var(--slate-5);
+    --neutral-6: var(--slate-6);
+    --neutral-7: var(--slate-7);
+    --neutral-8: var(--slate-8);
+    --neutral-9: var(--slate-9);
+    --neutral-10: var(--slate-10);
+    --neutral-11: var(--slate-11);
+    --neutral-12: var(--slate-12);
+    --neutral-a1: var(--slate-a1);
+    --neutral-a2: var(--slate-a2);
+    --neutral-a3: var(--slate-a3);
+    --neutral-a4: var(--slate-a4);
+    --neutral-a5: var(--slate-a5);
+    --neutral-a6: var(--slate-a6);
+    --neutral-a7: var(--slate-a7);
+    --neutral-a8: var(--slate-a8);
+    --neutral-a9: var(--slate-a9);
+    --neutral-a10: var(--slate-a10);
+    --neutral-a11: var(--slate-a11);
+    --neutral-a12: var(--slate-a12);
+  }
+
+  [data-neutral-color='slate'] {
+    --neutral-1: var(--slate-1);
+    --neutral-2: var(--slate-2);
+    --neutral-3: var(--slate-3);
+    --neutral-4: var(--slate-4);
+    --neutral-5: var(--slate-5);
+    --neutral-6: var(--slate-6);
+    --neutral-7: var(--slate-7);
+    --neutral-8: var(--slate-8);
+    --neutral-9: var(--slate-9);
+    --neutral-10: var(--slate-10);
+    --neutral-11: var(--slate-11);
+    --neutral-12: var(--slate-12);
+    --neutral-a1: var(--slate-a1);
+    --neutral-a2: var(--slate-a2);
+    --neutral-a3: var(--slate-a3);
+    --neutral-a4: var(--slate-a4);
+    --neutral-a5: var(--slate-a5);
+    --neutral-a6: var(--slate-a6);
+    --neutral-a7: var(--slate-a7);
+    --neutral-a8: var(--slate-a8);
+    --neutral-a9: var(--slate-a9);
+    --neutral-a10: var(--slate-a10);
+    --neutral-a11: var(--slate-a11);
+    --neutral-a12: var(--slate-a12);
+  }
+
+  [data-neutral-color='mauve'] {
+    --neutral-1: var(--mauve-1);
+    --neutral-2: var(--mauve-2);
+    --neutral-3: var(--mauve-3);
+    --neutral-4: var(--mauve-4);
+    --neutral-5: var(--mauve-5);
+    --neutral-6: var(--mauve-6);
+    --neutral-7: var(--mauve-7);
+    --neutral-8: var(--mauve-8);
+    --neutral-9: var(--mauve-9);
+    --neutral-10: var(--mauve-10);
+    --neutral-11: var(--mauve-11);
+    --neutral-12: var(--mauve-12);
+    --neutral-a1: var(--mauve-a1);
+    --neutral-a2: var(--mauve-a2);
+    --neutral-a3: var(--mauve-a3);
+    --neutral-a4: var(--mauve-a4);
+    --neutral-a5: var(--mauve-a5);
+    --neutral-a6: var(--mauve-a6);
+    --neutral-a7: var(--mauve-a7);
+    --neutral-a8: var(--mauve-a8);
+    --neutral-a9: var(--mauve-a9);
+    --neutral-a10: var(--mauve-a10);
+    --neutral-a11: var(--mauve-a11);
+    --neutral-a12: var(--mauve-a12);
+  }
+
+  [data-neutral-color='gray'] {
+    --neutral-1: var(--gray-1);
+    --neutral-2: var(--gray-2);
+    --neutral-3: var(--gray-3);
+    --neutral-4: var(--gray-4);
+    --neutral-5: var(--gray-5);
+    --neutral-6: var(--gray-6);
+    --neutral-7: var(--gray-7);
+    --neutral-8: var(--gray-8);
+    --neutral-9: var(--gray-9);
+    --neutral-10: var(--gray-10);
+    --neutral-11: var(--gray-11);
+    --neutral-12: var(--gray-12);
+    --neutral-a1: var(--gray-a1);
+    --neutral-a2: var(--gray-a2);
+    --neutral-a3: var(--gray-a3);
+    --neutral-a4: var(--gray-a4);
+    --neutral-a5: var(--gray-a5);
+    --neutral-a6: var(--gray-a6);
+    --neutral-a7: var(--gray-a7);
+    --neutral-a8: var(--gray-a8);
+    --neutral-a9: var(--gray-a9);
+    --neutral-a10: var(--gray-a10);
+    --neutral-a11: var(--gray-a11);
+    --neutral-a12: var(--gray-a12);
+  }
+
+  [data-neutral-color='sage'] {
+    --neutral-1: var(--sage-1);
+    --neutral-2: var(--sage-2);
+    --neutral-3: var(--sage-3);
+    --neutral-4: var(--sage-4);
+    --neutral-5: var(--sage-5);
+    --neutral-6: var(--sage-6);
+    --neutral-7: var(--sage-7);
+    --neutral-8: var(--sage-8);
+    --neutral-9: var(--sage-9);
+    --neutral-10: var(--sage-10);
+    --neutral-11: var(--sage-11);
+    --neutral-12: var(--sage-12);
+    --neutral-a1: var(--sage-a1);
+    --neutral-a2: var(--sage-a2);
+    --neutral-a3: var(--sage-a3);
+    --neutral-a4: var(--sage-a4);
+    --neutral-a5: var(--sage-a5);
+    --neutral-a6: var(--sage-a6);
+    --neutral-a7: var(--sage-a7);
+    --neutral-a8: var(--sage-a8);
+    --neutral-a9: var(--sage-a9);
+    --neutral-a10: var(--sage-a10);
+    --neutral-a11: var(--sage-a11);
+    --neutral-a12: var(--sage-a12);
+  }
+
+  [data-neutral-color='olive'] {
+    --neutral-1: var(--olive-1);
+    --neutral-2: var(--olive-2);
+    --neutral-3: var(--olive-3);
+    --neutral-4: var(--olive-4);
+    --neutral-5: var(--olive-5);
+    --neutral-6: var(--olive-6);
+    --neutral-7: var(--olive-7);
+    --neutral-8: var(--olive-8);
+    --neutral-9: var(--olive-9);
+    --neutral-10: var(--olive-10);
+    --neutral-11: var(--olive-11);
+    --neutral-12: var(--olive-12);
+    --neutral-a1: var(--olive-a1);
+    --neutral-a2: var(--olive-a2);
+    --neutral-a3: var(--olive-a3);
+    --neutral-a4: var(--olive-a4);
+    --neutral-a5: var(--olive-a5);
+    --neutral-a6: var(--olive-a6);
+    --neutral-a7: var(--olive-a7);
+    --neutral-a8: var(--olive-a8);
+    --neutral-a9: var(--olive-a9);
+    --neutral-a10: var(--olive-a10);
+    --neutral-a11: var(--olive-a11);
+    --neutral-a12: var(--olive-a12);
+  }
+
+  [data-neutral-color='sand'] {
+    --neutral-1: var(--sand-1);
+    --neutral-2: var(--sand-2);
+    --neutral-3: var(--sand-3);
+    --neutral-4: var(--sand-4);
+    --neutral-5: var(--sand-5);
+    --neutral-6: var(--sand-6);
+    --neutral-7: var(--sand-7);
+    --neutral-8: var(--sand-8);
+    --neutral-9: var(--sand-9);
+    --neutral-10: var(--sand-10);
+    --neutral-11: var(--sand-11);
+    --neutral-12: var(--sand-12);
+    --neutral-a1: var(--sand-a1);
+    --neutral-a2: var(--sand-a2);
+    --neutral-a3: var(--sand-a3);
+    --neutral-a4: var(--sand-a4);
+    --neutral-a5: var(--sand-a5);
+    --neutral-a6: var(--sand-a6);
+    --neutral-a7: var(--sand-a7);
+    --neutral-a8: var(--sand-a8);
+    --neutral-a9: var(--sand-a9);
+    --neutral-a10: var(--sand-a10);
+    --neutral-a11: var(--sand-a11);
+    --neutral-a12: var(--sand-a12);
+  }
+
+  /*
+   * Spacing density presets. Swaps the Tailwind --spacing base for the scoped
+   * subtree (cascades like the others). No attribute = default (0.25rem).
+   */
+  [data-spacing='dense'] {
+    --spark-spacing: 0.2rem;
+  }
+
+  [data-spacing='default'] {
+    --spark-spacing: 0.25rem;
+  }
+
+  [data-spacing='roomy'] {
+    --spark-spacing: 0.3rem;
+  }
+
+  /*
+   * Scaling presets (global zoom). Composes with spacing (--spacing =
+   * --spark-spacing * --spark-scaling) and scales --text-*. No attribute = 100%.
+   */
+  [data-scaling='90%'] {
+    --spark-scaling: 0.9;
+  }
+
+  [data-scaling='95%'] {
+    --spark-scaling: 0.95;
+  }
+
+  [data-scaling='100%'] {
+    --spark-scaling: 1;
+  }
+
+  [data-scaling='105%'] {
+    --spark-scaling: 1.05;
+  }
+
+  [data-scaling='110%'] {
+    --spark-scaling: 1.1;
+  }
+
+  /* Only declared under [data-style]; no preset → Button falls back to the raw accent.
+     The zero-specificity `:where(… .spark-theme)` twin re-declares the tokens inside
+     nested themes: var() resolves on the declaring element, so without it a nested
+     <Theme accentColor> would inherit the ancestor's already-resolved fg/bg (wrong
+     accent, wrong contrast). A nested theme's own [data-style] still wins on specificity. */
+  [data-style='solid'],
+  :where([data-style='solid'] .spark-theme) {
+    --spark-style-bg: var(--spark-9);
+    --spark-style-bg-hover: var(--spark-10);
+    /* fg intentionally unset: a solid foreground means different things per role, so
+       each component falls back to the right contrast — Button *text* → --spark-contrast
+       (AA-enforced 4.5:1), Checkbox *check glyph* → --spark-on-solid (native ~3:1, white
+       on any accent). Baking one here would give one of them the wrong contrast. */
+    --spark-style-border: transparent;
+  }
+
+  [data-style='soft'],
+  :where([data-style='soft'] .spark-theme) {
+    --spark-style-bg: var(--spark-a3);
+    --spark-style-bg-hover: var(--spark-a4);
+    --spark-style-fg: var(--spark-a11);
+    --spark-style-border: transparent;
+    /* soft is borderless in both states (idle-border drops the unchecked affordance border) */
+    --spark-style-idle-border: transparent;
+  }
+
+  [data-style='surface'],
+  :where([data-style='surface'] .spark-theme) {
+    --spark-style-bg: var(--spark-surface);
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a11);
+    --spark-style-border: var(--spark-a6);
+    /* surface = a thin (1px), recessed edge: neutral chrome at rest, accent when
+       active — mirrors the switch surface (idle ring neutral, on ring accent). */
+    --spark-style-border-width: 1px;
+    --spark-style-idle-border: var(--color-gray-a7);
+  }
+
+  [data-style='ghost'],
+  :where([data-style='ghost'] .spark-theme) {
+    --spark-style-bg: transparent;
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a11);
+    --spark-style-border: transparent;
+  }
+
+  /* outline: no fill, accent border + accent fg (the unfilled control look). */
+  [data-style='outline'],
+  :where([data-style='outline'] .spark-theme) {
+    --spark-style-bg: transparent;
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a11);
+    --spark-style-border: var(--spark-a8);
+  }
+
+  /*
+   * Colour axis — re-point the accent scale so the shared [data-style] recipes paint
+   * with neutral (gray) or danger (red) instead of accent. Set on the element via
+   * data-accent-color (Button `color="neutral"|"danger"`). var() resolves on the
+   * declaring element, so re-pointing --spark-* here re-colours the recipe that reads
+   * them; the :where(… .spark-theme) twin re-resolves inside nested themes. Additive
+   * (new selectors, no existing token/value change) → parity holds.
+   */
+  [data-accent-color='gray'],
+  :where([data-accent-color='gray'] .spark-theme) {
+    --spark-1: var(--neutral-1);
+    --spark-2: var(--neutral-2);
+    --spark-3: var(--neutral-3);
+    --spark-4: var(--neutral-4);
+    --spark-5: var(--neutral-5);
+    --spark-6: var(--neutral-6);
+    --spark-7: var(--neutral-7);
+    --spark-8: var(--neutral-8);
+    --spark-9: var(--neutral-9);
+    --spark-10: var(--neutral-10);
+    --spark-11: var(--neutral-11);
+    --spark-12: var(--neutral-12);
+    --spark-a1: var(--neutral-a1);
+    --spark-a2: var(--neutral-a2);
+    --spark-a3: var(--neutral-a3);
+    --spark-a4: var(--neutral-a4);
+    --spark-a5: var(--neutral-a5);
+    --spark-a6: var(--neutral-a6);
+    --spark-a7: var(--neutral-a7);
+    --spark-a8: var(--neutral-a8);
+    --spark-a9: var(--neutral-a9);
+    --spark-a10: var(--neutral-a10);
+    --spark-a11: var(--neutral-a11);
+    --spark-a12: var(--neutral-a12);
+    --spark-contrast: var(--neutral-contrast);
+    --spark-on-solid: var(--neutral-on-solid);
+    --spark-surface: var(--neutral-surface);
+    --spark-indicator: var(--neutral-9);
+    --spark-track: var(--neutral-9);
+  }
+
+  [data-accent-color='red'],
+  :where([data-accent-color='red'] .spark-theme) {
+    --spark-1: var(--red-1);
+    --spark-2: var(--red-2);
+    --spark-3: var(--red-3);
+    --spark-4: var(--red-4);
+    --spark-5: var(--red-5);
+    --spark-6: var(--red-6);
+    --spark-7: var(--red-7);
+    --spark-8: var(--red-8);
+    --spark-9: var(--red-9);
+    --spark-10: var(--red-10);
+    --spark-11: var(--red-11);
+    --spark-12: var(--red-12);
+    --spark-a1: var(--red-a1);
+    --spark-a2: var(--red-a2);
+    --spark-a3: var(--red-a3);
+    --spark-a4: var(--red-a4);
+    --spark-a5: var(--red-a5);
+    --spark-a6: var(--red-a6);
+    --spark-a7: var(--red-a7);
+    --spark-a8: var(--red-a8);
+    --spark-a9: var(--red-a9);
+    --spark-a10: var(--red-a10);
+    --spark-a11: var(--red-a11);
+    --spark-a12: var(--red-a12);
+    --spark-contrast: var(--red-contrast);
+    --spark-on-solid: var(--red-on-solid);
+    --spark-surface: var(--red-surface);
+    --spark-indicator: var(--red-9);
+    --spark-track: var(--red-9);
+  }
+
+  /*
+   * Card container chrome — a CONTAINER-only knob (contract §11). Everything here
+   * writes only --spark-card-* / --spark-card-c-*, tokens read EXCLUSIVELY by <Card>;
+   * it never touches data-style, --spark-style-*, or the --spark-* scale, so styling
+   * OR colouring a card never cascades into the Buttons/Checkboxes inside it.
+   *
+   * [data-card-variant] = the app-level default look (from <Theme cardVariant>); a
+   * per-card `variant` prop overrides it via the cva recipe. [data-card-color='accent']
+   * re-points the 5-slot card mini-scale so the chrome tints with the accent while the
+   * card's content controls keep their own colour. Neutral fallbacks are baked into the
+   * cva classes + the presets below, so a default card tracks the app neutral knob.
+   * The :where(… .spark-theme) / (… [data-card-color]) twins re-resolve var() inside
+   * nested themes / recoloured cards (same reason as the [data-style] twins above).
+   * Every preset re-declares the FULL token set (equal-specificity sibling leak guard,
+   * like the [data-high-contrast] block). Additive → parity holds.
+   */
+  [data-card-color='accent'],
+  :where([data-card-color='accent'] .spark-theme) {
+    --spark-card-c-soft: var(--spark-a3);
+    --spark-card-c-surface: var(--spark-surface);
+    --spark-card-c-border: var(--spark-a6);
+    --spark-card-c-solid: var(--spark-9);
+    --spark-card-c-contrast: var(--spark-contrast);
+  }
+
+  [data-card-variant='soft'],
+  :where([data-card-variant='soft'] .spark-theme),
+  :where([data-card-variant='soft'] [data-card-color]) {
+    --spark-card-px: 1rem;
+    --spark-card-bg: var(--spark-card-c-soft, var(--neutral-a3));
+    --spark-card-border: transparent;
+    --spark-card-border-width: 0px;
+    --spark-card-fg: var(--neutral-a12);
+    --spark-card-fg-muted: var(--neutral-a11);
+    --spark-card-icon: var(--spark-a11);
+  }
+
+  [data-card-variant='surface'],
+  :where([data-card-variant='surface'] .spark-theme),
+  :where([data-card-variant='surface'] [data-card-color]) {
+    --spark-card-px: 1rem;
+    --spark-card-bg: var(--spark-card-c-surface, var(--neutral-2));
+    --spark-card-border: var(--spark-card-c-border, var(--neutral-a6));
+    --spark-card-border-width: 1px;
+    --spark-card-fg: var(--neutral-a12);
+    --spark-card-fg-muted: var(--neutral-a11);
+    --spark-card-icon: var(--spark-a11);
+  }
+
+  [data-card-variant='outline'],
+  :where([data-card-variant='outline'] .spark-theme),
+  :where([data-card-variant='outline'] [data-card-color]) {
+    --spark-card-px: 1rem;
+    --spark-card-bg: transparent;
+    --spark-card-border: var(--spark-card-c-border, var(--neutral-a6));
+    --spark-card-border-width: 1px;
+    --spark-card-fg: var(--neutral-a12);
+    --spark-card-fg-muted: var(--neutral-a11);
+    --spark-card-icon: var(--spark-a11);
+  }
+
+  [data-card-variant='ghost'],
+  :where([data-card-variant='ghost'] .spark-theme),
+  :where([data-card-variant='ghost'] [data-card-color]) {
+    /* flush horizontally (no chrome to inset against); vertical rhythm kept by py-3 */
+    --spark-card-px: 0px;
+    --spark-card-bg: transparent;
+    --spark-card-border: transparent;
+    --spark-card-border-width: 0px;
+    --spark-card-fg: var(--neutral-a12);
+    --spark-card-fg-muted: var(--neutral-a11);
+    --spark-card-icon: var(--spark-a11);
+  }
+
+  /* HIDDEN for now: `SparkCardVariant` omits `solid` (content-contrast story TBD),
+     so the typed API never emits data-card-variant='solid'. Kept dormant + ready. */
+  [data-card-variant='solid'],
+  :where([data-card-variant='solid'] .spark-theme),
+  :where([data-card-variant='solid'] [data-card-color]) {
+    /* dark fill → light contrast ink on all slots (accent contrast is AA-enforced) */
+    --spark-card-px: 1rem;
+    --spark-card-bg: var(--spark-card-c-solid, var(--neutral-9));
+    --spark-card-border: transparent;
+    --spark-card-border-width: 0px;
+    --spark-card-fg: var(--spark-card-c-contrast, var(--neutral-contrast));
+    --spark-card-fg-muted: var(
+      --spark-card-c-contrast,
+      var(--neutral-contrast)
+    );
+    --spark-card-icon: var(--spark-card-c-contrast, var(--neutral-contrast));
+  }
+
+  /*
+   * High-contrast — an ORTHOGONAL modifier layered on any [data-style]. Per the
+   * Spark Foundation reference (default vs high-contrast overview, Figma
+   * 1061-3166): a non-solid style keeps its EXACT default fill — HC only darkens
+   * the ink (fg a11→a12) and strengthens the visible border (→a11). `solid` is
+   * the sole style whose fill changes: it darkens 9→12 (fg stays step-1). Bare
+   * [data-high-contrast] = the solid case; each per-style rule must re-declare its
+   * default fill because the bare rule has equal specificity and later source
+   * order, so it would otherwise leak its step-12 fill onto the other styles.
+   * Mirrors the [data-style] `:where(… .spark-theme)` twin for nested themes.
+   */
+  [data-high-contrast],
+  [data-high-contrast] [data-style='solid'],
+  :where([data-high-contrast] .spark-theme) {
+    /* solid HC: step-12 fill + step-1 fg sit at opposite ends of the scale in
+       BOTH appearances, so the fg maximally contrasts the fill either way (a
+       fixed white fg would fail in dark mode where step-12 is near-white). */
+    --spark-style-bg: var(--spark-12);
+    --spark-style-bg-hover: var(--spark-11);
+    --spark-style-fg: var(--spark-1);
+    --spark-style-border: transparent;
+  }
+
+  [data-high-contrast][data-style='soft'],
+  [data-high-contrast] [data-style='soft'],
+  :where([data-high-contrast][data-style='soft'] .spark-theme) {
+    /* same faint fill as default soft; only the ink darkens (a11→a12) */
+    --spark-style-bg: var(--spark-a3);
+    --spark-style-bg-hover: var(--spark-a4);
+    --spark-style-fg: var(--spark-a12);
+    --spark-style-border: transparent;
+    --spark-style-idle-border: transparent;
+  }
+
+  [data-high-contrast][data-style='surface'],
+  [data-high-contrast] [data-style='surface'],
+  :where([data-high-contrast][data-style='surface'] .spark-theme) {
+    /* same surface fill as default; ink darkens + border strengthens a6→a11 */
+    --spark-style-bg: var(--spark-surface);
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a12);
+    --spark-style-border: var(--spark-a11);
+  }
+
+  [data-high-contrast][data-style='ghost'],
+  [data-high-contrast] [data-style='ghost'],
+  :where([data-high-contrast][data-style='ghost'] .spark-theme) {
+    --spark-style-bg: transparent;
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a12);
+    --spark-style-border: transparent;
+  }
+
+  [data-high-contrast][data-style='outline'],
+  [data-high-contrast] [data-style='outline'],
+  :where([data-high-contrast][data-style='outline'] .spark-theme) {
+    /* transparent fill unchanged; ink darkens + border strengthens a8→a11 */
+    --spark-style-bg: transparent;
+    --spark-style-bg-hover: var(--spark-a3);
+    --spark-style-fg: var(--spark-a12);
+    --spark-style-border: var(--spark-a11);
+  }
+
+  /*
+   * Switch ON-track intensity (Radix-aligned). Unlike a checkbox (fill varies
+   * per style), a switch's "on" needs a visibly filled track — so it reads
+   * --spark-switch-track, a STRONG accent by default (fallback --spark-9 covers
+   * solid/surface/outline); only `soft` lightens it. `surface` still adds its
+   * border via --spark-style-border. Matches Radix (classic/surface = strong
+   * accent, soft = lighter).
+   */
+  [data-style='soft'],
+  :where([data-style='soft'] .spark-theme) {
+    --spark-switch-track: var(--spark-a5);
+  }
+
+  /* surface's hallmark is a bordered ("recessed") track — a neutral ring, most
+     visible in the OFF state (Radix "surface"). switch-local so it never touches
+     the checkbox's accent idle-border. The ON border stays --spark-style-border. */
+  [data-style='surface'],
+  :where([data-style='surface'] .spark-theme) {
+    --spark-switch-idle-border: var(--color-gray-a7);
+  }
+
+  /* HC = the checkbox HC-solid model applied to the whole switch: the on-track
+     deepens to step-12 and the thumb flips to step-1 (opposite ends of the scale,
+     so they maximally contrast in BOTH appearances — light: near-white thumb on a
+     dark track; dark: near-dark thumb on a bright track). A fixed white thumb can't
+     do this (it vanishes on the near-white step-12 track in dark), and step-10 was
+     nearly indistinguishable from the default step-9. Uniform across styles so HC
+     is an unmistakable, legible override. */
+  [data-high-contrast],
+  :where([data-high-contrast] .spark-theme) {
+    --spark-switch-track: var(--spark-12);
+    --spark-switch-thumb: var(--spark-1);
+  }
+
+  /*
+   * Radio — a ring + dot (always round), so it can't reuse the checkbox's fill
+   * tokens: `solid` needs a VISIBLE accent ring (the checkbox's solid border is
+   * transparent), and the dot sits on the unfilled box so it must stay a
+   * background-legible accent. Both read radio-specific tokens; the default (solid)
+   * falls back to --spark-9 (ring 9, dot 9). soft drops the ring and softens the dot
+   * to a11; surface keeps the accent ring but softens the dot. HC deepens to step-12
+   * / a12 (the ring/dot darken together, mirroring the checkbox HC model in §11).
+   */
+  [data-style='soft'],
+  :where([data-style='soft'] .spark-theme) {
+    --spark-radio-ring: transparent;
+    --spark-radio-dot: var(--spark-a11);
+  }
+
+  [data-style='surface'],
+  :where([data-style='surface'] .spark-theme) {
+    --spark-radio-dot: var(--spark-a11);
+  }
+
+  [data-high-contrast],
+  :where([data-high-contrast] .spark-theme) {
+    --spark-radio-ring: var(--spark-12);
+    --spark-radio-dot: var(--spark-12);
+  }
+
+  [data-high-contrast][data-style='soft'],
+  :where([data-high-contrast][data-style='soft'] .spark-theme) {
+    --spark-radio-ring: transparent;
+    --spark-radio-dot: var(--spark-a12);
+  }
+
+  [data-high-contrast][data-style='surface'],
+  :where([data-high-contrast][data-style='surface'] .spark-theme) {
+    --spark-radio-dot: var(--spark-a12);
+  }
+
+  /*
+   * Tabs — NOT data-style-driven: a tab strip has no solid/soft/surface axis, so it
+   * themes via accent + neutral + radius + scaling + high-contrast only. Two component
+   * tokens, both accent-by-default via component fallbacks: the active/hover ink
+   * (fallback --spark-a11) and the underline indicator (fallback --spark-indicator,
+   * i.e. step 9). HC deepens both — ink a11→a12, indicator 9→12 — mirroring the §11
+   * model (ink darkens, the accent-filled element deepens to 12).
+   */
+  [data-high-contrast],
+  :where([data-high-contrast] .spark-theme) {
+    --spark-tabs-ink: var(--spark-a12);
+    --spark-tabs-indicator: var(--spark-12);
+  }
+
+  /*
+   * Slider — like Tabs, NOT data-style-driven: a track/thumb has no solid/soft/surface
+   * axis (a `soft` a3 fill would make the filled range invisible), so it themes via
+   * accent + neutral + radius + scaling + high-contrast only. --spark-slider-range is
+   * the accent that fills the range AND paints the thumb (fallback --spark-9); the rail
+   * (unfilled remainder) stays a neutral gray. --spark-slider-tick-on is the step-dot
+   * colour ON the accent fill (fallback --spark-on-solid, ~white). HC deepens the accent
+   * 9→12 (§11); because the HC fill is step-12 (near-white in dark), the on-fill dot
+   * flips to step-1 — the same opposite-scale-ends contrast trick as the switch thumb,
+   * so it stays legible in both appearances.
+   */
+  [data-high-contrast],
+  :where([data-high-contrast] .spark-theme) {
+    --spark-slider-range: var(--spark-12);
+    --spark-slider-tick-on: var(--spark-1);
+  }
+
+  /*
+   * Badge — a non-interactive chip. Unlike Button/Checkbox (bare = solid accent), an
+   * UNSTYLED <Badge> is intentionally NEUTRAL + low-emphasis: the component's own
+   * fallbacks read the gray/neutral scale (gray-a3 fill, gray-a11 ink), so with no
+   * [data-style] it's a quiet gray chip that ignores the accent. Any data-style brings
+   * in the accent via the shared --spark-style-* knob for free — soft, surface and
+   * outline already carry the right ink (a11) and borders. Only `solid` needs a fix:
+   * its fill is the strong accent (step 9, or step 12 in HC), so the ink must be the
+   * readable --spark-contrast, not a11. The shared solid preset leaves --spark-style-fg
+   * unset (a checkbox glyph wants --spark-on-solid, badge TEXT wants --spark-contrast),
+   * so the badge supplies its own --spark-badge-fg, consulted only when --spark-style-fg
+   * is unset — i.e. the solid style. High-contrast needs no badge rule: HC re-declares
+   * --spark-style-fg (step-1 on the step-12 solid fill; a12 on the faint non-solid
+   * fills), which wins the fallback chain outright.
+   */
+  [data-style='solid'],
+  :where([data-style='solid'] .spark-theme) {
+    --spark-badge-fg: var(--spark-contrast);
+  }
+}