@nebutra/tokens 0.1.0

package/styles.css

@@ -0,0 +1,1391 @@
+/* biome-ignore-all lint/suspicious/noDuplicateCustomProperties: auto-generated from W3C DTCG tokens — primitive + semantic blocks intentionally redeclare aliases. Fix in tokens/*.json source if real, then re-run pnpm --filter @nebutra/design-tokens build. */
+
+/**
+ * @nebutra/design-tokens — styles.generated.css
+ * AUTO-GENERATED from packages/design/design-tokens/tokens/*.json — DO NOT EDIT.
+ * Run `pnpm --filter @nebutra/design-tokens build` after editing tokens.
+ *
+ * SSOT Architecture:
+ *   tokens/core.json        primitive scales (colors, sizes, durations, fonts)
+ *   tokens/semantic.json    semantic aliases (brand.primary, status.danger, gradients)
+ *   tokens/themes/light.json 12-step scales + shadcn HSL + Geist DS + elevation
+ *   tokens/themes/dark.json  same shape, dark-mode values
+ *
+ * Modeling extensions:
+ *   - Display-P3 wide-gamut overrides (`@supports (color: color(display-p3 ...))`)
+ *   - oklch fallbacks for ds-gray-* (`@supports (color: oklch(0 0 0))`)
+ *   - Composite shorthand tokens (`--transition`, `--focus-ring`)
+ *   - Tailwind v4 `@theme inline` block
+ *   - Dark-mode brand alias overrides (`--brand-primary` → `--blue-9` in .dark)
+ */
+
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+:root {
+  --nebutra-blue-50: #f0f4ff;
+  --nebutra-blue-100: #dbe4ff;
+  --nebutra-blue-200: #bac8ff;
+  --nebutra-blue-300: #91a7ff;
+  --nebutra-blue-400: #5c7cfa;
+  --nebutra-blue-500: #0033fe; /** Base brand color — 云毓蓝 */
+  --nebutra-blue-600: #002ad4;
+  --nebutra-blue-700: #0021ab;
+  --nebutra-blue-800: #001882;
+  --nebutra-blue-900: #000f59;
+  --nebutra-blue-950: #000830;
+  --nebutra-cyan-50: #e6fff8;
+  --nebutra-cyan-100: #b3ffec;
+  --nebutra-cyan-200: #80ffe0;
+  --nebutra-cyan-300: #4dfcd4;
+  --nebutra-cyan-400: #1af7c8;
+  --nebutra-cyan-500: #0bf1c3; /** Base brand accent — 云毓青 */
+  --nebutra-cyan-600: #09c9a3;
+  --nebutra-cyan-700: #07a183;
+  --nebutra-cyan-800: #057963;
+  --nebutra-cyan-900: #035143;
+  --nebutra-cyan-950: #012923;
+  --nebutra-neutral-50: #f8fafc;
+  --nebutra-neutral-100: #f1f5f9;
+  --nebutra-neutral-200: #e2e8f0;
+  --nebutra-neutral-300: #cbd5e1;
+  --nebutra-neutral-400: #94a3b8;
+  --nebutra-neutral-500: #64748b;
+  --nebutra-neutral-600: #475569;
+  --nebutra-neutral-700: #334155;
+  --nebutra-neutral-800: #1e293b;
+  --nebutra-neutral-900: #0f172a;
+  --nebutra-neutral-950: #020617;
+  --nebutra-gray-50: #fafafa;
+  --nebutra-gray-100: #f5f5f5;
+  --nebutra-gray-200: #e5e5e5;
+  --nebutra-gray-300: #d4d4d4;
+  --nebutra-gray-400: #a3a3a3;
+  --nebutra-gray-500: #737373;
+  --nebutra-gray-600: #525252;
+  --nebutra-gray-700: #404040;
+  --nebutra-gray-800: #262626;
+  --nebutra-gray-900: #171717;
+  --nebutra-gray-950: #0a0a0a;
+  --brand-tertiary: #8b5cf6; /** Tertiary accent — data viz, infrastructure tags */
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e; /** Tailwind green-500 — VI manual canonical success color (replaces drifted #10b981 emerald). */
+  --container-text: 896px; /** Reading-focused (hero copy, FAQ) */
+  --container-content: 1152px; /** Pricing, blog */
+  --container-wide: 1400px; /** Feature bento, navbar */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+  --radius-button: 0.5rem; /** 2026 button radius — Vercel/Linear/Cursor consensus */
+  --radius-card: 0.75rem; /** 2026 card radius */
+  --radius-panel: 1rem; /** 2026 bento/hero panel radius */
+  --duration-micro: 100ms; /** Micro-feedback: hover, focus, toggle, button press */
+  --duration-flow: 200ms; /** State flow: modal open, dropdown reveal, tab switch, default page transition */
+  --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
+  --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --tracking-display: -0.04em; /** Hero H1 */
+  --tracking-heading: -0.03em; /** Section H2/H3 */
+  --tracking-tight: -0.015em; /** Body emphasis */
+  --leading-display: 1.05;
+  --leading-heading: 1.15;
+  --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.04); /** Etched-glass hairline (light mode value, dark mode override in themes/dark.json) */
+  --overlay-faint: rgb(0 0 0 / 0.06); /** Light-mode faint overlay (6% black) */
+  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
+  --font-display: "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: "Geist", "Noto Sans SC", sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
+  --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
+  --brand-primary: #0033fe; /** Brand primary — 云毓蓝 */
+  --brand-accent: #0bf1c3; /** Brand accent — 云毓青 */
+  --brand-tertiary: #8b5cf6;
+  --brand-gradient: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Brand gradient — Logo standard 135° */
+  --brand-gradient-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --brand-gradient-vertical: linear-gradient(180deg, #0033fe 0%, #0bf1c3 100%);
+  --brand-gradient-radial: radial-gradient(circle, #0bf1c3 0%, #0033fe 100%);
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e;
+  --status-info: #0033fe; /** VI: Info = Brand Blue */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+  --radius: 0.375rem; /** Geist-matching 6px */
+  --motion-duration-micro: 100ms;
+  --motion-duration-flow: 200ms;
+  --motion-duration-reveal: 300ms;
+  --motion-duration-cinematic: 500ms;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4); /** Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css. */
+  --neutral-1: #ffffff; /** app background */
+  --neutral-2: #f8fafc; /** subtle background */
+  --neutral-3: #f1f5f9; /** component bg default */
+  --neutral-4: #e2e8f0; /** component bg hover */
+  --neutral-5: #cbd5e1; /** component bg active */
+  --neutral-6: #e2e8f0; /** subtle border */
+  --neutral-7: #cbd5e1; /** default border */
+  --neutral-8: #94a3b8; /** hovered border */
+  --neutral-9: #64748b; /** solid fill */
+  --neutral-10: #475569; /** solid fill hover */
+  --neutral-11: #334155; /** secondary text */
+  --neutral-12: #0f172a; /** primary text */
+  --blue-1: #f0f4ff;
+  --blue-2: #dbe4ff;
+  --blue-3: #bac8ff;
+  --blue-4: #91a7ff;
+  --blue-5: #5c7cfa;
+  --blue-6: #bac8ff;
+  --blue-7: #91a7ff;
+  --blue-8: #5c7cfa;
+  --blue-9: #0033fe; /** solid fill — main brand */
+  --blue-10: #002ad4;
+  --blue-11: #0021ab;
+  --blue-12: #000f59;
+  --cyan-1: #e6fff8;
+  --cyan-2: #b3ffec;
+  --cyan-3: #80ffe0;
+  --cyan-4: #4dfcd4;
+  --cyan-5: #1af7c8;
+  --cyan-6: #80ffe0;
+  --cyan-7: #4dfcd4;
+  --cyan-8: #1af7c8;
+  --cyan-9: #0bf1c3;
+  --cyan-10: #09c9a3;
+  --cyan-11: #07a183;
+  --cyan-12: #035143;
+  --background: 0 0% 100%; /** HSL channel triple — consume via hsl(var(--background)) */
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 228 85% 56%; /** Softer brand blue #254bfa */
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 11%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215 25% 45%;
+  --accent: 228 100% 97%;
+  --accent-foreground: 228 85% 56%; /** Softer brand blue — desaturated to match --primary, avoids 100% saturation glare on focus/accent */
+  --destructive: 0 84% 45%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 142 71% 29%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 222 47% 11%;
+  --info: 228 85% 56%;
+  --info-foreground: 0 0% 100%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 222 47% 11%; /** Focus ring — neutral foreground (Vercel/Linear/Cursor 2026 pattern). Brand blue is reserved for selected/active states; focus indication is chrome and stays neutral. Consumed by global :focus-visible outline as hsl(var(--ring) / 0.5). */
+  --sidebar: 210 40% 98%;
+  --sidebar-foreground: 215 25% 27%;
+  --sidebar-primary: 228 85% 56%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 228 100% 97%;
+  --sidebar-accent-foreground: 228 85% 56%;
+  --sidebar-border: 214 32% 91%;
+  --sidebar-ring: 228 85% 56%;
+  --chart-1: 228 100% 50%;
+  --chart-2: 168 91% 49%;
+  --chart-3: 263 70% 66%;
+  --chart-4: 168 91% 70%;
+  --chart-5: 228 100% 35%;
+  --ds-blue-200: oklch(96.29% 0.0195 250.59);
+  --ds-blue-700: oklch(57.61% 0.2508 258.23);
+  --ds-blue-900: oklch(53.18% 0.2399 256.9900584162342);
+  --ds-red-200: oklch(95.41% 0.0299 14.252646656611997);
+  --ds-red-700: oklch(62.56% 0.2524 23.03);
+  --ds-red-900: oklch(54.99% 0.232 25.29);
+  --ds-amber-200: oklch(96.81% 0.0495 90.24227879900472);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-900: oklch(52.79% 0.1496 54.65);
+  --ds-green-200: oklch(96.92% 0.037 147.15);
+  --ds-green-700: oklch(64.58% 0.1746 147.27);
+  --ds-green-900: oklch(51.75% 0.1453 147.65);
+  --ds-teal-300: oklch(94.92% 0.0478 182.07);
+  --ds-teal-700: oklch(64.92% 0.1572 181.95);
+  --ds-teal-900: oklch(52.08% 0.1251 182.93);
+  --ds-purple-200: oklch(96.73% 0.0228 309.8);
+  --ds-purple-700: oklch(55.5% 0.3008 306.12);
+  --ds-purple-900: oklch(47.18% 0.2579 304);
+  --ds-pink-300: oklch(93.83% 0.0451 356.29);
+  --ds-pink-700: oklch(63.52% 0.238 1.01);
+  --ds-pink-900: oklch(53.5% 0.2058 2.84);
+  --ds-gray-100: hsla(0, 0%, 95%, 1);
+  --ds-gray-200: hsla(0, 0%, 92%, 1);
+  --ds-gray-500: hsla(0, 0%, 79%, 1);
+  --ds-gray-600: hsla(0, 0%, 66%, 1);
+  --ds-gray-700: hsla(0, 0%, 56%, 1);
+  --ds-gray-1000: hsla(0, 0%, 9%, 1);
+  --ds-background-100: hsla(0, 0%, 100%, 1);
+  --ds-trial-start: rgb(0, 112, 243);
+  --ds-trial-end: rgb(248, 28, 229);
+  --ds-turbo-start: #ff1e56;
+  --ds-turbo-end: #0096ff;
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --elevation-brand: 0 0 0 1px rgb(0 51 254 / 0.15), 0 4px 20px -2px rgb(0 51 254 / 0.2);
+  --elevation-brand-lg: 0 0 0 1px rgb(0 51 254 / 0.2), 0 8px 40px -4px rgb(0 51 254 / 0.3);
+}
+
+:root {
+  /* Wide-gamut bridge: default to sRGB, upgrade to Display-P3 when available. */
+  --nebutra-brand-blue: var(--nebutra-blue-500);
+  --nebutra-brand-cyan: var(--nebutra-cyan-500);
+}
+
+:root {
+  /* Gradient aliases — both --brand-gradient-* (canonical, CLAUDE.md) and --gradient-brand-* (legacy) are emitted. */
+  --gradient-brand: var(--brand-gradient);
+  --gradient-brand-hover: var(--brand-gradient-reverse);
+  --gradient-brand-vertical: var(--brand-gradient-vertical);
+  --gradient-brand-reverse: var(--brand-gradient-reverse);
+  --gradient-brand-radial: var(--brand-gradient-radial);
+  --gradient-brand-glow: var(--brand-gradient-radial);
+  --gradient-section: var(--brand-gradient-vertical);
+  --gradient-glow: var(--brand-gradient-radial);
+}
+
+:root {
+  /* Composite tokens — combine duration + easing for shorthand use. */
+  --transition: 150ms ease-out;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  :root {
+    /* Richer brand values on Display-P3 hardware; sRGB fallback above. */
+    --nebutra-blue-500: color(display-p3 0.03 0.19 0.99);
+    --nebutra-cyan-500: color(display-p3 0.07 0.94 0.79);
+    --nebutra-brand-blue: color(display-p3 0.03 0.19 0.99);
+    --nebutra-brand-cyan: color(display-p3 0.07 0.94 0.79);
+  }
+}
+
+@supports (color: oklch(0 0 0)) {
+  :root {
+    /* oklch values for modern engines (2024+); sRGB hsla() fallback above. */
+    --ds-gray-100: oklch(0.953 0 0);
+    --ds-gray-200: oklch(0.929 0 0);
+    --ds-gray-500: oklch(0.81 0 0);
+    --ds-gray-600: oklch(0.69 0 0);
+    --ds-gray-700: oklch(0.598 0 0);
+    --ds-gray-1000: oklch(0.215 0 0);
+    --ds-background-100: oklch(1 0 0);
+  }
+}
+
+/**
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
+ */
+
+.dark {
+  --nebutra-blue-50: #f0f4ff;
+  --nebutra-blue-100: #dbe4ff;
+  --nebutra-blue-200: #bac8ff;
+  --nebutra-blue-300: #91a7ff;
+  --nebutra-blue-400: #5c7cfa;
+  --nebutra-blue-500: #0033fe; /** Base brand color — 云毓蓝 */
+  --nebutra-blue-600: #002ad4;
+  --nebutra-blue-700: #0021ab;
+  --nebutra-blue-800: #001882;
+  --nebutra-blue-900: #000f59;
+  --nebutra-blue-950: #000830;
+  --nebutra-cyan-50: #e6fff8;
+  --nebutra-cyan-100: #b3ffec;
+  --nebutra-cyan-200: #80ffe0;
+  --nebutra-cyan-300: #4dfcd4;
+  --nebutra-cyan-400: #1af7c8;
+  --nebutra-cyan-500: #0bf1c3; /** Base brand accent — 云毓青 */
+  --nebutra-cyan-600: #09c9a3;
+  --nebutra-cyan-700: #07a183;
+  --nebutra-cyan-800: #057963;
+  --nebutra-cyan-900: #035143;
+  --nebutra-cyan-950: #012923;
+  --nebutra-neutral-50: #f8fafc;
+  --nebutra-neutral-100: #f1f5f9;
+  --nebutra-neutral-200: #e2e8f0;
+  --nebutra-neutral-300: #cbd5e1;
+  --nebutra-neutral-400: #94a3b8;
+  --nebutra-neutral-500: #64748b;
+  --nebutra-neutral-600: #475569;
+  --nebutra-neutral-700: #334155;
+  --nebutra-neutral-800: #1e293b;
+  --nebutra-neutral-900: #0f172a;
+  --nebutra-neutral-950: #020617;
+  --nebutra-gray-50: #fafafa;
+  --nebutra-gray-100: #f5f5f5;
+  --nebutra-gray-200: #e5e5e5;
+  --nebutra-gray-300: #d4d4d4;
+  --nebutra-gray-400: #a3a3a3;
+  --nebutra-gray-500: #737373;
+  --nebutra-gray-600: #525252;
+  --nebutra-gray-700: #404040;
+  --nebutra-gray-800: #262626;
+  --nebutra-gray-900: #171717;
+  --nebutra-gray-950: #0a0a0a;
+  --brand-tertiary: #8b5cf6; /** Tertiary accent — data viz, infrastructure tags */
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e; /** Tailwind green-500 — VI manual canonical success color (replaces drifted #10b981 emerald). */
+  --container-text: 896px; /** Reading-focused (hero copy, FAQ) */
+  --container-content: 1152px; /** Pricing, blog */
+  --container-wide: 1400px; /** Feature bento, navbar */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+  --radius-button: 0.5rem; /** 2026 button radius — Vercel/Linear/Cursor consensus */
+  --radius-card: 0.75rem; /** 2026 card radius */
+  --radius-panel: 1rem; /** 2026 bento/hero panel radius */
+  --duration-micro: 100ms; /** Micro-feedback: hover, focus, toggle, button press */
+  --duration-flow: 200ms; /** State flow: modal open, dropdown reveal, tab switch, default page transition */
+  --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
+  --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --tracking-display: -0.04em; /** Hero H1 */
+  --tracking-heading: -0.03em; /** Section H2/H3 */
+  --tracking-tight: -0.015em; /** Body emphasis */
+  --leading-display: 1.05;
+  --leading-heading: 1.15;
+  --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.06); /** Hairline override — more visible on dark background */
+  --overlay-faint: rgb(255 255 255 / 0.06); /** Dark-mode faint overlay (6% white) — inverted from light */
+  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
+  --font-display: "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: "Geist", "Noto Sans SC", sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
+  --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
+  --brand-primary: #5c7cfa; /** Dark-mode brand primary — visible against dark surfaces (uses --blue-9 = nebutra-blue-400). */
+  --brand-accent: #1af7c8; /** Dark-mode brand accent — visible against dark surfaces (uses --cyan-9 = nebutra-cyan-400). */
+  --brand-tertiary: #8b5cf6;
+  --brand-gradient: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Brand gradient — Logo standard 135° */
+  --brand-gradient-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --brand-gradient-vertical: linear-gradient(180deg, #0033fe 0%, #0bf1c3 100%);
+  --brand-gradient-radial: radial-gradient(circle, #0bf1c3 0%, #0033fe 100%);
+  --status-danger: #ef4444;
+  --status-warning: #f59e0b;
+  --status-success: #22c55e;
+  --status-info: #5c7cfa; /** Dark-mode info color — equals dark brand-primary. */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+  --radius: 0.375rem; /** Geist-matching 6px */
+  --motion-duration-micro: 100ms;
+  --motion-duration-flow: 200ms;
+  --motion-duration-reveal: 300ms;
+  --motion-duration-cinematic: 500ms;
+  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.4); /** Single-layer translucent focus ring (2026 pattern). Legacy box-shadow consumers stay compatible; modern surfaces should prefer the global :focus-visible outline rule in static/base.css. */
+  --neutral-1: #020617;
+  --neutral-2: #0f172a;
+  --neutral-3: #1e293b;
+  --neutral-4: #334155;
+  --neutral-5: #475569;
+  --neutral-6: #171717;
+  --neutral-7: #262626;
+  --neutral-8: #404040;
+  --neutral-9: #94a3b8;
+  --neutral-10: #cbd5e1;
+  --neutral-11: #e2e8f0;
+  --neutral-12: #f8fafc;
+  --blue-1: #000830;
+  --blue-2: #000f59;
+  --blue-3: #001882;
+  --blue-4: #0021ab;
+  --blue-5: #002ad4;
+  --blue-6: #001882;
+  --blue-7: #0021ab;
+  --blue-8: #002ad4;
+  --blue-9: #5c7cfa;
+  --blue-10: #91a7ff;
+  --blue-11: #bac8ff;
+  --blue-12: #dbe4ff;
+  --cyan-1: #012923;
+  --cyan-2: #035143;
+  --cyan-3: #057963;
+  --cyan-4: #07a183;
+  --cyan-5: #09c9a3;
+  --cyan-6: #057963;
+  --cyan-7: #07a183;
+  --cyan-8: #09c9a3;
+  --cyan-9: #1af7c8;
+  --cyan-10: #4dfcd4;
+  --cyan-11: #80ffe0;
+  --cyan-12: #b3ffec;
+  --background: 222 47% 4%;
+  --foreground: 210 40% 98%;
+  --card: 222 47% 7%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222 47% 7%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 228 90% 72%;
+  --primary-foreground: 222 47% 4%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 228 100% 12%;
+  --accent-foreground: 228 95% 67%;
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+  --success: 142 76% 36%;
+  --success-foreground: 222 47% 4%;
+  --warning: 38 80% 45%;
+  --warning-foreground: 222 47% 4%;
+  --info: 228 95% 67%;
+  --info-foreground: 222 47% 4%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 88%; /** Focus ring (dark mode) — neutral light gray. Mirrors light-mode neutral foreground choice. */
+  --sidebar: 222 47% 6%;
+  --sidebar-foreground: 210 40% 96%;
+  --sidebar-primary: 228 95% 67%;
+  --sidebar-primary-foreground: 222 47% 4%;
+  --sidebar-accent: 228 100% 12%;
+  --sidebar-accent-foreground: 228 95% 67%;
+  --sidebar-border: 0 0% 14.9%;
+  --sidebar-ring: 228 95% 67%;
+  --chart-1: 228 95% 67%;
+  --chart-2: 168 96% 54%;
+  --chart-3: 228 100% 82%;
+  --chart-4: 168 100% 75%;
+  --chart-5: 228 100% 50%;
+  --ds-blue-200: oklch(25.45% 0.0811 255.8);
+  --ds-blue-700: oklch(57.61% 0.2321 258.23);
+  --ds-blue-900: oklch(71.7% 0.1648 250.79360374054167);
+  --ds-red-200: oklch(25.93% 0.0834 19.02);
+  --ds-red-700: oklch(62.56% 0.2234 23.03);
+  --ds-red-900: oklch(69.96% 0.2136 22.03);
+  --ds-amber-200: oklch(24.95% 0.0642 64.78);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-900: oklch(77.21% 0.1991 64.28);
+  --ds-green-200: oklch(27.12% 0.0895 150.09);
+  --ds-green-700: oklch(64.58% 0.199 147.27);
+  --ds-green-900: oklch(73.1% 0.2158 148.29);
+  --ds-teal-300: oklch(31.5% 0.0767 180.99);
+  --ds-teal-700: oklch(64.92% 0.1403 181.95);
+  --ds-teal-900: oklch(74.56% 0.1765 182.8);
+  --ds-purple-200: oklch(25.91% 0.0921 314.41);
+  --ds-purple-700: oklch(55.5% 0.2186 306.12);
+  --ds-purple-900: oklch(69.87% 0.2037 309.51);
+  --ds-pink-300: oklch(31.15% 0.1067 355.93);
+  --ds-pink-700: oklch(63.52% 0.2346 1.01);
+  --ds-pink-900: oklch(69.36% 0.2223 3.91);
+  --ds-gray-100: hsla(0, 0%, 10%, 1);
+  --ds-gray-200: hsla(0, 0%, 12%, 1);
+  --ds-gray-500: hsla(0, 0%, 27%, 1);
+  --ds-gray-600: hsla(0, 0%, 53%, 1);
+  --ds-gray-700: hsla(0, 0%, 56%, 1);
+  --ds-gray-1000: hsla(0, 0%, 93%, 1);
+  --ds-background-100: hsla(0, 0%, 4%, 1);
+  --ds-trial-start: rgb(0, 112, 243);
+  --ds-trial-end: rgb(248, 28, 229);
+  --ds-turbo-start: #ff1e56;
+  --ds-turbo-end: #0096ff;
+  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --elevation-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --elevation-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
+  --elevation-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.8);
+  --elevation-brand: 0 0 0 1px rgb(92 124 250 / 0.25), 0 4px 20px -2px rgb(92 124 250 / 0.3);
+  --elevation-brand-lg: 0 0 0 1px rgb(92 124 250 / 0.3), 0 8px 40px -4px rgb(92 124 250 / 0.4);
+}
+
+.dark {
+  /* Gradient aliases — both --brand-gradient-* (canonical, CLAUDE.md) and --gradient-brand-* (legacy) are emitted. */
+  --gradient-brand: var(--brand-gradient);
+  --gradient-brand-hover: var(--brand-gradient-reverse);
+  --gradient-brand-vertical: var(--brand-gradient-vertical);
+  --gradient-brand-reverse: var(--brand-gradient-reverse);
+  --gradient-brand-radial: var(--brand-gradient-radial);
+  --gradient-brand-glow: var(--brand-gradient-radial);
+  --gradient-section: var(--brand-gradient-vertical);
+  --gradient-glow: var(--brand-gradient-radial);
+}
+
+@supports (color: oklch(0 0 0)) {
+  .dark {
+    /* oklch values for modern engines (2024+); sRGB hsla() fallback above. */
+    --ds-gray-100: oklch(0.232 0 0);
+    --ds-gray-200: oklch(0.259 0 0);
+    --ds-gray-500: oklch(0.409 0 0);
+    --ds-gray-600: oklch(0.59 0 0);
+    --ds-gray-700: oklch(0.598 0 0);
+    --ds-gray-1000: oklch(0.94 0 0);
+    --ds-background-100: oklch(0.143 0 0);
+  }
+}
+
+/* ============================================
+   Tailwind CSS 4 Theme Configuration (auto-generated)
+   ============================================ */
+@theme inline {
+  /* Nebutra Brand Color Palette */
+  --color-nebutra-blue-50: var(--nebutra-blue-50);
+  --color-nebutra-blue-100: var(--nebutra-blue-100);
+  --color-nebutra-blue-200: var(--nebutra-blue-200);
+  --color-nebutra-blue-300: var(--nebutra-blue-300);
+  --color-nebutra-blue-400: var(--nebutra-blue-400);
+  --color-nebutra-blue-500: var(--nebutra-blue-500);
+  --color-nebutra-blue-600: var(--nebutra-blue-600);
+  --color-nebutra-blue-700: var(--nebutra-blue-700);
+  --color-nebutra-blue-800: var(--nebutra-blue-800);
+  --color-nebutra-blue-900: var(--nebutra-blue-900);
+  --color-nebutra-blue-950: var(--nebutra-blue-950);
+
+  --color-nebutra-cyan-50: var(--nebutra-cyan-50);
+  --color-nebutra-cyan-100: var(--nebutra-cyan-100);
+  --color-nebutra-cyan-200: var(--nebutra-cyan-200);
+  --color-nebutra-cyan-300: var(--nebutra-cyan-300);
+  --color-nebutra-cyan-400: var(--nebutra-cyan-400);
+  --color-nebutra-cyan-500: var(--nebutra-cyan-500);
+  --color-nebutra-cyan-600: var(--nebutra-cyan-600);
+  --color-nebutra-cyan-700: var(--nebutra-cyan-700);
+  --color-nebutra-cyan-800: var(--nebutra-cyan-800);
+  --color-nebutra-cyan-900: var(--nebutra-cyan-900);
+  --color-nebutra-cyan-950: var(--nebutra-cyan-950);
+
+  --color-nebutra-neutral-50: var(--nebutra-neutral-50);
+  --color-nebutra-neutral-100: var(--nebutra-neutral-100);
+  --color-nebutra-neutral-200: var(--nebutra-neutral-200);
+  --color-nebutra-neutral-300: var(--nebutra-neutral-300);
+  --color-nebutra-neutral-400: var(--nebutra-neutral-400);
+  --color-nebutra-neutral-500: var(--nebutra-neutral-500);
+  --color-nebutra-neutral-600: var(--nebutra-neutral-600);
+  --color-nebutra-neutral-700: var(--nebutra-neutral-700);
+  --color-nebutra-neutral-800: var(--nebutra-neutral-800);
+  --color-nebutra-neutral-900: var(--nebutra-neutral-900);
+  --color-nebutra-neutral-950: var(--nebutra-neutral-950);
+
+  /* Semantic Theme Colors */
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  /* Sidebar */
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* Brand aliases */
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-accent: var(--brand-accent);
+  --color-brand-tertiary: var(--brand-tertiary);
+
+  /* Chart colors */
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  /* 12-Step Functional Scales */
+  --color-neutral-1: var(--neutral-1);
+  --color-neutral-2: var(--neutral-2);
+  --color-neutral-3: var(--neutral-3);
+  --color-neutral-4: var(--neutral-4);
+  --color-neutral-5: var(--neutral-5);
+  --color-neutral-6: var(--neutral-6);
+  --color-neutral-7: var(--neutral-7);
+  --color-neutral-8: var(--neutral-8);
+  --color-neutral-9: var(--neutral-9);
+  --color-neutral-10: var(--neutral-10);
+  --color-neutral-11: var(--neutral-11);
+  --color-neutral-12: var(--neutral-12);
+
+  --color-blue-1: var(--blue-1);
+  --color-blue-2: var(--blue-2);
+  --color-blue-3: var(--blue-3);
+  --color-blue-4: var(--blue-4);
+  --color-blue-5: var(--blue-5);
+  --color-blue-6: var(--blue-6);
+  --color-blue-7: var(--blue-7);
+  --color-blue-8: var(--blue-8);
+  --color-blue-9: var(--blue-9);
+  --color-blue-10: var(--blue-10);
+  --color-blue-11: var(--blue-11);
+  --color-blue-12: var(--blue-12);
+
+  --color-cyan-1: var(--cyan-1);
+  --color-cyan-2: var(--cyan-2);
+  --color-cyan-3: var(--cyan-3);
+  --color-cyan-4: var(--cyan-4);
+  --color-cyan-5: var(--cyan-5);
+  --color-cyan-6: var(--cyan-6);
+  --color-cyan-7: var(--cyan-7);
+  --color-cyan-8: var(--cyan-8);
+  --color-cyan-9: var(--cyan-9);
+  --color-cyan-10: var(--cyan-10);
+  --color-cyan-11: var(--cyan-11);
+  --color-cyan-12: var(--cyan-12);
+
+  /* Geist DS color scale */
+  --color-blue-700: var(--ds-blue-700);
+  --color-blue-900: var(--ds-blue-900);
+  --color-red-200: var(--ds-red-200);
+  --color-red-700: var(--ds-red-700);
+  --color-red-900: var(--ds-red-900);
+  --color-amber-200: var(--ds-amber-200);
+  --color-amber-700: var(--ds-amber-700);
+  --color-amber-900: var(--ds-amber-900);
+  --color-green-200: var(--ds-green-200);
+  --color-green-700: var(--ds-green-700);
+  --color-green-900: var(--ds-green-900);
+  --color-teal-300: var(--ds-teal-300);
+  --color-teal-700: var(--ds-teal-700);
+  --color-teal-900: var(--ds-teal-900);
+  --color-purple-200: var(--ds-purple-200);
+  --color-purple-700: var(--ds-purple-700);
+  --color-purple-900: var(--ds-purple-900);
+  --color-pink-300: var(--ds-pink-300);
+  --color-pink-700: var(--ds-pink-700);
+  --color-pink-900: var(--ds-pink-900);
+  --color-gray-100: var(--ds-gray-100);
+  --color-gray-200: var(--ds-gray-200);
+  --color-gray-700: var(--ds-gray-700);
+  --color-gray-1000: var(--ds-gray-1000);
+  --color-trial-start: var(--ds-trial-start);
+  --color-trial-end: var(--ds-trial-end);
+  --color-turbo-start: var(--ds-turbo-start);
+  --color-turbo-end: var(--ds-turbo-end);
+  --color-geist-gray-100: var(--ds-gray-100);
+  --color-geist-gray-200: var(--ds-gray-200);
+  --color-geist-gray-500: var(--ds-gray-500);
+  --color-geist-gray-600: var(--ds-gray-600);
+  --color-geist-gray-700: var(--ds-gray-700);
+  --color-geist-gray-1000: var(--ds-gray-1000);
+  --color-geist-background-100: var(--ds-background-100);
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-xs: var(--elevation-xs);
+  --shadow-sm: var(--elevation-sm);
+  --shadow-md: var(--elevation-md);
+  --shadow-lg: var(--elevation-lg);
+  --shadow-xl: var(--elevation-xl);
+  --shadow-2xl: var(--elevation-2xl);
+  --shadow-brand: var(--elevation-brand);
+  --shadow-brand-lg: var(--elevation-brand-lg);
+
+  /* Motion — Easing curves */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* Motion — Durations (four-rail; see core.json:duration). Names denote intent, not relative speed. */
+  --duration-micro: 100ms;
+  --duration-flow: 200ms;
+  --duration-reveal: 300ms;
+  --duration-cinematic: 500ms;
+
+  /* Font family — Geist primary stack with CJK fallbacks */
+  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
+  --font-display: "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: "Geist", "Noto Sans SC", sans-serif;
+  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+}
+
+/* ============================================
+   Base Styles — non-token CSS that complements the design-tokens output.
+   This file is concatenated into styles.generated.css after the @theme block.
+   ============================================ */
+
+*,
+*::before,
+*::after {
+  /* Token-aware default border — resolves via cascade:
+     :root → light (hsl 240 5.9% 90% ≈ #e4e4e7)
+     .dark → dark  (hsl 0 0% 14.9%  ≈ #262626)
+     Previously hardcoded to the light value, which leaked a near-white border
+     into every element in dark mode regardless of component. See ADR 2026-05-11. */
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+:focus-visible {
+  outline: 2px solid hsl(var(--ring) / 0.5);
+  outline-offset: 2px;
+  border-radius: inherit;
+}
+
+::selection {
+  background-color: hsl(var(--primary) / 0.2);
+  color: hsl(var(--primary));
+}
+
+/* ============================================
+   Animation Utilities
+   ============================================ */
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* ============================================
+   Named Typography Utility Classes
+   Geist-style: size encoded in class name,
+   state variants as suffixes (-strong/-mono/-tabular)
+   ============================================ */
+
+@utility text-heading-72 {
+  font-family: var(--font-display);
+  font-size: 4.5rem;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  font-weight: 700;
+}
+
+@utility text-heading-64 {
+  font-family: var(--font-display);
+  font-size: 4rem;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  font-weight: 700;
+}
+
+@utility text-heading-56 {
+  font-family: var(--font-display);
+  font-size: 3.5rem;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+  font-weight: 700;
+}
+
+@utility text-heading-48 {
+  font-family: var(--font-display);
+  font-size: 3rem;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+
+@utility text-heading-40 {
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  font-weight: 700;
+}
+
+@utility text-heading-32 {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  font-weight: 600;
+}
+
+@utility text-heading-24 {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  font-weight: 600;
+}
+
+@utility text-heading-20 {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  font-weight: 600;
+}
+
+@utility text-heading-16 {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  font-weight: 600;
+}
+
+@utility text-heading-14 {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-button-16 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-button-14 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-button-12 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-20 {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-18 {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-16 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-14 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-13 {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-12 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-20-strong {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-label-18-strong {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-label-16-strong {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-label-14-strong {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-label-13-strong {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-label-12-strong {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  font-weight: 600;
+}
+
+@utility text-label-20-mono {
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-18-mono {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-16-mono {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-14-mono {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-13-mono {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+}
+
+@utility text-label-12-mono {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+}
+
+@utility text-label-20-tabular {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-label-18-tabular {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-label-16-tabular {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-label-14-tabular {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-label-13-tabular {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-label-12-tabular {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+@utility text-copy-24 {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 400;
+}
+
+@utility text-copy-20 {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 400;
+}
+
+@utility text-copy-18 {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-16 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-14 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-13 {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-24-strong {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 600;
+}
+
+@utility text-copy-20-strong {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 600;
+}
+
+@utility text-copy-18-strong {
+  font-family: var(--font-sans);
+  font-size: 1.125rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-copy-16-strong {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-copy-14-strong {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-copy-13-strong {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 600;
+}
+
+@utility text-copy-24-mono {
+  font-family: var(--font-mono);
+  font-size: 1.5rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 400;
+}
+
+@utility text-copy-20-mono {
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  line-height: 1.6;
+  letter-spacing: -0.005em;
+  font-weight: 400;
+}
+
+@utility text-copy-18-mono {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-16-mono {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  line-height: 1.6;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-14-mono {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility text-copy-13-mono {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+  font-weight: 400;
+}
+
+@utility font-cn {
+  font-family: var(--font-cn);
+  line-height: 1.75;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+/* ─── CJK Auto-Activation via :lang() ───────────────────────
+   When <html lang="zh|ja|ko"> is set by app layouts, body
+   automatically switches to the CJK font stack.
+   ─────────────────────────────────────────────────────────── */
+:is(html:lang(zh), html:lang(ja), html:lang(ko)) body {
+  font-family: var(--font-cn);
+  line-height: 1.75;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+:is(html:lang(zh), html:lang(ja), html:lang(ko)) :is(code, kbd, pre, samp) {
+  font-family: var(--font-mono);
+  word-break: normal;
+}
+
+/* ─── Reduced Motion ─────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    scroll-behavior: auto;
+  }
+}