/*
 * Design tokens — Swiss Utility × Coffre Classique.
 * Single source of truth for colors, spacing, radius, typography, motion.
 * Every component references these via var(--token) — never raw hex.
 */

:root {
  /* Colors — warm paper mode (default) */
  --color-bg:           #FAF7F2;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #FDFCFA;
  --color-border:       #E8E2D6;
  --color-border-strong:#D4C9B4;
  --color-muted:        #6B5B47;
  --color-fg:           #1A1A1A;
  --color-accent:       #8B5A3C;
  --color-accent-hover: #7A4D31;
  --color-destructive:  #C94F4F;
  --color-success:      #4F8E5A;

  /* Typography */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  /* Brand display face — Fraunces variable. Italic carries the wordmark and
     emphasis-in-heading; upright is reserved for rare large display headings.
     Tracks the marketing brand (see marketing/src/styles/tokens.css). */
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  40px;
  --text-4xl:  56px;  /* display — rare in-app, parity with marketing */
  --text-5xl:  72px;  /* display — marketing hero scale */

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.8;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Spacing — 4/8 scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08);
  --shadow-lg: 0 16px 36px rgba(26, 26, 26, 0.14);

  /* Motion */
  --motion-fast:   120ms;
  --motion-normal: 180ms;
  --motion-slow:   280ms;
  --easing-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark mode — ships as a theme. Flipped at root so every token cascades. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #0F0D0A;
    --color-surface:      #1A1612;
    --color-surface-2:    #211C17;
    --color-border:       #2A241E;
    --color-border-strong:#3A332A;
    --color-muted:        #A99076;
    --color-fg:           #F5EFE4;
    --color-accent:       #D4915C;
    --color-accent-hover: #E4A472;
    --color-destructive:  #E57373;
    --color-success:      #7FB389;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark-mode override — `<html data-theme="dark">` forces dark regardless of OS. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:           #0F0D0A;
  --color-surface:      #1A1612;
  --color-surface-2:    #211C17;
  --color-border:       #2A241E;
  --color-border-strong:#3A332A;
  --color-muted:        #A99076;
  --color-fg:           #F5EFE4;
  --color-accent:       #D4915C;
  --color-accent-hover: #E4A472;
  --color-destructive:  #E57373;
  --color-success:      #7FB389;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* prefers-reduced-motion — zero-out our transitions respectfully. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}