/* Generated by scripts/build.mjs from tokens/tokens.json. Do not edit. */

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --ot-bg: oklch(8% 0.015 300);
  --ot-bg-elevated: oklch(14% 0.02 300);
  --ot-surface: oklch(17% 0.025 300);
  --ot-surface-raised: oklch(22% 0.03 300);
  --ot-surface-hover: oklch(26% 0.035 300);
  --ot-border: oklch(28% 0.04 300);
  --ot-border-subtle: oklch(20% 0.025 300);
  --ot-text-primary: oklch(95% 0.005 60);
  --ot-text-secondary: oklch(72% 0.01 60);
  --ot-text-tertiary: oklch(61% 0.015 300);
  --ot-text-muted: oklch(42% 0.015 300);
  --ot-brand-coral: oklch(72% 0.18 30);
  --ot-brand-warm: oklch(58% 0.14 25);
  --ot-brand-violet: oklch(48% 0.08 300);
  --ot-brand-light: oklch(78% 0.1 30);
  --ot-brand-dark: oklch(38% 0.08 25);
  --ot-brand-bg: oklch(16% 0.04 25);
  --ot-accent-block: oklch(18% 0.05 20);
  --ot-accent-block-text: oklch(96% 0.005 60);
  --ot-accent-block-sub: oklch(78% 0.03 30);
  --ot-divider: oklch(24% 0.025 300);
  --ot-success: oklch(72% 0.14 155);
  --ot-warning: oklch(80% 0.14 80);
  --ot-danger: oklch(68% 0.18 345);
  --ot-info: oklch(72% 0.1 240);
  --ot-success-bg: oklch(20% 0.04 155);
  --ot-warning-bg: oklch(22% 0.04 80);
  --ot-danger-bg: oklch(20% 0.05 345);
  --ot-info-bg: oklch(20% 0.04 240);
  --ot-brand-action: oklch(72% 0.18 30);
}

[data-theme="light"] {
  color-scheme: light;
  --ot-bg: oklch(97.5% 0.006 90);
  --ot-bg-elevated: oklch(92% 0.012 85);
  --ot-surface: oklch(95% 0.008 88);
  --ot-surface-raised: oklch(90% 0.015 85);
  --ot-surface-hover: oklch(86% 0.02 85);
  --ot-border: oklch(78% 0.025 85);
  --ot-border-subtle: oklch(86% 0.015 85);
  --ot-text-primary: oklch(14% 0.02 85);
  --ot-text-secondary: oklch(32% 0.03 85);
  --ot-text-tertiary: oklch(48% 0.025 85);
  --ot-text-muted: oklch(60% 0.02 85);
  --ot-brand-coral: oklch(56% 0.18 30);
  --ot-brand-warm: oklch(48% 0.15 25);
  --ot-brand-violet: oklch(38% 0.08 300);
  --ot-brand-light: oklch(62% 0.12 30);
  --ot-brand-dark: oklch(32% 0.08 25);
  --ot-brand-bg: oklch(90% 0.04 25);
  --ot-accent-block: oklch(88% 0.05 25);
  --ot-accent-block-text: oklch(16% 0.03 25);
  --ot-accent-block-sub: oklch(35% 0.05 25);
  --ot-divider: oklch(82% 0.015 85);
  --ot-success: oklch(45% 0.12 155);
  --ot-warning: oklch(50% 0.12 70);
  --ot-danger: oklch(50% 0.17 345);
  --ot-info: oklch(45% 0.1 240);
  --ot-success-bg: oklch(93% 0.04 155);
  --ot-warning-bg: oklch(94% 0.05 85);
  --ot-danger-bg: oklch(93% 0.04 345);
  --ot-info-bg: oklch(93% 0.03 240);
  --ot-brand-action: oklch(55% 0.21 29);
}

