/* Design system « Cockpit nuit » — jetons (couleurs, typo, espacements, rayons, ombres, mouvements).
   Sombre par défaut (identité du produit) ; un thème clair est fourni pour l'accessibilité. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2") format("woff2-variations"), url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Couleurs */
  --bg: #070c18;
  --bg-2: #0a1222;
  --surface: #0f1a2e;
  --surface-2: #142239;
  --surface-3: #1a2b47;
  --line: #1d2c47;
  --line-2: #2a3d60;
  --text: #e8eefb;
  --text-2: #c9d3ea;
  --muted: #93a3c0;
  --muted-2: #8392b0;
  --gold: #f5c542;
  --gold-2: #ffd970;
  --gold-ink: #1b1403;
  --green: #3ddc9b;
  --green-bg: rgba(61, 220, 155, 0.12);
  --red: #ff8a97;
  --red-strong: #ff5b6e;
  --red-bg: rgba(255, 91, 110, 0.12);
  --blue: #7cb7ff;
  --blue-bg: rgba(124, 183, 255, 0.12);
  --amber-bg: rgba(245, 197, 66, 0.12);
  --focus: #ffd970;
  --overlay: rgba(3, 6, 14, 0.72);

  /* Typographie */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.84rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.6rem;
  --lh: 1.45;

  /* Espacements (base 4 px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Rayons, ombres */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.5);
  --glow-green: 0 0 0 6px rgba(61, 220, 155, 0.12), 0 12px 40px rgba(61, 220, 155, 0.28);
  --glow-gold: 0 0 0 6px rgba(245, 197, 66, 0.1), 0 12px 40px rgba(245, 197, 66, 0.22);

  /* Mouvements */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 360ms;

  /* Mise en page */
  --tap: 44px;
  --max: 560px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}