/* =============================================================
 * #abō — Design tokens
 * ============================================================= */

:root {
  /* Signature BoOW */
  --boow: #F85558;
  --boow-dark: #D93B3E;
  --boow-soft: #FF8285;
  --boow-faint: rgba(248, 85, 88, 0.08);
  --boow-shadow: rgba(248, 85, 88, 0.20);

  /* Profondeur */
  --nuit: #1A2845;
  --nuit-deep: #0E1729;
  --nuit-soft: #374366;
  --nuit-fade: rgba(26, 40, 69, 0.6);

  /* Fonds chauds */
  --ivoire: #F5EFE0;
  --ivoire-pure: #FAF6EA;
  --ivoire-deep: #EFE7D2;
  --sable: #ECDDCB;
  --sable-deep: #D9C5A9;

  /* Accents naturels */
  --mousse: #1A2845;
  --mousse-soft: #374366;
  --mousse-faint: rgba(26, 40, 69, 0.08);
  --encre: #1A1A1A;

  /* Lignes */
  --line: rgba(26, 26, 26, 0.08);
  --line-strong: rgba(26, 26, 26, 0.16);
  --line-soft: rgba(26, 26, 26, 0.04);
  --line-light: rgba(245, 239, 224, 0.16);

  /* Etats */
  --success: var(--boow);
  --warning: #C97D1F;
  --danger: var(--boow);

  /* Typographie */
  --font-display: "Unbounded", "Impact", "Arial Black", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", monospace;

  /* Tailles fluides */
  --fs-xxs: 10px;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: clamp(28px, 6vw, 32px);
  --fs-3xl: clamp(36px, 9vw, 44px);
  --fs-4xl: clamp(48px, 12vw, 64px);
  --fs-5xl: clamp(64px, 18vw, 88px);
  --fs-display: clamp(72px, 22vw, 108px);

  /* Line heights */
  --lh-tight: 0.9;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-display: -0.045em;
  --ls-heading: -0.02em;
  --ls-body: 0;
  --ls-mono: 0.04em;
  --ls-label: 0.18em;

  /* Espacement */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --page-pad: 20px;
  --page-pad-lg: 24px;
  --tap-min: 44px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(26, 40, 69, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(26, 40, 69, 0.08), 0 1px 2px rgba(26, 40, 69, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(26, 40, 69, 0.12), 0 2px 6px -1px rgba(26, 40, 69, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(26, 40, 69, 0.20), 0 8px 16px -4px rgba(26, 40, 69, 0.08);
  --shadow-xl: 0 30px 60px -15px rgba(26, 40, 69, 0.30), 0 12px 24px -6px rgba(26, 40, 69, 0.12);
  --shadow-boow: 0 8px 24px -6px var(--boow-shadow);
  --shadow-inner: inset 0 1px 2px rgba(26, 40, 69, 0.06);

  /* Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Durations */
  --d-instant: 100ms;
  --d-fast: 180ms;
  --d-base: 280ms;
  --d-slow: 480ms;
  --d-slower: 720ms;

  /* Z-index */
  --z-base: 1;
  --z-floating: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-modal-top: 2000;
  --z-toast: 10000;
}