@usetheo/ui 0.35.4 → 0.36.0

package/dist/styles.css

@@ -0,0 +1,137 @@
+/* Theo UI — Tailwind v4 prebuilt entry stylesheet.
+ *
+ * What ships at `@theokit/ui/styles.css` since RFC 0008 follow-up
+ * (`0.5.1-next.0`). Consumer imports this once and the framework's
+ * Tailwind v4 build picks up:
+ *   - `@import "tailwindcss"` — Tailwind v4 core (preflight + utilities)
+ *   - `@import "./fonts.css"` — self-hosted Geist + Geist Mono @font-face
+ *   - `@import "./tokens.css"` — runtime `--*` vars (theme cascade target)
+ *   - `@import "./tokens-v4.css"` — `@theme { --color-*, --text-*, … }`
+ *     namespace Tailwind v4 reads to emit utilities
+ *   - `@layer base` — `border-color`, body font, focus ring, scrollbar
+ *     styling that depend on the runtime vars
+ *
+ * v3-only consumers (Tailwind 3.x + the shadcn registry preset) should
+ * load `@theokit/ui/styles-v3-legacy.css` instead — that file is the
+ * unchanged `@tailwind base; @tailwind components; @tailwind utilities`
+ * variant. See RFC 0008 follow-up.
+ */
+
+@import "tailwindcss";
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./tokens-v4.css";
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  /* Tailwind v4 preflight regression compensation —
+   * v4 intentionally dropped the `button { cursor: pointer }` rule
+   * (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor)
+   * so every native <button> renders with the default arrow cursor.
+   *
+   * Library authors are expected to opt in explicitly per button. The
+   * Violet Forge `<Button>` primitive does so (see its CVA). For the
+   * dozens of native <button> elements composites render directly,
+   * we restore the v3 behavior here — scoped to *interactive* buttons:
+   *
+   *   - `:not(:disabled)` skips the HTML `disabled` attribute path
+   *     (browser already shows `cursor: default` for disabled, but the
+   *     rule below stays explicit for clarity).
+   *   - `:not([aria-disabled="true"])` skips the ARIA-disabled path
+   *     (where the button stays focusable but acts as no-op).
+   *
+   * This is an EXPLICIT opt-in by the library author for consumers who
+   * imported `@theokit/ui/styles.css` — it does NOT alter Tailwind's
+   * global preflight, only this stylesheet's @layer base.
+   */
+  button:not(:disabled):not([aria-disabled="true"]),
+  [role="button"]:not([aria-disabled="true"]) {
+    cursor: pointer;
+  }
+
+  html {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    /* OpenType ligatures globally — Geist's "liga" feature is structural
+     * and gives the Vercel-tight glyph combinations. */
+    font-feature-settings: "liga" 1, "ss01" 1;
+  }
+
+  /* Display headings inherit theme display font (Geist by default).
+   * Per-size tracking is set in tokens-v4.css; this is the safety net. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    font-weight: 600;
+  }
+
+  /* Code surfaces: use the mono token + tabular numerals so columns of
+   * numbers line up in tables/logs/metrics. */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum" 1, "liga" 1;
+  }
+
+  /* Focus ring — violet (signature) */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Selection — soft violet */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.25);
+    color: hsl(var(--foreground));
+  }
+
+  /* Native scrollbar fallback (Violet Forge).
+   * Used for native browser scroll on elements that don't wrap in <ScrollArea>.
+   * Components that DO use <ScrollArea> hide the native scrollbar via Radix.
+   */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--primary) / 0.25);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+    transition: background-color var(--duration-fast) var(--ease-out-soft);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: hsl(var(--primary) / 0.75);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
+  }
+}
+
+/* RFC 0008 follow-up #2 — pre-compiled utility rules. The bytes here
+ * are emitted at build time by `scripts/build-precompiled-css.ts` so
+ * consumers do not depend on Tailwind v4 `@source` scanning the
+ * library's node_modules tree (which breaks under pnpm symlinks).
+ */
+@import "./components.css";

