/* =========================================================
   TOPAD — Design tokens
   Toutes les couleurs, tailles et rythmes du site sont définis
   ici. Pour changer l'identité visuelle (couleurs de marque),
   il suffit de modifier ce fichier : le reste du CSS n'utilise
   que ces variables.
   ========================================================= */

:root {
  /* ---- Couleurs de marque officielles Topad ----
     #77cba1 (diffuseur), #fc957a (annonceur), #37a5d7 (tout le reste)
     sont les 3 couleurs de marque exactes fournies par Topad. Utilisées
     seules en fond avec du texte blanc, elles ne passent pas le contraste
     minimum WCAG AA (ratios mesurés : 1.9 à 2.8). On garde donc ces 3
     teintes exactes comme fonds pleins avec du texte foncé (--color-ink,
     contraste ≥ 6.3), et on dérive pour chacune une teinte plus soutenue
     de même famille (-dark/-darker) réservée aux survols (:hover) et aux
     textes/icônes qui doivent rester lisibles sur blanc ou en petite
     taille (contraste ≥ 4.5 vérifié). Le bleu #37a5d7 sert aussi de base
     à toute la gamme "navy" (fonds sombres header/hero/footer, liens). */
  --color-navy-900: #0b2d3d;
  --color-navy-800: #0f4057;
  --color-navy-700: #155775;
  --color-navy-600: #1b7198;
  --color-navy-500: #2291c3;

  --color-white: #ffffff;
  --color-ink: #101828;
  --color-ink-soft: #3c465a;
  --color-slate: #5b6577;
  --color-slate-light: #8e97a8;

  --color-bg: #ffffff;
  --color-bg-soft: #f5f7fb;
  --color-bg-alt: #eef2f9;
  --color-border: #e2e7f0;

  /* ---- Couleur ANNONCEUR (paie pour diffuser sa pub) ---- */
  --color-annonceur: #fc957a;
  --color-annonceur-dark: #992000;
  --color-annonceur-darker: #5c1300;
  --color-annonceur-light: #fad9d1;
  --color-annonceur-tint: #faeeea;

  /* ---- Couleur DIFFUSEUR (monétise ses écrans) ---- */
  --color-diffuseur: #77cba1;
  --color-diffuseur-dark: #25744d;
  --color-diffuseur-darker: #16452e;
  --color-diffuseur-light: #dcefe6;
  --color-diffuseur-tint: #eff6f2;

  /* ---- Couleur "tout le reste" (accents, liens, icônes génériques) ---- */
  --color-blue: #37a5d7;
  --color-blue-dark: var(--color-navy-600);
  --color-blue-darker: var(--color-navy-800);
  --color-blue-light: #d7ebf4;
  --color-blue-tint: #edf4f8;

  /* ---- États / utilitaires ---- */
  --color-warning: #f5a623;
  --color-success: var(--color-diffuseur);
  --color-focus: var(--color-blue);

  /* ---- Typographie ---- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", var(--font-body);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ---- Rythme / espacement ---- */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --container-w: 1200px;
  --container-narrow: 800px;

  /* ---- Forme ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Ombres ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.14);
  --shadow-annonceur: 0 14px 30px rgba(252, 149, 122, 0.35);
  --shadow-diffuseur: 0 14px 30px rgba(119, 203, 161, 0.35);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 240ms var(--ease);
  --transition-slow: 420ms var(--ease);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
}

/* Mode sombre : réservé à des blocs volontairement sombres
   (footer, section hero) — pas un thème global auto. */
.on-dark {
  --color-bg: var(--color-navy-900);
  color: var(--color-white);
}