/* Jetons de design. Source : replica/design/tokens.json (clair) et tokens.dark.json (sombre).
   Les composants n'utilisent que ces variables. */
:root {
  color-scheme: light dark;

  --bg: #f4f1ea;
  --surface: #ffffff;
  --surface-best: #e1f0ea;
  --border: #ddd7ca;
  --border-input: #7d776a;
  --text: #171a18;
  --text-muted: #55584e;
  --accent: #0c5f58;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --success: #1b6e3c;
  --warning: #7a4f00;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --t-xs: 500 12px/16px var(--font);
  --t-sm: 400 14px/20px var(--font);
  --t-base: 400 16px/24px var(--font);
  --t-lg: 650 20px/26px var(--font);
  --t-xl: 700 28px/32px var(--font);

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(23, 26, 24, .05), 0 2px 8px rgba(23, 26, 24, .06);
  --shadow-pop: 0 12px 32px rgba(23, 26, 24, .18);

  --fast: 120ms;
  --base: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1312;
    --surface: #18201e;
    --surface-best: #163029;
    --border: #2b3532;
    --border-input: #7f8c88;
    --text: #eef2ef;
    --text-muted: #a3ada8;
    --accent: #5fd3bf;
    --on-accent: #05211d;
    --danger: #ff8a80;
    --success: #6fd08c;
    --warning: #f2b84b;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  }
}