styles.css

/* 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;
  --breakpoint-xs: 26.25rem; /** 420px — narrow-phone grid flip */
  --breakpoint-tight: 67.5rem; /** 1080px — dense dashboard header horizontal */
  --breakpoint-shell: 73.75rem; /** 1180px — three-pane shell threshold */
  --breakpoint-3xl: 112.5rem; /** 1800px — 4K / Studio Display friendliness */
  --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: var(--font-geist-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: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, 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-start: #2f5bff; /** Product action gradient start. Brighter than the locked VI blue while keeping white text contrast above WCAG AA. */
  --brand-gradient-end: #047c9a; /** Product action gradient end. Cyan-blue instead of green so compact CTAs stay crisp and luminous. */
  --brand-gradient: linear-gradient(135deg, #2f5bff 0%, #047c9a 100%); /** UI brand gradient for product actions — cleaner blue-to-cyan, calibrated for white-text contrast on compact controls. */
  --brand-gradient-reverse: linear-gradient(135deg, #047c9a 0%, #2f5bff 100%);
  --brand-gradient-vertical: linear-gradient(180deg, #2f5bff 0%, #047c9a 100%);
  --brand-gradient-radial: radial-gradient(circle, #047c9a 0%, #2f5bff 100%);
  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
  --brand-gradient-logo-reverse: linear-gradient(135deg, #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-brand-logo: var(--brand-gradient-logo);
  --gradient-brand-logo-reverse: var(--brand-gradient-logo-reverse);
  --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;
  --breakpoint-xs: 26.25rem; /** 420px — narrow-phone grid flip */
  --breakpoint-tight: 67.5rem; /** 1080px — dense dashboard header horizontal */
  --breakpoint-shell: 73.75rem; /** 1180px — three-pane shell threshold */
  --breakpoint-3xl: 112.5rem; /** 1800px — 4K / Studio Display friendliness */
  --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: var(--font-geist-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: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, 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-start: #2f5bff; /** Product action gradient start. Brighter than the locked VI blue while keeping white text contrast above WCAG AA. */
  --brand-gradient-end: #047c9a; /** Product action gradient end. Cyan-blue instead of green so compact CTAs stay crisp and luminous. */
  --brand-gradient: linear-gradient(135deg, #2f5bff 0%, #047c9a 100%); /** UI brand gradient for product actions — cleaner blue-to-cyan, calibrated for white-text contrast on compact controls. */
  --brand-gradient-reverse: linear-gradient(135deg, #047c9a 0%, #2f5bff 100%);
  --brand-gradient-vertical: linear-gradient(180deg, #2f5bff 0%, #047c9a 100%);
  --brand-gradient-radial: radial-gradient(circle, #047c9a 0%, #2f5bff 100%);
  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
  --brand-gradient-logo-reverse: linear-gradient(135deg, #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 14% 9%;
  --foreground: 210 18% 96%;
  --card: 222 12% 13%;
  --card-foreground: 210 18% 96%;
  --popover: 222 12% 13%;
  --popover-foreground: 210 18% 96%;
  --primary: 228 90% 72%;
  --primary-foreground: 222 14% 9%;
  --secondary: 222 10% 18%;
  --secondary-foreground: 210 18% 96%;
  --muted: 222 10% 17%;
  --muted-foreground: 220 8% 65%;
  --accent: 228 38% 22%;
  --accent-foreground: 228 95% 80%;
  --destructive: 0 63% 38%;
  --destructive-foreground: 210 18% 96%;
  --success: 142 60% 42%;
  --success-foreground: 222 14% 9%;
  --warning: 38 80% 52%;
  --warning-foreground: 222 14% 9%;
  --info: 228 95% 72%;
  --info-foreground: 222 14% 9%;
  --border: 220 8% 22%;
  --input: 220 8% 22%;
  --ring: 0 0% 88%; /** Focus ring (dark mode) — neutral light gray. Mirrors light-mode neutral foreground choice. */
  --sidebar: 222 16% 8%;
  --sidebar-foreground: 210 18% 94%;
  --sidebar-primary: 228 95% 72%;
  --sidebar-primary-foreground: 222 14% 9%;
  --sidebar-accent: 228 38% 22%;
  --sidebar-accent-foreground: 228 95% 80%;
  --sidebar-border: 220 8% 18%;
  --sidebar-ring: 228 95% 72%;
  --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-brand-logo: var(--brand-gradient-logo);
  --gradient-brand-logo-reverse: var(--brand-gradient-logo-reverse);
  --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: var(--font-geist-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: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ============================================
   Base Styles — non-token CSS that complements the design-tokens output.
   This file is concatenated into styles.generated.css after the @theme block.
   ============================================ */

/* ─── Edge tokens (2026-05 perf governance) ─────────────────
   Pre-computed alpha values for borders / hairlines / outer glows.
   Replaces ~70 runtime `color-mix(foreground, transparent N%)` calls per
   page that re-evaluated on every paint. Mode-aware via CSS cascade.
   Lives in static/ so it survives Style Dictionary rebuilds.
   ─────────────────────────────────────────────────────────── */
:root {
  --edge-faint: rgb(0 0 0 / 0.04);
  --edge-soft: rgb(0 0 0 / 0.07);
  --edge-medium: rgb(0 0 0 / 0.12);
  --halo-faint: rgb(0 0 0 / 0.03);
}
.dark {
  --edge-faint: rgb(255 255 255 / 0.04);
  --edge-soft: rgb(255 255 255 / 0.06);
  --edge-medium: rgb(255 255 255 / 0.1);
  --halo-faint: rgb(255 255 255 / 0.03);
}

@layer base {
  *,
  *::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.

       Keep this in Tailwind's base layer so component utilities such as
       border-r-transparent can override it. */
    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:not(
    :where(input, textarea, select, [cmdk-input], [role="textbox"], [contenteditable="true"])
  ) {
  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 ─────────────────────────────────────── */
/* Honors OS preference EXCEPT for functional progress indicators
 * (spinners / pulses / pings). Per WCAG 2.3.3, those are excluded
 * from the "animation from interactions" reduction requirement. */
@media (prefers-reduced-motion: reduce) {
  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping),
  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping)::before,
  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping)::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}