/* ============================================================
   PFM Lyon — Design tokens (source : Figma wN7FWLWJwUgQsRtGMWwvOn)
   Toute couleur / taille / rayon / ombre du site passe par ces
   variables. Aucune valeur en dur dans les autres feuilles.
   ============================================================ */

:root {

  /* ---------- Couleurs — rôles ---------- */
  --c-primary:        #C2A46A;   /* or — accents, filets, icônes */
  --c-primary-50:     rgba(194, 164, 106, 0.5);
  --c-ink:            #0B1937;   /* bleu marine — fonds sombres, titres nav */
  --c-ink-02:         rgba(11, 25, 55, 0.02);
  --c-white:          #FFFFFF;
  --c-white-50:       rgba(255, 255, 255, 0.5);
  --c-white-40:       rgba(255, 255, 255, 0.4);
  --c-white-02:       rgba(255, 255, 255, 0.02);
  --c-white-05:       rgba(255, 255, 255, 0.05);
  --c-title:          #1C1C1C;   /* titres de section sur fond clair */
  --c-body:           #2E2E2E;   /* paragraphes */
  --c-muted:          #717171;   /* textes secondaires */
  --c-cream:          #F8F6F2;   /* fond de sections claires */
  --c-grey-bg:        #FAFAFA;
  --c-grey-line:      #D9D9D9;
  --c-black:          #000000;

  /* ---------- Voiles / dégradés ---------- */
  --g-hero-veil:      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  --g-card-veil:      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  --g-ink-gold:       linear-gradient(135deg, rgba(11,25,55,0.9) 43%, rgba(194,164,106,0.8) 100%);

  /* ---------- Ombres ---------- */
  --sh-btn:           0 2px 14px 0 rgba(0, 0, 0, 0.08);
  --sh-nav:           0 6px 25px 0 rgba(0, 0, 0, 0.05);
  --sh-card:          0 0 12px 0 rgba(0, 0, 0, 0.12);

  /* ---------- Rayons ---------- */
  --r-btn:            38px;      /* boutons pilule */
  --r-input:          5px;
  --r-img:            20px;      /* images arrondies */
  --r-card:           24px;
  --r-card-lg:        32px;
  --r-pill:           100px;
  --r-box:            16px;
  --r-box-md:         18px;
  --r-tag:            10px;

  /* ---------- Typographie ---------- */
  --f-title:          "Cinzel", "Times New Roman", serif;
  --f-body:           "Raleway", system-ui, sans-serif;
  --f-arabic:         "Amiri Quran", "Amiri", serif;

  /* Titres Cinzel */
  --t-h1:             700 50px/67.4px var(--f-title);
  --t-h2:             700 40px/52px var(--f-title);
  --t-h3:             700 24px/31.2px var(--f-title);
  --t-h4:             700 22px/28.6px var(--f-title);
  --t-h5:             700 20px/26px var(--f-title);
  --t-h6:             700 17px/25.5px var(--f-title);
  --t-card-title:     700 16px/20.8px var(--f-title);
  --t-nav:            700 14px/18.9px var(--f-title);
  --t-nav-idle:       400 14px/18.9px var(--f-title);
  --t-phone:          400 16px/24px var(--f-title);
  --t-eyebrow:        700 14px/16.8px var(--f-title);

  /* Corps Raleway */
  --t-body:           400 16px/25.6px var(--f-body);
  --t-body-med:       500 16px/25.6px var(--f-body);
  --t-body-24:        500 16px/24px var(--f-body);
  --t-small:          400 14px/21px var(--f-body);
  --t-small-med:      500 14px/22.4px var(--f-body);
  --t-small-600:      600 14px/21px var(--f-body);
  --t-small-lh22:     400 14px/22.4px var(--f-body);
  --t-btn:            700 16px/18.8px var(--f-body);   /* ls 0.32px */
  --t-tag:            600 12px/14.1px var(--f-body);   /* ls 0.24px */
  --t-label-15:       600 15px/22.5px var(--f-body);
  --t-lead-17:        500 17px/25.5px var(--f-body);
  --t-lead-20:        500 20px/32px var(--f-body);

  /* Arabe */
  --t-arabic-26:      400 26px/39px var(--f-arabic);
  --t-arabic-20:      400 20px/34px var(--f-arabic);
  --t-arabic-16:      400 16px/25.6px var(--f-arabic);

  /* ---------- Espacements structurels ---------- */
  --page-w:           1440px;
  --content-w:        1200px;
  --gutter:           120px;
}