/* ==========================================================================
   Nova Agency — Design tokens
   Base : nova-agency-design-system-v2/src/tokens.css (noms conservés)
   Ajouts : échelle typographique fluide, rythme des sections marketing.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --brand-primary: #ff5a3d;
  --brand-primary-hover: #e94b31;
  --brand-primary-active: #d9412b;
  --brand-primary-soft: #ffe4de;
  --brand-primary-subtle: #fff4f1;
  --brand-on-primary: #ffffff;

  /* Teintes d'action : le corail de marque sert d'accent, mais un aplat
     recevant du texte blanc doit atteindre 4.5:1 (WCAG AA).
     #d13a22 = 4.84:1 avec du blanc, #ff5a3d n'atteindrait que 3.1:1. */
  --brand-action: #d13a22;
  --brand-action-hover: #b8321c;
  --brand-action-active: #a02c18;
  /* Corail lisible en petit texte sur fond clair (5.4:1). */
  --brand-text: #b0331d;

  /* --- Neutrals --------------------------------------------------------- */
  --ink-1000: #080808;
  --ink-950: #0d0d0d;
  --ink-900: #151515;
  --ink-850: #1c1c1c;
  --gray-800: #353535;
  --gray-700: #4c4c4c;
  --gray-600: #5c5c5c;
  --gray-500: #6b6b6b;
  --gray-400: #8f8f8f;
  --gray-300: #c8c8c8;
  --gray-200: #e6e6e6;
  --gray-150: #ededed;
  --gray-100: #f2f2f2;
  --paper-50: #f7f7f7;
  --white: #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --success: #148a5a;
  --success-soft: #e7f6ef;
  --warning: #a96810;
  --warning-soft: #fff3dd;
  --error: #c7362f;
  --error-soft: #fdebea;
  --info: #356ae6;
  --info-soft: #eaf0ff;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", "PP Neue Machina", Inter, Arial, sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;

  /* Échelle fluide (marketing) */
  --fs-display: clamp(2.375rem, 1.35rem + 4.4vw, 4.25rem);   /* H1 hero      */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.1vw, 2.75rem);          /* titres       */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);           /* sous-titres  */
  --fs-quote: clamp(1.375rem, 1rem + 1.6vw, 2.125rem);       /* phrases fortes */
  --fs-stat: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);         /* grands chiffres */
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);     /* chapô        */

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

  /* Rythme vertical des sections */
  --section-y: clamp(64px, 8vw, 120px);
  --section-gap: clamp(32px, 4.5vw, 64px);

  /* --- Shape ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Controls --------------------------------------------------------- */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --target-min: 44px;

  /* --- Motion ----------------------------------------------------------- */
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 13, 13, .05);
  --shadow-sm: 0 6px 20px rgba(13, 13, 13, .07);
  --shadow-md: 0 18px 48px rgba(13, 13, 13, .12);
  --shadow-lg: 0 24px 72px rgba(13, 13, 13, .18);

  /* --- Surfaces (clair) ------------------------------------------------- */
  --surface-page: var(--paper-50);
  --surface-card: var(--white);
  --surface-raised: var(--white);
  --surface-subtle: var(--gray-100);
  --surface-inverse: var(--ink-950);
  --text-primary: var(--ink-950);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --border-default: var(--gray-200);
  --border-strong: var(--gray-300);
  --focus-ring: rgba(255, 90, 61, .28);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(16px, 4vw, 40px);
  --navbar-height: 68px;
}

/* Sections sombres : on redéfinit uniquement les rôles de surface.
   Tous les composants héritent automatiquement du bon contraste. */
.nv-invert {
  --surface-page: var(--ink-950);
  --surface-card: #141414;
  --surface-raised: var(--ink-850);
  --surface-subtle: #1b1b1b;
  --surface-inverse: var(--white);
  --text-primary: var(--white);
  --text-secondary: #b4b4b4;
  --text-tertiary: #969696;
  --text-inverse: var(--ink-950);
  --border-default: #2b2b2b;
  --border-strong: #3d3d3d;
  --focus-ring: rgba(255, 90, 61, .45);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-md: 0 22px 54px rgba(0, 0, 0, .38);
  --brand-primary-soft: rgba(255, 90, 61, .16);
  --brand-primary-subtle: rgba(255, 90, 61, .1);
  --brand-primary-active: #ff7a62;
  background: var(--surface-page);
  color: var(--text-primary);
}