/* GENERATED by packages/ui/scripts/build-tokens.ts from src/tokens/manifest.ts — do not edit. */

:root {
  --ground: #fffcf7;
  --surface: #ffffff;
  --sand: #f6efe4;
  --ink: #17161b;
  --ink-2: #57535f;
  --ink-3: #706b78;
  --line: #e8e0d4;
  --primary: #ff5c39;
  --primary-hover: #ef4a26;
  --on-primary: #17161b;
  --primary-subtle: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --accent-1: #0e7c7b;
  --on-accent-1: #ffffff;
  --accent-2: #ffc24b;
  --on-accent-2: #17161b;
  --accent-3: #7a59fc;
  --on-accent-3: #ffffff;
  --positive: #017776;
  --caution: #8f6300;
  --caution-fill: #ffc24b;
  --critical: #c8253f;
  --info: #6a4be0;
  --positive-subtle: color-mix(in srgb, var(--positive) 12%, var(--surface));
  --caution-subtle: color-mix(in srgb, var(--caution) 12%, var(--surface));
  --critical-subtle: color-mix(in srgb, var(--critical) 12%, var(--surface));
  --info-subtle: color-mix(in srgb, var(--info) 12%, var(--surface));
  --chart-1: var(--accent-1);
  --chart-2: var(--primary);
  --chart-3: var(--accent-3);
  --chart-4: #c18b06;
  --chart-muted: color-mix(in srgb, var(--ink-3) 35%, transparent);
  --chart-target: var(--ink-2);
  --chart-seq-1: color-mix(in srgb, var(--chart-1) 15%, var(--surface));
  --chart-seq-2: color-mix(in srgb, var(--chart-1) 35%, var(--surface));
  --chart-seq-3: color-mix(in srgb, var(--chart-1) 55%, var(--surface));
  --chart-seq-4: color-mix(in srgb, var(--chart-1) 75%, var(--surface));
  --chart-seq-5: var(--chart-1);
  --chart-div-neg: var(--critical);
  --chart-div-mid: var(--sand);
  --chart-div-pos: var(--positive);
  --chart-grid: var(--line);
  --chart-axis-label: var(--ink-3);
  --chart-bar-radius: 6px;
  --chart-bar-min: 12px;
  --chart-bar-max: 20px;
  --chart-line-width: 2.5px;
  --chart-area-top: 12%;
  --stage-0: var(--surface);
  --on-stage-0: var(--ink);
  --stage-1: var(--sand);
  --on-stage-1: var(--ink);
  --stage-2: var(--accent-2);
  --on-stage-2: var(--on-accent-2);
  --stage-3: var(--accent-1);
  --on-stage-3: var(--on-accent-1);
  --stage-4: var(--primary);
  --on-stage-4: var(--on-primary);
  --stage-5: var(--accent-3);
  --on-stage-5: var(--on-accent-3);
  --stage-6: var(--ink);
  --on-stage-6: var(--ground);
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans-stack: "Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono-stack: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 28px;
  --t-2xl: clamp(30px,3.6vw,46px);
  --t-3xl: clamp(40px,5.6vw,76px);
  --t-figure: clamp(30px,3vw,40px);
  --t-xs-lh: 1.5;
  --t-sm-lh: 1.55;
  --t-md-lh: 1.65;
  --t-lg-lh: 1.4;
  --t-xl-lh: 1.2;
  --t-2xl-lh: 1.1;
  --t-3xl-lh: 1.02;
  --t-figure-lh: 1;
  --t-lg-tracking: -0.02em;
  --t-xl-tracking: -0.04em;
  --t-2xl-tracking: -0.04em;
  --t-3xl-tracking: -0.05em;
  --t-figure-tracking: -0.045em;
  --wordmark-tracking: -0.04em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --body-size: var(--t-sm);
  --body-lh: var(--t-sm-lh);
  --mono-size: 13px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;
  --gutter: clamp(18px,4vw,44px);
  --container-max: 1280px;
  --grid-gap: var(--space-5);
  --card-pad: var(--space-5);
  --card-pad-dense: var(--space-4);
  --chart-inset: var(--space-2);
  --measure-prose: 64ch;
  --measure-lede: 48ch;
  --control-h-lg: 56px;
  --control-h-md: 44px;
  --control-h-sm: 36px;
  --control-h-participant: 48px;
  --chip-h: 28px;
  --row-h: 48px;
  --row-h-dense: 40px;
  --step-size: 40px;
  --touch-min: 44px;
  --touch-min-participant: 48px;
  --topbar-h: 64px;
  --bottom-tabs-h: 64px;
  --panel-w: 260px;
  --rail-w: 72px;
  --panel-inset: var(--space-4);
  --nav-pill-h: 44px;
  --drawer-w: 480px;
  --inspector-w: 380px;
  --canvas-min-h: 560px;
  --dialog-w-sm: 420px;
  --dialog-w-md: 560px;
  --dialog-w-lg: 760px;
  --menu-min-w: 220px;
  --popover-max-w: 360px;
  --tooltip-max-w: 280px;
  --sheet-max-h: 92dvh;
  --sheet-handle-w: 40px;
  --sheet-handle-h: 4px;
  --feature-min-h: 160px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --ring-sm: 48px;
  --ring-md: 72px;
  --ring-stroke: 8px;
  --badge-h: 20px;
  --logo-h: 32px;
  --logo-plate: #ffffff;
  --logo-plate-fill: transparent;
  --logo-plate-pad: 0px;
  --logo-light-display: inline-block;
  --logo-dark-display: none;
  --table-max-h: 640px;
  --empty-mark: 48px;
  --switch-w: 48px;
  --switch-h: 28px;
  --switch-thumb: 20px;
  --switch-travel: 20px;
  --r-check: 6px;
  --progress-h: 10px;
  --card-h-headline: 292px;
  --card-h-detail: 372px;
  --mini-step: 24px;
  --petal-size: 30px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --topbar-bg: color-mix(in srgb, var(--ground) 90%, transparent);
  --topbar-blur: 12px;
  --backdrop: rgba(23,22,27,.45);
  --backdrop-blur: 3px;
  --r-xs: 10px;
  --r-sm: 16px;
  --r-md: 20px;
  --r: 28px;
  --r-lg: 40px;
  --pill: 999px;
  --card-r: var(--r-md);
  --shadow-rest: 0 2px 4px rgba(23,22,27,.05);
  --shadow-raise: 0 6px 14px rgba(23,22,27,.06), 0 30px 60px -28px rgba(23,22,27,.4);
  --shadow-float: 0 12px 32px -12px rgba(23,22,27,.28);
  --border-1: 1px;
  --border-2: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-color: var(--ink);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease: ease;
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-enter: 260ms;
  --d-chart: 300ms;
  --d-reveal: 450ms;
  --d-crossfade: 900ms;
  --d-shimmer: 1.4s;
  --d-toast: 5s;
  --lift-button: -2px;
  --lift-card: -6px;
  --press: 1px;
  --rise-enter: 14px;
  --rise-reveal: 16px;
  --rise-route: 8px;
  --scale-enter: .98;
  --z-topbar: 30;
  --z-overlay: 40;
  --z-toast: 50;
  --z-tooltip: 60;
  color-scheme: light;
}