package/dist/tokens-v4.css

@@ -0,0 +1,223 @@
+/* Theo UI — Tailwind v4 theme aliases.
+ *
+ * Companion to `tokens.css`. The base file declares the v3-style runtime
+ * variables (`--primary`, `--background`, …) that `<ThemeProvider>` and
+ * `[data-theme]` cascades mutate at runtime. This file declares the
+ * Tailwind v4 `@theme` namespace (`--color-primary`, `--color-background`,
+ * …) by aliasing back to those runtime vars via `hsl(var(--*))`.
+ *
+ * Why two layers:
+ *   - `<ThemeProvider>` (and the 10 built-in themes) sets `--primary`
+ *     etc. at runtime — that's the theme switch surface.
+ *   - Tailwind v4 resolves color utilities exclusively through
+ *     `--color-*` tokens declared in `@theme`. Without these aliases
+ *     `bg-primary`, `text-muted-foreground`, `border-border`, etc. emit
+ *     a className with no matching CSS rule.
+ *
+ * The indirection (`--color-primary: var(--primary)`) preserves the
+ * runtime theme cascade — browsers resolve `var(--color-primary)` →
+ * `var(--primary)` → current `[data-theme]` value at paint time.
+ *
+ * See RFC 0008 follow-up.
+ */
+
+/* `@theme inline` (Tailwind v4 keyword) preserves the var() reference at
+ * runtime instead of inlining the value at build time. Without `inline`,
+ * `--color-primary: var(--primary)` would resolve to whatever `--primary`
+ * was when Tailwind compiled the CSS — breaking the theme cascade.
+ * See https://tailwindcss.com/docs/theme#using-your-theme-variables-in-arbitrary-values
+ */
+@theme inline {
+  /* Color tokens ------------------------------------------------------ */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-deep: var(--primary-deep);
+  --color-primary-glow: var(--primary-glow);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-deep: var(--accent-deep);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  /* Status group (D4) ------------------------------------------------- */
+  --color-status-online: var(--status-online);
+  --color-status-online-foreground: var(--status-online-foreground);
+  --color-status-offline: var(--status-offline);
+  --color-status-offline-foreground: var(--status-offline-foreground);
+  --color-status-degraded: var(--status-degraded);
+  --color-status-degraded-foreground: var(--status-degraded-foreground);
+  --color-status-info: var(--status-info);
+  --color-status-info-foreground: var(--status-info-foreground);
+
+  /* Fonts ------------------------------------------------------------- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+
+  /* Violet Forge typescale -------------------------------------------- *
+   * Compound text utilities: each `--text-{name}` declares the size,
+   * with companion `--*--line-height`, `--*--letter-spacing`, and
+   * `--*--font-weight` properties Tailwind v4 picks up automatically.
+   */
+  --text-display-2xl: 64px;
+  --text-display-2xl--line-height: 1;
+  --text-display-2xl--letter-spacing: -0.0464em;
+  --text-display-2xl--font-weight: 600;
+
+  --text-display-xl: 48px;
+  --text-display-xl--line-height: 1.05;
+  --text-display-xl--letter-spacing: -0.05em;
+  --text-display-xl--font-weight: 600;
+
+  --text-display-lg: 40px;
+  --text-display-lg--line-height: 1.1;
+  --text-display-lg--letter-spacing: -0.05em;
+  --text-display-lg--font-weight: 600;
+
+  --text-display-md: 32px;
+  --text-display-md--line-height: 1.2;
+  --text-display-md--letter-spacing: -0.04em;
+  --text-display-md--font-weight: 600;
+
+  --text-headline: 28px;
+  --text-headline--line-height: 1.25;
+  --text-headline--letter-spacing: -0.035em;
+  --text-headline--font-weight: 600;
+
+  --text-title-lg: 24px;
+  --text-title-lg--line-height: 1.33;
+  --text-title-lg--letter-spacing: -0.04em;
+  --text-title-lg--font-weight: 600;
+
+  --text-title-md: 20px;
+  --text-title-md--line-height: 1.4;
+  --text-title-md--letter-spacing: -0.03em;
+  --text-title-md--font-weight: 600;
+
+  --text-body-lg: 18px;
+  --text-body-lg--line-height: 1.56;
+  --text-body-lg--letter-spacing: -0.01em;
+  --text-body-lg--font-weight: 400;
+
+  --text-body-md: 14px;
+  --text-body-md--line-height: 1.43;
+  --text-body-md--letter-spacing: 0;
+  --text-body-md--font-weight: 400;
+
+  --text-body-sm: 13px;
+  --text-body-sm--line-height: 1.46;
+  --text-body-sm--font-weight: 400;
+
+  --text-label: 14px;
+  --text-label--line-height: 1.43;
+  --text-label--font-weight: 500;
+
+  --text-label-caps: 12px;
+  --text-label-caps--line-height: 1.33;
+  --text-label-caps--letter-spacing: 0.04em;
+  --text-label-caps--font-weight: 500;
+
+  --text-code-md: 14px;
+  --text-code-md--line-height: 1.5;
+  --text-code-md--font-weight: 400;
+
+  --text-code-sm: 13px;
+  --text-code-sm--line-height: 1.54;
+  --text-code-sm--font-weight: 500;
+
+  /* Radii — Tailwind v4 reads the value directly (no var indirection). */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+
+  /* Shadows — alias to tokens.css computed values (which already use
+     * `hsl(var(--foreground) / …)` so theme-switch keeps them in step). */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-glow: var(--shadow-glow);
+  --shadow-glow-strong: var(--shadow-glow-strong);
+
+  /* Motion ------------------------------------------------------------ */
+  --ease-out-soft: var(--ease-out-soft);
+  --ease-snap: var(--ease-snap);
+
+  /* Container queries (T5.5) — Tailwind v4 native @container support.
+     * Sizes drive `@<size>:<utility>` variants for container-relative responsive
+     * design (components that adapt to their parent's width, not the viewport).
+     * Default sizes mirror Tailwind v4 defaults; declared explicitly so the
+     * preset ships consistent values.
+     */
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  /* Animations — declare so `animate-fade-in-up` and `animate-pulse-glow`
+     * resolve. Keyframes are declared below (outside @theme — Tailwind v4
+     * picks them up via the @keyframes namespace).
+     */
+  --animate-fade-in-up: fade-in-up var(--duration-base) var(--ease-out-soft) both;
+  --animate-pulse-glow: pulse-glow 1.5s var(--ease-in-out) infinite;
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 50%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}

