/* ============================================================
   MIECOLO — Design Tokens (charte graphique Webflow)
   ============================================================ */

:root {
  /* ── Couleurs primaires ──────────────────────────────────── */
  --color-primary-25:   #fcfaff;
  --color-primary-50:   #f9f5ff;
  --color-primary-100:  #e5b906;
  --color-primary-200:  #aaa2f8;
  --color-primary-500:  #e5b906;  /* Primary 1 — Jaune principal */
  --color-primary-600:  #e5b906;
  --color-primary-700:  #0e6e85;  /* Bleu foncé */

  /* ── Jaune / Or ──────────────────────────────────────────── */
  --color-jaune:        #e5b906;
  --color-jaune-clair:  #c2ae5e;
  --color-jaune-logo:   #eee7cc;

  /* ── Bleus ───────────────────────────────────────────────── */
  --color-bleu-fonce:   #0e6e85;
  --color-bleu-clair:   #1695b5;
  --color-bleu-page:    #004579;

  /* ── Verts ───────────────────────────────────────────────── */
  --color-vert:         #0e9b2d;
  --color-success-700:  #027a48;
  --color-success-50:   #ecfdf3;

  /* ── Gris ────────────────────────────────────────────────── */
  --color-gray-25:      #fcfcfd;
  --color-gray-200:     #eaecf0;
  --color-gray-300:     #d0d5dd;
  --color-gray-400:     #98a2b3;
  --color-gray-500:     #667085;
  --color-gray-600:     #475467;
  --color-gray-700:     #344054;
  --color-gray-800:     #3d3e40;  /* Gris clair (label Webflow) */
  --color-gray-900:     #044757;

  /* ── Warning ─────────────────────────────────────────────── */
  --color-warning-300:  #fec84b;

  /* ── Neutres ─────────────────────────────────────────────── */
  --color-white:        #ffffff;
  --color-noir:         #3d3e40;
  --color-transparent:  transparent;

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-01: 0 1px 2px rgba(20, 20, 43, 0.06);
  --shadow-02: 0 2px 4px rgba(20, 20, 43, 0.08);
  --shadow-03: 0 4px 8px rgba(20, 20, 43, 0.10);
  --shadow-04: 0 8px 16px rgba(20, 20, 43, 0.14);

  /* ── Typographie ─────────────────────────────────────────── */
  --font-heading:       "Tahoma", "Geneva", "Verdana", sans-serif;
  --font-body:          "Tahoma", "Geneva", "Verdana", sans-serif;
  --font-list:          "Vollkorn", Georgia, serif;

  /* Tailles */
  --text-h1:            38px;
  --text-h2:            24px;
  --text-h3:            20px;
  --text-h4:            16px;
  --text-h5:            14px;
  --text-h6:            12px;
  --text-paragraph:     14px;
  --text-blockquote:    18px;
  --text-list-item:     14px;

  /* Line-heights */
  --leading-tight:      1.2;
  --leading-normal:     1.5;
  --leading-relaxed:    1.75;

  /* ── Espacements ─────────────────────────────────────────── */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          64px;
  --space-4xl:          96px;

  /* ── Rayons de bordure ───────────────────────────────────── */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;

  /* ── Largeur max conteneur ───────────────────────────────── */
  --container-max:      1200px;
}