/* Light subtree (e.g. a light preview inside a dark page). */
[data-theme="light"] {
  --ground: #fffcf7;
  --surface: #ffffff;
  --sand: #f6efe4;
  --ink: #17161b;
  --ink-2: #57535f;
  --ink-3: #706b78;
  --line: #e8e0d4;
  --primary: #ff5c39;
  --primary-hover: #ef4a26;
  --on-primary: #17161b;
  --primary-subtle: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --accent-1: #0e7c7b;
  --on-accent-1: #ffffff;
  --accent-2: #ffc24b;
  --accent-3: #7a59fc;
  --on-accent-3: #ffffff;
  --positive: #017776;
  --caution: #8f6300;
  --caution-fill: #ffc24b;
  --critical: #c8253f;
  --info: #6a4be0;
  --positive-subtle: color-mix(in srgb, var(--positive) 12%, var(--surface));
  --caution-subtle: color-mix(in srgb, var(--caution) 12%, var(--surface));
  --critical-subtle: color-mix(in srgb, var(--critical) 12%, var(--surface));
  --info-subtle: color-mix(in srgb, var(--info) 12%, var(--surface));
  --chart-1: var(--accent-1);
  --chart-2: var(--primary);
  --chart-3: var(--accent-3);
  --chart-4: #c18b06;
  --chart-muted: color-mix(in srgb, var(--ink-3) 35%, transparent);
  --chart-target: var(--ink-2);
  --chart-seq-1: color-mix(in srgb, var(--chart-1) 15%, var(--surface));
  --chart-seq-2: color-mix(in srgb, var(--chart-1) 35%, var(--surface));
  --chart-seq-3: color-mix(in srgb, var(--chart-1) 55%, var(--surface));
  --chart-seq-4: color-mix(in srgb, var(--chart-1) 75%, var(--surface));
  --chart-seq-5: var(--chart-1);
  --chart-div-neg: var(--critical);
  --chart-div-mid: var(--sand);
  --chart-div-pos: var(--positive);
  --chart-grid: var(--line);
  --chart-axis-label: var(--ink-3);
  --stage-0: var(--surface);
  --on-stage-0: var(--ink);
  --stage-1: var(--sand);
  --on-stage-1: var(--ink);
  --stage-2: var(--accent-2);
  --stage-3: var(--accent-1);
  --on-stage-3: var(--on-accent-1);
  --stage-4: var(--primary);
  --on-stage-4: var(--on-primary);
  --stage-5: var(--accent-3);
  --on-stage-5: var(--on-accent-3);
  --stage-6: var(--ink);
  --on-stage-6: var(--ground);
  --logo-plate-fill: transparent;
  --logo-plate-pad: 0px;
  --logo-light-display: inline-block;
  --logo-dark-display: none;
  --topbar-bg: color-mix(in srgb, var(--ground) 90%, transparent);
  --backdrop: rgba(23,22,27,.45);
  --shadow-rest: 0 2px 4px rgba(23,22,27,.05);
  --shadow-raise: 0 6px 14px rgba(23,22,27,.06), 0 30px 60px -28px rgba(23,22,27,.4);
  --shadow-float: 0 12px 32px -12px rgba(23,22,27,.28);
  --focus-color: var(--ink);
  color-scheme: light;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  --ground: #16130f;
  --surface: #1f1b16;
  --sand: #241f19;
  --ink: #f6f1e9;
  --ink-2: #b5ada2;
  --ink-3: #8e867b;
  --line: #322b23;
  --primary: #ff7355;
  --primary-hover: #ff8f76;
  --on-primary: #1a0c07;
  --primary-subtle: color-mix(in srgb, var(--primary) 18%, var(--surface));
  --accent-1: #2ba9a7;
  --on-accent-1: #10100f;
  --accent-2: #ffcf6b;
  --accent-3: #9c84ff;
  --on-accent-3: #10100f;
  --positive: #2ba9a7;
  --caution: #ffcf6b;
  --caution-fill: #ffcf6b;
  --critical: #fb6b9a;
  --info: #9e87ff;
  --positive-subtle: color-mix(in srgb, var(--positive) 18%, var(--surface));
  --caution-subtle: color-mix(in srgb, var(--caution) 18%, var(--surface));
  --critical-subtle: color-mix(in srgb, var(--critical) 18%, var(--surface));
  --info-subtle: color-mix(in srgb, var(--info) 18%, var(--surface));
  --chart-1: var(--accent-1);
  --chart-2: var(--primary);
  --chart-3: var(--accent-3);
  --chart-4: #ffcf6b;
  --chart-muted: color-mix(in srgb, var(--ink-3) 35%, transparent);
  --chart-target: var(--ink-2);
  --chart-seq-1: color-mix(in srgb, var(--chart-1) 15%, var(--surface));
  --chart-seq-2: color-mix(in srgb, var(--chart-1) 35%, var(--surface));
  --chart-seq-3: color-mix(in srgb, var(--chart-1) 55%, var(--surface));
  --chart-seq-4: color-mix(in srgb, var(--chart-1) 75%, var(--surface));
  --chart-seq-5: var(--chart-1);
  --chart-div-neg: var(--critical);
  --chart-div-mid: var(--sand);
  --chart-div-pos: var(--positive);
  --chart-grid: var(--line);
  --chart-axis-label: var(--ink-3);
  --stage-0: var(--surface);
  --on-stage-0: var(--ink);
  --stage-1: var(--sand);
  --on-stage-1: var(--ink);
  --stage-2: var(--accent-2);
  --stage-3: var(--accent-1);
  --on-stage-3: var(--on-accent-1);
  --stage-4: var(--primary);
  --on-stage-4: var(--on-primary);
  --stage-5: var(--accent-3);
  --on-stage-5: var(--on-accent-3);
  --stage-6: var(--ink);
  --on-stage-6: var(--ground);
  --logo-plate-fill: var(--logo-plate);
  --logo-plate-pad: 4px 8px;
  --logo-light-display: none;
  --logo-dark-display: inline-block;
  --topbar-bg: color-mix(in srgb, var(--ground) 90%, transparent);
  --backdrop: rgba(0,0,0,.6);
  --shadow-rest: 0 2px 4px rgba(0,0,0,.5);
  --shadow-raise: 0 6px 14px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.95);
  --shadow-float: 0 12px 32px -12px rgba(0,0,0,.8);
  --focus-color: var(--ink);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #16130f;
    --surface: #1f1b16;
    --sand: #241f19;
    --ink: #f6f1e9;
    --ink-2: #b5ada2;
    --ink-3: #8e867b;
    --line: #322b23;
    --primary: #ff7355;
    --primary-hover: #ff8f76;
    --on-primary: #1a0c07;
    --primary-subtle: color-mix(in srgb, var(--primary) 18%, var(--surface));
    --accent-1: #2ba9a7;
    --on-accent-1: #10100f;
    --accent-2: #ffcf6b;
    --accent-3: #9c84ff;
    --on-accent-3: #10100f;
    --positive: #2ba9a7;
    --caution: #ffcf6b;
    --caution-fill: #ffcf6b;
    --critical: #fb6b9a;
    --info: #9e87ff;
    --positive-subtle: color-mix(in srgb, var(--positive) 18%, var(--surface));
    --caution-subtle: color-mix(in srgb, var(--caution) 18%, var(--surface));
    --critical-subtle: color-mix(in srgb, var(--critical) 18%, var(--surface));
    --info-subtle: color-mix(in srgb, var(--info) 18%, var(--surface));
    --chart-1: var(--accent-1);
    --chart-2: var(--primary);
    --chart-3: var(--accent-3);
    --chart-4: #ffcf6b;
    --chart-muted: color-mix(in srgb, var(--ink-3) 35%, transparent);
    --chart-target: var(--ink-2);
    --chart-seq-1: color-mix(in srgb, var(--chart-1) 15%, var(--surface));
    --chart-seq-2: color-mix(in srgb, var(--chart-1) 35%, var(--surface));
    --chart-seq-3: color-mix(in srgb, var(--chart-1) 55%, var(--surface));
    --chart-seq-4: color-mix(in srgb, var(--chart-1) 75%, var(--surface));
    --chart-seq-5: var(--chart-1);
    --chart-div-neg: var(--critical);
    --chart-div-mid: var(--sand);
    --chart-div-pos: var(--positive);
    --chart-grid: var(--line);
    --chart-axis-label: var(--ink-3);
    --stage-0: var(--surface);
    --on-stage-0: var(--ink);
    --stage-1: var(--sand);
    --on-stage-1: var(--ink);
    --stage-2: var(--accent-2);
    --stage-3: var(--accent-1);
    --on-stage-3: var(--on-accent-1);
    --stage-4: var(--primary);
    --on-stage-4: var(--on-primary);
    --stage-5: var(--accent-3);
    --on-stage-5: var(--on-accent-3);
    --stage-6: var(--ink);
    --on-stage-6: var(--ground);
    --logo-plate-fill: var(--logo-plate);
    --logo-plate-pad: 4px 8px;
    --logo-light-display: none;
    --logo-dark-display: inline-block;
    --topbar-bg: color-mix(in srgb, var(--ground) 90%, transparent);
    --backdrop: rgba(0,0,0,.6);
    --shadow-rest: 0 2px 4px rgba(0,0,0,.5);
    --shadow-raise: 0 6px 14px rgba(0,0,0,.5), 0 30px 60px -28px rgba(0,0,0,.95);
    --shadow-float: 0 12px 32px -12px rgba(0,0,0,.8);
    --focus-color: var(--ink);
    color-scheme: dark;
  }
}

