/* ==========================================================================
   JDF — Design tokens (source de vérité, voir docs/design-system.md)
   ========================================================================== */
@font-face {
  font-family: "DM Sans";
  src: url("../../fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../../fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs */
  --c-space: #040A1C;
  --c-navy-900: #071530;
  --c-navy-800: #0B2250;
  --c-navy-700: #12306B;
  --c-primary: #1557FF;
  --c-primary-600: #0F45D6;
  --c-primary-50: #EEF3FF;
  --c-accent: #19C3FF;
  --c-accent-soft: rgba(25, 195, 255, .14);
  --c-ink: #0B1630;
  --c-text: #33415C;
  --c-muted: #5B6880;
  --c-on-dark: #E8EEFC;
  --c-on-dark-muted: #A9B6D3;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F4F7FC;
  --c-border: #E3E9F3;
  --c-border-dark: rgba(255, 255, 255, .12);
  --c-success: #0B7039;
  --c-success-bg: #E7F6EE;
  --c-warning: #7F5500;
  --c-warning-bg: #FFF4D6;
  --c-danger: #C62828;
  --c-danger-bg: #FDECEC;
  --c-info: #1557FF;
  --c-info-bg: #EEF3FF;
  --c-whatsapp: #0F7A3C;

  /* Dégradés */
  --g-brand: linear-gradient(135deg, #1557FF 0%, #19C3FF 100%);
  --g-space: radial-gradient(1200px 600px at 75% -10%, rgba(21, 87, 255, .45), transparent 60%),
             radial-gradient(800px 500px at 0% 100%, rgba(25, 195, 255, .18), transparent 60%),
             linear-gradient(180deg, #040A1C 0%, #071530 100%);

  /* Typographie */
  --font-heading: "Sora", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.4rem, 5.2vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.85rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --lh-body: 1.7;
  --lh-tight: 1.15;
  --ls-heading: -.02em;
  --ls-eyebrow: .18em;

  /* Espacements (base 4 px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 9vw, 128px);
  --gutter: 16px;

  /* Conteneurs */
  --container: 1280px;
  --container-narrow: 820px;

  /* Rayons */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Ombres (teintées marine) */
  --sh-sm: 0 1px 2px rgba(7, 21, 48, .06), 0 1px 3px rgba(7, 21, 48, .05);
  --sh-md: 0 14px 34px -8px rgba(7, 21, 48, .18);
  --sh-lg: 0 30px 60px -20px rgba(7, 21, 48, .35);
  --sh-glow: 0 0 0 1px rgba(25, 195, 255, .25), 0 10px 40px -10px rgba(21, 87, 255, .55);

  /* Interaction */
  --focus: 0 0 0 3px rgba(21, 87, 255, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms;
  --t-med: 320ms;

  --header-h: 76px;
  --z-header: 50;
  --z-overlay: 80;
  --z-toast: 90;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }