/* =============================================================================
   tokens.css — Design tokens du site chiropracteur.pro
   -----------------------------------------------------------------------------
   Source : audit du thème Avada actuellement en place.
   Documentation complète : docs/guidelines.md
   À charger AVANT toute autre feuille de styles.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COULEURS
     --------------------------------------------------------------------------- */

  /* Accent — teal signature du site */
  --color-primary:        #3bafbf;   /* accent principal (icônes, liens, hover) */
  --color-primary-hover:  #00a8bf;   /* état hover des boutons primaires */
  --color-primary-deep:   #177ca0;   /* fond des boutons primaires (variante AA) */

  /* Texte */
  --color-heading:        #333c4e;   /* titres h1-h6 ; paragraphes ≤ 18px */
  --color-text:           #7e8890;   /* texte courant ≥ 18px ; labels, descriptions */
  --color-text-muted:     #666666;   /* footer, légendes */
  --color-link:           #2b2b2b;   /* liens neutres (footer, contexte non-accent) */

  /* Surfaces */
  --color-surface:        #ffffff;   /* fond principal ; fond des cartes */
  --color-surface-alt:    #f5f5f5;   /* blockquote, fonds gris discret */
  --color-border:         #e0dede;   /* séparateurs, bordures */

  /* Détails */
  --color-quote-bar:      #65bc7b;   /* barre verte du blockquote (signature thème) */

  /* États inverses */
  --color-on-primary:     #ffffff;   /* texte/icône sur fond --color-primary* */

  /* Sombre alt (header opaque sticky, footer dark optionnel) */
  --color-header-dark:    #333c4e;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHIE
     --------------------------------------------------------------------------- */

  --font-body:    "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
  --font-heading: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif;
  --font-nav:     Montserrat, Arial, Helvetica, sans-serif;
  --font-button:  Montserrat, Arial, Helvetica, sans-serif;
  --font-mono:    Menlo, Consolas, monaco, monospace;

  /* Échelle de tailles */
  --fs-body:  17px;
  --fs-h1:    clamp(40px, 8vw, 80px);
  --fs-h2:    clamp(28px, 5vw, 46px);
  --fs-h3:    22px;
  --fs-h4:    18px;
  --fs-h5:    16px;
  --fs-h6:    14px;
  --fs-nav:   14px;
  --fs-button: 13px;
  --fs-quote: 13px;

  /* Weights — le thème est très fin */
  --fw-body:    300;
  --fw-h1:      300;
  --fw-h2:      200;   /* signature du thème : H2 ultra-fin */
  --fw-h3:      300;
  --fw-h4:      300;
  --fw-h5:      300;
  --fw-h6:      300;
  --fw-nav:     400;
  --fw-button:  400;
  --fw-strong:  600;

  /* Line-heights — très aérés (signature du thème) */
  --lh-body:  2.25;     /* parti pris du thème : ~38px pour body 17px */
  --lh-h1:    1;
  --lh-h2:    1.25;
  --lh-h3:    2.2em;    /* tel que défini par Avada (relatif à la taille) */
  --lh-tight: 1.15;
  --lh-prose: 1.65;     /* fallback raisonnable si on veut moins aéré */

  /* Letter-spacings */
  --ls-body:    0;
  --ls-h3:      1px;
  --ls-nav:     1px;
  --ls-button:  2px;     /* boutons en majuscules espacées */

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */

  --site-width:           1170px;       /* container max-width du thème */
  --site-width-narrow:    760px;        /* pour blocs de texte longs (lecture) */
  --container-padding-x:  20px;
  --section-padding-y:    80px;         /* padding vertical standard d'une section */

  /* ---------------------------------------------------------------------------
     ESPACEMENTS (échelle 4-pt)
     --------------------------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  80px;     /* aligné sur --section-padding-y */
  --space-9:  120px;

  /* ---------------------------------------------------------------------------
     RAYONS
     --------------------------------------------------------------------------- */

  --radius-button:  2px;       /* signature : boutons quasi-carrés */
  --radius-card:    0px;       /* cartes nettes, pas d'arrondi */
  --radius-input:   2px;
  --radius-pill:    9999px;    /* exception WordPress legacy */

  /* ---------------------------------------------------------------------------
     BORDURES
     --------------------------------------------------------------------------- */

  --border-thin:   1px solid var(--color-border);
  --border-quote:  4px solid var(--color-quote-bar);

  /* ---------------------------------------------------------------------------
     OMBRES
     --------------------------------------------------------------------------- */

  /* Le thème est volontairement "plat". On expose une seule ombre subtile
     pour les besoins exceptionnels (modale, popover). Pas d'ombre sur les
     cartes de contenu courant. */
  --shadow-soft:  0 1px 2px rgba(51, 60, 78, .06);
  --shadow-modal: 0 10px 30px rgba(51, 60, 78, .12);

  /* ---------------------------------------------------------------------------
     TRANSITIONS
     --------------------------------------------------------------------------- */

  --transition-fast: 120ms ease;
  --transition:      180ms ease;

  /* ---------------------------------------------------------------------------
     COMPOSANT — BOUTON
     --------------------------------------------------------------------------- */

  --button-padding-y:   11px;
  --button-padding-x:   23px;
  --button-bg:          var(--color-primary-deep);
  --button-bg-hover:    var(--color-primary-hover);
  --button-color:       var(--color-on-primary);
  --button-border:      2px solid var(--color-on-primary);
  --button-radius:      var(--radius-button);
  --button-text-transform: uppercase;

  /* ---------------------------------------------------------------------------
     COMPOSANT — HEADER
     --------------------------------------------------------------------------- */

  --header-bg:           transparent;            /* au-dessus du hero */
  --header-bg-scrolled:  var(--color-surface);   /* après scroll, si sticky */
  --header-padding-y:    16px;
  --header-link-color:   var(--color-on-primary); /* nav blanche au-dessus du hero */

  /* ---------------------------------------------------------------------------
     COMPOSANT — FOOTER
     --------------------------------------------------------------------------- */

  --footer-bg:        var(--color-surface);
  --footer-color:     var(--color-text-muted);
  --footer-link:      var(--color-link);
  --footer-padding-y: var(--space-7);
}

/* =============================================================================
   prefers-reduced-motion
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition:      0ms;
  }
}