/* Jetons de design. Source : replica/design/tokens.json. Les composants n'utilisent que ces variables. */
:root {
  --bg: #ffffff;
  --surface: #f5f2ea;
  --workspace: #e7e3d8;
  --border: #e2ded8;
  --border-input: #857d73;
  --text: #1a1714;
  --text-muted: #5f574e;
  --accent: #1f7a4d;
  --accent-soft: #e2f1e8;
  --on-accent: #ffffff;
  --danger: #b3261e;
  --success: #2b6cb0;
  --present-bg: #0c0b0a;
  --present-fg: #f5f2ea;
  --scrim: rgba(12, 11, 10, .72);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-display: 40px;

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

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(26, 23, 20, .06), 0 1px 3px rgba(26, 23, 20, .10);
  --shadow-pop: 0 12px 32px rgba(26, 23, 20, .18);

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

  --rail-w: 76px;
  --panel-w: 264px;
  --hit: 36px;
  --line: 1px;
  --focus: 3px;
}
