/* ==========================================================================
   Tokens CSS — Puply Design System
   Toutes les valeurs de design centralisées ici
   ========================================================================== */

:root {

  /* --- Couleurs --- */
  --color-turquoise:   #79C5B6;   /* Principal / DA — accents, illustrations */
  --color-orange:      #FD8026;   /* Accent fort — titres à fort impact uniquement */
  --color-fond:        #FFF8ED;   /* Fond principal — toutes les pages */
  --color-blanc:       #FFFFFF;   /* Fond cartes et modules uniquement */
  --color-texte:       #3F414E;   /* Texte principal et sous-titres */

  /* Variantes utilitaires */
  --color-turquoise-hover: #62b3a3;   /* Turquoise assombri pour hover CTA */
  --color-texte-leger:     #6B6E7D;   /* Texte secondaire / mentions */
  --color-bordure:         #E8E0D5;   /* Bordures légères sur fond crème */

  /* Pastels — Section "Fonctionnalités" (Figma 6740:7624/7791/7816/7843) */
  --color-pastel-vert:   #E2EEDD;   /* Carte parcours chiot */
  --color-pastel-bleu:   #F4FEFF;   /* Carte carnet santé */
  --color-pastel-peche:  #FFE1CC;   /* Carte bibliothèque */
  --color-pastel-jaune:  #FFE7B3;   /* Carte messagerie / chatbot (rgba 255,207,134,.6 ≈ ce mix) */

  /* Variantes formulaire et zones */
  --color-input-bg:    #FFF8ED;   /* Fond des inputs (contact) — crème site */
  --color-beige-fonce: #F1EAD7;   /* Bandeau "Approfondir" — confirmé Figma node 6740:7902 */

  /* --- Typographies --- */
  --font-titre:  'Dongle', sans-serif;    /* H1, H2, éléments graphiques */
  --font-corps:  'Roboto', sans-serif;    /* Tout le reste */

  /* --- Tailles de police (mobile-first, desktop via media queries) --- */
  --fs-h1:      clamp(2.25rem, 8vw, 4.5rem);   /* 36px → 72px */
  --fs-h2:      clamp(1.75rem, 5vw, 3rem);     /* 28px → 48px */
  --fs-h3:      clamp(1.25rem, 3vw, 1.75rem);  /* 20px → 28px */
  --fs-body:    1rem;        /* 16px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-small:   0.8125rem;  /* 13px */

  /* --- Espacements --- */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   1.5rem;    /* 24px */
  --space-lg:   2.5rem;    /* 40px */
  --space-xl:   4rem;      /* 64px */
  --space-2xl:  6rem;      /* 96px */

  /* --- Mise en page --- */
  --container-max:   1200px;
  --container-gutter: 1.25rem;   /* Marges latérales mobiles */

  /* --- Rayons de bordure --- */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   1rem;      /* 16px */
  --radius-pill: 9999px;    /* Boutons arrondis */

  /* --- Ombres --- */
  --shadow-card: 0 2px 16px rgba(63, 65, 78, 0.08);
  --shadow-cta:  0 4px 20px rgba(121, 197, 182, 0.35);

  /* --- Transitions --- */
  --transition-base: 200ms ease;
}