/* ============================================================
   Beepings — Design tokens (source : Figma « WEBSITE V3 »)
   Toutes les valeurs proviennent des variables / styles Figma
   (Principal, Text, Blanco, Fondo 1/2/3, Gris, Acento 1/2/3, Gradient,
   Text XS/S/M/L, Price, Section, H2, H3). Les noms FR/EN sont alignés
   sur ceux d'Aurélie quand ils existent.
   ============================================================ */
:root {
  /* ---- Couleurs ------------------------------------------------ */
  --c-primary: #0090D6;        /* Principal / Beepings Blue */
  --c-primary-600: #0091D8;    /* fin de dégradé */
  --c-primary-300: #4BB6DB;    /* début de dégradé */
  --c-primary-100: #D8EDF7;    /* Fondo 3 — fond bleu clair (pack, fiche technique) */
  --c-text: #39434A;           /* Text — sert aussi de fond sombre (B2B, overlay) */
  --c-white: #FFFFFF;          /* Blanco */
  --c-sand: #F5F1E8;           /* Fondo 1 — beige (avis, FAQ, cartes) */
  --c-mist: #E8ECEC;           /* Fondo 2 — gris très clair (tableaux, support) */
  --c-grey: #D7D9DB;           /* Gris — bordures, séparateurs discrets */
  --c-gold: #E7C980;           /* Acento 2 — étoiles, badge « Économisez » */
  --c-terracotta: #D48A6A;     /* Acento 3 — « Autres trackers », alerte */
  --c-sage: #AFC8B2;           /* Acento 1 — badge vert « Économisez 26 € » */
  --c-black: #000000;          /* badges stores */

  --g-primary: linear-gradient(180deg, var(--c-primary-300) 0%, var(--c-primary-600) 100%);
  --g-button: linear-gradient(121deg, #7ED9F8 12.5%, #4BB6DB 33%, #0680C6 90%);
  --g-overlay: rgba(57, 67, 74, 0.8);

  /* ---- Typographie --------------------------------------------- */
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Tailles Figma à 1920 px (valeur fixe) et variante fluide */
  --fs-display-1: 100px;   /* « Vivez l'esprit tranquille » */
  --fs-display-2: 75px;    /* « L'app qui suit… » */
  --fs-display-3: 70px;    /* héros pages intérieures, nom produit fiche */
  --fs-h1: 50px;           /* nom produit (card-buy) */
  --fs-h2: 34px;           /* titres de section */
  --fs-h3: 31px;           /* H2 Figma : sous-titres, Price (Bold) */
  --fs-h4: 25px;           /* H3 Figma (B2B) */
  --fs-lead: 26px;         /* accroche héros */
  --fs-xl: 20px;   /* Text L */
  --fs-lg: 18px;   /* libellés, boutons */
  --fs-md: 16px;   /* Text M / Section */
  --fs-sm: 14px;   /* Text S */
  --fs-xs: 12px;   /* Text XS */

  --fs-display-1-fluid: clamp(48px, 5.2vw, 100px);
  --fs-display-2-fluid: clamp(40px, 3.9vw, 75px);
  --fs-display-3-fluid: clamp(38px, 3.65vw, 70px);
  --fs-h1-fluid: clamp(34px, 2.6vw, 50px);
  --fs-h2-fluid: clamp(26px, 1.8vw, 34px);
  --fs-lead-fluid: clamp(18px, 1.35vw, 26px);

  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-normal: 1.4;

  /* ---- Rayons --------------------------------------------------- */
  --r-xs: 6px;     /* badges stores */
  --r-s: 10px;     /* vignettes, cellules fiche technique, badges prix */
  --r-sm: 20px;    /* FAQ, cartes liste, cartes « pourquoi » */
  --r-md: 30px;    /* boutons, cartes produit, cartes blanches */
  --r-lg: 50px;    /* cartes histoires ; avis 55 px */
  --r-xl: 100px;   /* grandes bannières, sections arrondies (110 px app ZEN L) */
  --r-pill: 999px;

  /* ---- Ombres --------------------------------------------------- */
  --shadow-card: 4px 4px 55px rgba(0, 0, 0, 0.10);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.08);

  /* ---- Espacements (échelle Figma) ------------------------------ */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 10px; --sp-4: 15px; --sp-5: 20px;
  --sp-6: 30px; --sp-8: 40px; --sp-10: 60px; --sp-12: 75px; --sp-15: 90px;
  --sp-20: 105px; --sp-25: 120px; --sp-30: 240px;

  /* ---- Mise en page --------------------------------------------- */
  --page: 1920px;              /* largeur de maquette */
  --container: 1440px;         /* zone utile Figma (1920 − 2×240) */
  --gutter: 240px;             /* marge latérale à 1920 */
  --gutter-fluid: clamp(16px, 12.5vw, 240px);
  --section-gap: 120px;

  /* ---- Divers --------------------------------------------------- */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
}