/* Generated by scripts/site/build.ts from src/ui/tokens.css — do not edit by hand. */
/* Colour values are mirrored in tokens.ts for the contrast tests. */
:root {
  color-scheme: light;
  --bg-base: #fff7f0;
  --halo-strength: 35%;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff;
  --surface-blur: blur(24px) saturate(180%);
  --text-primary: #2e2a3b;
  --text-secondary: #5f5870;
  --action: #6246ea;
  --action-text: #ffffff;
  --meter-track: rgba(46, 42, 59, 0.1);
  --success: #23845a;
  --hairline: rgba(46, 42, 59, 0.08);
  --shadow-soft: 0 6px 20px rgba(46, 42, 59, 0.1);
  --dim: rgba(30, 27, 46, 1);

  --chip-mint: #bff0da;
  --chip-lavender: #e4dcff;
  --chip-peach: #ffdccb;
  --chip-butter: #fff1a8;
  --chip-sky: #cdebff;

  --skin-tint: #ffc7d6;
  --skin-halo: #ffe3ea;

  --font-rounded: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --type-large-title: 800 2.125rem/1.1 var(--font-rounded);
  --type-title: 700 1.375rem/1.2 var(--font-rounded);
  --type-headline: 650 1.0625rem/1.3 var(--font-rounded);
  --type-body: 400 1.0625rem/1.45 var(--font-rounded);
  --type-caption: 500 0.8125rem/1.35 var(--font-rounded);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-card: 16px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  --z-canvas: 0;
  --z-hud: 10;
  --z-dim: 19;
  --z-sheet: 20;
  --z-gate: 30;
  --z-toast: 40;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
  color-scheme: dark;
  --bg-base: #1e1b2e;
  --halo-strength: 18%;
  --surface: rgba(44, 40, 66, 0.72);
  --surface-solid: #2c2842;
  --text-primary: #f4f1fa;
  --text-secondary: #b9b2cc;
  --action: #b3a4ff;
  --action-text: #1e1b2e;
  --meter-track: rgba(244, 241, 250, 0.12);
  --success: #7ddba9;
  --hairline: rgba(244, 241, 250, 0.08);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.3);
  --dim: rgba(8, 6, 16, 1);
  --chip-mint: rgba(191, 240, 218, 0.6);
  --chip-lavender: rgba(228, 220, 255, 0.6);
  --chip-peach: rgba(255, 220, 203, 0.6);
  --chip-butter: rgba(255, 241, 168, 0.6);
  --chip-sky: rgba(205, 235, 255, 0.6);
}
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface: var(--surface-solid);
    --surface-blur: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --surface: var(--surface-solid);
    --surface-blur: none;
    --hairline: var(--text-secondary);
  }
}