@media (max-width: 639px) {
  :root {
    --topbar-h: 56px;
    --card-h-headline: 276px;
    --card-h-detail: 356px;
    --r-md: 18px;
    --r: 22px;
    --r-lg: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-base: 0ms;
    --d-enter: 120ms;
    --d-chart: 0ms;
    --d-reveal: 120ms;
    --d-crossfade: 0ms;
    --d-shimmer: 0s;
    --lift-button: 0px;
    --lift-card: 0px;
    --press: 0px;
    --rise-enter: 0px;
    --rise-reveal: 0px;
    --rise-route: 0px;
    --scale-enter: 1;
  }
}

/* Explicit override (gallery toolbar, tests). */
:root[data-reduced-motion="reduce"] {
  --d-base: 0ms;
  --d-enter: 120ms;
  --d-chart: 0ms;
  --d-reveal: 120ms;
  --d-crossfade: 0ms;
  --d-shimmer: 0s;
  --lift-button: 0px;
  --lift-card: 0px;
  --press: 0px;
  --rise-enter: 0px;
  --rise-reveal: 0px;
  --rise-route: 0px;
  --scale-enter: 1;
}

/* Website sizing (FR-033). */
[data-surface="site"] {
  --body-size: var(--t-md);
  --body-lh: var(--t-md-lh);
  --chip-h: 34px;
  --step-size: 72px;
  --feature-min-h: 300px;
  --card-r: var(--r);
}