package/dist/tokens.css

@@ -0,0 +1,315 @@
+/* Theo UI — Design System "Violet Forge" tokens.
+ *
+ * Tokens normativos. Não edite valores aqui sem revisão do design system.
+ * Referência: docs/design-system.md
+ *
+ * Estratégia:
+ *   - CSS custom properties para todas as cores, scales e durations.
+ *   - Default é light. Dark é ativado via [data-theme="dark"] ou .dark.
+ *   - HSL split (h s l) em vez de hex permite alpha via color-mix() ou hsl(var(--x) / .5).
+ *
+ * Roxo Theo: #A855F7  →  oklch(0.628 0.225 296)  (electric violet — unified 2026-06-09)
+ * Burnt sienna:  #C96442  →  hsl(15 54% 53%)
+ */
+
+/* `:root` and `[data-theme="dark"]` declarations are intentionally NOT wrapped
+ * in `@layer base` so they apply at the document level regardless of whether
+ * the consumer's CSS pipeline runs Tailwind's preflight. The texture utilities
+ * below remain in `@layer utilities` because that layer affects ordering only,
+ * not the cascade root.
+ */
+:root {
+  /* Base palette ------------------------------------------------------- *
+     * Neutrals are 100% desaturated (Vercel-style). Color comes from the
+     * primary (violet) + accent (burnt sienna) tokens below — never from
+     * surface tints.
+     */
+  --background: oklch(1 0 0); /* #FFFFFF */
+  --foreground: oklch(0.146 0 0); /* #0A0A0A */
+
+  --card: oklch(1 0 0); /* #FFFFFF */
+  --card-foreground: oklch(0.146 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.146 0 0);
+
+  /* Primary — Theo violet (equity) ------------------------------------- *
+   * Post-T3.1 (ADR-0006): -deep and -glow are derived algorithmically via
+   * OKLCH relative-color syntax. Themes that need a per-token override may
+   * still declare these explicitly — the cascade resolves the override.
+   * `max()`/`min()` clamps protect dark/light themes from L overflow (EC-7).
+   */
+  --primary: oklch(0.628 0.225 296); /* #A855F7 — Theo violet electric (unified 2026-06-09) */
+  --primary-deep: oklch(from var(--primary) max(0.05, calc(l - 0.16)) c h);
+  --primary-glow: oklch(from var(--primary) min(0.95, calc(l + 0.18)) c h);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary — neutral muted ----------------------------------------- */
+  --secondary: oklch(0.97 0 0); /* #F5F5F5 */
+  --secondary-foreground: oklch(0.146 0 0);
+
+  /* Accent — burnt sienna --------------------------------------------- *
+   * T3.1: accent-deep derived. Override path identical to primary.
+   */
+  --accent: oklch(0.621 0.132 39); /* #C96442 */
+  --accent-deep: oklch(from var(--accent) max(0.05, calc(l - 0.13)) c h);
+  --accent-foreground: oklch(1 0 0);
+
+  /* Muted ------------------------------------------------------------- */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.555 0 0); /* #737373 */
+
+  /* Surfaces, borders, inputs ----------------------------------------- */
+  --border: oklch(0.931 0 0); /* #E8E8E8 — Vercel-style hairline */
+  --input: oklch(0.931 0 0);
+  --ring: oklch(0.628 0.225 296); /* matches primary */
+
+  /* Semantics --------------------------------------------------------- */
+  --success: oklch(0.611 0.161 149.7); /* #16A34A */
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.67 0.154 60.6); /* #D97706 */
+  --warning-foreground: oklch(1 0 0);
+  --destructive: oklch(0.579 0.214 27.2); /* #DC2626 */
+  --destructive-foreground: oklch(1 0 0);
+  --info: oklch(0.626 0.186 259.6); /* #3B82F6 */
+  --info-foreground: oklch(1 0 0);
+
+  /* Status (D4 — operational state group) ----------------------------- *
+   * Separate from semantic group (success/destructive/warning/info, which
+   * are action-result colors). Status describes component liveness:
+   * online (alive), offline (dead), degraded (alive-but-slow), info (flag).
+   * Defaults mirror semantic counterparts; themes override for distinction.
+   */
+  --status-online: oklch(0.611 0.161 149.7);
+  --status-online-foreground: oklch(1 0 0);
+  --status-offline: oklch(0.579 0.214 27.2);
+  --status-offline-foreground: oklch(1 0 0);
+  --status-degraded: oklch(0.67 0.154 60.6);
+  --status-degraded-foreground: oklch(1 0 0);
+  --status-info: oklch(0.626 0.186 259.6);
+  --status-info-foreground: oklch(1 0 0);
+
+  /* Radii ------------------------------------------------------------- */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+  /* shadcn compat */
+  --radius: 14px;
+
+  /* Spacing scale (4px base) ------------------------------------------ */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  /* Elevation — theme-aware (uses --foreground for shadow ink,
+     * --primary for the signature glow, so swapping themes recolors them).
+     * Post-T2.5: tokens are OKLCH; we compose alpha via color-mix(in oklch, ...)
+     * which is perceptually correct AND works with any color-space variable.
+     */
+  --shadow-sm: 0 1px 2px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
+  --shadow-md: 0 2px 8px -2px color-mix(in oklch, var(--foreground) 8%, transparent), 0 1px 3px
+    color-mix(in oklch, var(--foreground) 6%, transparent);
+  --shadow-lg: 0 12px 32px -8px color-mix(in oklch, var(--foreground) 12%, transparent), 0 4px 12px
+    color-mix(in oklch, var(--foreground) 8%, transparent);
+  --shadow-glow: 0 0 24px color-mix(in oklch, var(--primary) 25%, transparent);
+  --shadow-glow-strong: 0 0 32px color-mix(in oklch, var(--primary) 40%, transparent);
+
+  /* Motion ------------------------------------------------------------ */
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 360ms;
+  --stagger: 60ms;
+
+  /* Typography (Geist family — Vercel-inspired Violet Forge) ---------- */
+  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Dark mode — dominante --------------------------------------------- *
+   * Vercel-aligned grayscale: pure neutrals (0% saturation) for every
+   * surface and text layer. Color only in primary (violet), accent (burnt
+   * sienna), and semantic tokens (success/warning/destructive/info).
+   *
+   * Activated exclusively via the `.dark` class on `<html>` (set by
+   * `ThemeProvider`, `ThemeScript`, or consumers manually). The previous
+   * `[data-theme="dark"]` companion selector was dead — `data-theme` holds
+   * the theme NAME, never the literal `"dark"`.
+   */
+.dark {
+  --background: oklch(0.146 0 0); /* #0A0A0A */
+  --foreground: oklch(0.97 0 0); /* #F5F5F5 */
+
+  --card: oklch(0.182 0 0); /* #121212 */
+  --card-foreground: oklch(0.97 0 0);
+
+  --popover: oklch(0.204 0 0); /* #171717 */
+  --popover-foreground: oklch(0.97 0 0);
+
+  --primary: oklch(0.628 0.225 296);
+  --primary-deep: oklch(from var(--primary) max(0.05, calc(l - 0.16)) c h);
+  --primary-glow: oklch(from var(--primary) min(0.95, calc(l + 0.18)) c h);
+  --primary-foreground: oklch(1 0 0);
+
+  --secondary: oklch(0.227 0 0); /* #1C1C1C */
+  --secondary-foreground: oklch(0.97 0 0);
+
+  --accent: oklch(0.621 0.132 39);
+  --accent-deep: oklch(from var(--accent) max(0.05, calc(l - 0.13)) c h);
+  --accent-foreground: oklch(1 0 0);
+
+  --muted: oklch(0.227 0 0);
+  --muted-foreground: oklch(0.683 0 0); /* #999 — Vercel gray-500 */
+
+  --border: oklch(0.28 0 0); /* #292929 */
+  --input: oklch(0.227 0 0);
+  --ring: oklch(0.628 0.225 296);
+
+  --success: oklch(0.814 0.192 155.7); /* #22E58C */
+  --success-foreground: oklch(0.146 0 0);
+  --warning: oklch(0.77 0.165 70.6); /* #F59E0B */
+  --warning-foreground: oklch(0.146 0 0);
+  --destructive: oklch(0.677 0.213 15.6); /* #FF4F6D */
+  --destructive-foreground: oklch(0.146 0 0);
+  --info: oklch(0.732 0.142 254.4); /* #5FB3FF */
+  --info-foreground: oklch(0.146 0 0);
+
+  /* Status (D4 — dark mode mirror of light defaults) ------------------ */
+  --status-online: oklch(0.814 0.192 155.7);
+  --status-online-foreground: oklch(0.146 0 0);
+  --status-offline: oklch(0.677 0.213 15.6);
+  --status-offline-foreground: oklch(0.146 0 0);
+  --status-degraded: oklch(0.77 0.165 70.6);
+  --status-degraded-foreground: oklch(0.146 0 0);
+  --status-info: oklch(0.732 0.142 254.4);
+  --status-info-foreground: oklch(0.146 0 0);
+
+  /* In dark mode, shadows are heavier ink (against the dark surface) and
+     * the glow brightens. Both still derive from theme tokens.
+     * Post-T2.5: OKLCH-aware composition via color-mix() — black ink via
+     * the literal oklch(0 0 0) (no theme indirection needed).
+     */
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4);
+  --shadow-md: 0 2px 8px -2px oklch(0 0 0 / 0.5), 0 1px 3px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 12px 32px -8px oklch(0 0 0 / 0.6), 0 4px 12px oklch(0 0 0 / 0.4);
+  --shadow-glow: 0 0 24px color-mix(in oklch, var(--primary-glow) 40%, transparent);
+  --shadow-glow-strong: 0 0 36px color-mix(in oklch, var(--primary-glow) 60%, transparent);
+}
+
+/* Forced colors (Windows High Contrast Mode) — D7 / ADR-0008 ----------- *
+ * Maps Theo's semantic tokens to system colors so the UI remains usable
+ * (and required by WCAG 1.4.1) when the OS forces a high-contrast palette.
+ * Decorative textures opt out via `forced-color-adjust: none` (the dotted
+ * patterns and hero glow would invert into solid blocks otherwise).
+ *
+ * Reference: MDN forced-colors media query, WCAG 2.2 SC 1.4.1.
+ */
+@media (forced-colors: active) {
+  :root,
+  .dark {
+    --background: Canvas;
+    --foreground: CanvasText;
+    --card: Canvas;
+    --card-foreground: CanvasText;
+    --popover: Canvas;
+    --popover-foreground: CanvasText;
+    --primary: Highlight;
+    --primary-foreground: HighlightText;
+    --secondary: ButtonFace;
+    --secondary-foreground: ButtonText;
+    --accent: Highlight;
+    --accent-foreground: HighlightText;
+    --muted: ButtonFace;
+    --muted-foreground: GrayText;
+    --border: ButtonBorder;
+    --input: ButtonBorder;
+    --ring: Highlight;
+  }
+
+  /* Texture utilities are decorative — keep them out of the system-color map. */
+  .bg-dotted-violet,
+  .bg-dotted-violet-strong,
+  .bg-hero-glow,
+  .bg-paper-grain {
+    forced-color-adjust: none;
+  }
+}
+
+/* Reduced motion — neutralizes durations and transitions for users who
+ * request prefers-reduced-motion: reduce. Components that use animation as
+ * semantic state (e.g. a spinner on a running step) can opt back in with
+ * Tailwind's `motion-safe:` prefix.
+ *
+ * Reference: WCAG 2.3.3 Animation from Interactions (Level AAA).
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --stagger: 0ms;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Texture utilities (signature) ---------------------------------------- *
+ * Post-T2.5: tokens are OKLCH; we compose alpha via color-mix(in oklch, …),
+ * which is perceptually correct and works with any color-space variable.
+ */
+@layer utilities {
+  .bg-dotted-violet {
+    background-image: radial-gradient(
+      color-mix(in oklch, var(--primary) 8%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 20px 20px;
+  }
+
+  .bg-dotted-violet-strong {
+    background-image: radial-gradient(
+      color-mix(in oklch, var(--primary) 16%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 20px 20px;
+  }
+
+  .bg-hero-glow {
+    background-image: radial-gradient(
+      ellipse 60% 50% at 70% 0%,
+      color-mix(in oklch, var(--primary) 18%, transparent) 0%,
+      transparent 60%
+    );
+  }
+
+  .bg-paper-grain {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0 0.08 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+}