:root {
  --ot-font-display: 'Sora', system-ui, sans-serif;
  --ot-font-body: 'Work Sans', system-ui, sans-serif;
  --ot-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --ot-text-display: 5.5rem;
  --ot-text-h1: 3.5rem;
  --ot-text-h2: 2.25rem;
  --ot-text-h3: 1.5rem;
  --ot-text-h4: 1.25rem;
  --ot-text-body: 1rem;
  --ot-text-body-sm: 0.875rem;
  --ot-text-caption: 0.75rem;
  --ot-space-1: 0.25rem;
  --ot-space-2: 0.5rem;
  --ot-space-3: 0.75rem;
  --ot-space-4: 1rem;
  --ot-space-6: 1.5rem;
  --ot-space-8: 2rem;
  --ot-space-10: 2.5rem;
  --ot-space-12: 3rem;
  --ot-space-16: 4rem;
  --ot-space-20: 5rem;
  --ot-space-24: 6rem;
  --ot-space-32: 8rem;
  --ot-radius-sm: 0.25rem;
  --ot-radius-md: 0.5rem;
  --ot-radius-lg: 0.75rem;
  --ot-radius-card: 1rem;
  --ot-radius-pill: 9999px;
  --ot-max-width: 1080px;
  --ot-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ot-duration-fast: 200ms;
  --ot-duration-base: 400ms;
  --ot-duration-reveal: 800ms;
  --ot-duration-counter: 2000ms;
  --ot-stagger: 80ms;
  --ot-reveal-distance: 40px;
}

@media (max-width: 768px) {
  :root {
    --ot-text-display: 3rem;
    --ot-text-h1: 2.25rem;
    --ot-text-h2: 1.625rem;
    --ot-text-h3: 1.375rem;
    --ot-text-h4: 1.1875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ot-duration-fast: 0ms;
    --ot-duration-base: 0ms;
    --ot-duration-reveal: 0ms;
    --ot-duration-counter: 0ms;
    --ot-stagger: 0ms;
    --ot-reveal-distance: 0px;
  }
}

:root,
[data-theme="dark"] {
  --background: var(--ot-bg);
  --foreground: var(--ot-text-primary);
  --card: var(--ot-surface);
  --card-foreground: var(--ot-text-primary);
  --popover: var(--ot-surface-raised);
  --popover-foreground: var(--ot-text-primary);
  --primary: var(--ot-brand-action);
  --primary-foreground: var(--ot-bg);
  --secondary: var(--ot-surface-raised);
  --secondary-foreground: var(--ot-text-primary);
  --muted: var(--ot-bg-elevated);
  --muted-foreground: var(--ot-text-secondary);
  --accent: var(--ot-surface-hover);
  --accent-foreground: var(--ot-text-primary);
  --destructive: var(--ot-danger);
  --border: var(--ot-border-subtle);
  --input: var(--ot-border);
  --ring: var(--ot-brand-action);
  --product-accent: var(--ot-brand-coral);
  --chart-1: var(--ot-brand-coral);
  --chart-2: var(--ot-info);
  --chart-3: var(--ot-success);
  --chart-4: var(--ot-warning);
  --chart-5: var(--ot-brand-violet);
  --radius: var(--ot-radius-lg);
}

[data-theme="light"] {
  --background: var(--ot-bg);
  --foreground: var(--ot-text-primary);
  --card: var(--ot-surface);
  --card-foreground: var(--ot-text-primary);
  --popover: var(--ot-surface-raised);
  --popover-foreground: var(--ot-text-primary);
  --primary: var(--ot-brand-action);
  --primary-foreground: var(--ot-bg);
  --secondary: var(--ot-surface-raised);
  --secondary-foreground: var(--ot-text-primary);
  --muted: var(--ot-bg-elevated);
  --muted-foreground: var(--ot-text-secondary);
  --accent: var(--ot-surface-hover);
  --accent-foreground: var(--ot-text-primary);
  --destructive: var(--ot-danger);
  --border: var(--ot-border-subtle);
  --input: var(--ot-border);
  --ring: var(--ot-brand-action);
  --product-accent: var(--ot-brand-coral);
  --chart-1: var(--ot-brand-coral);
  --chart-2: var(--ot-info);
  --chart-3: var(--ot-success);
  --chart-4: var(--ot-warning);
  --chart-5: var(--ot-brand-violet);
}