/* Design tokens - hand-ported 1:1 from website/lib/theme/app_colors.dart,
   app_typography.dart, app_spacing.dart, responsive.dart. Keep in sync with
   those files; this is the same "hand-port across contexts" pattern that
   file already uses to mirror the mobile app. */
:root {
  --color-background: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFCF9;
  --color-primary: #C1602C;
  --color-on-primary: #FFF8F2;
  --color-text-primary: #2B2119;
  --color-text-secondary: #6E6053;
  --color-border: #E9DED0;
  --color-success: #4C7A5E;
  --color-warning: #A8690F;
  --color-error: #B13B27;
  --color-locked: #9C8F80;
  --color-shadow: rgba(43, 33, 25, 0.12);

  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --space-xxxxl: 96px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --max-content-width: 1120px;
  --max-prose-width: 720px;

  --breakpoint-mobile: 640px;
  --breakpoint-tablet: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #17130F;
    --color-surface: #201A14;
    --color-surface-elevated: #2A231C;
    --color-primary: #E08A4F;
    --color-on-primary: #211004;
    --color-text-primary: #F5ECE1;
    --color-text-secondary: #B7A897;
    --color-border: #3B3226;
    --color-success: #86C09B;
    --color-warning: #E2AC4E;
    --color-error: #E58971;
    --color-locked: #7C7264;
    --color-shadow: rgba(0, 0, 0, 0.4);
  }
}