/* =============================================================
   KILOGO — Charte graphique officielle
   theme.css — Variables CSS & typographie
   ============================================================= */

/* Typographie : Inter est chargée dans index.html.
   Ne pas déclarer @font-face vers des .woff2 absents : sur Firebase Hosting, une URL
   manquante est souvent réécrite vers index.html → le navigateur tente de parser du
   HTML comme police (« Failed to decode », OTS invalid sfntVersion). */

:root {
  /* ── Couleurs marque ─────────────────────────────────── */
  --brand-green-light:   #cddf9b;   /* vert clair */
  --brand-green-dark:    #24574d;   /* vert foncé */
  --brand-orange:        #e5602c;   /* orange */

  /* ── Palette fonctionnelle (hérite de la charte) ─────── */

  /* Vert */
  --g:    #24574d;                            /* vert principal (était #2EA173) */
  --gd:   #1a3f37;                            /* vert foncé dérivé (était #1F6E4D) */
  --gl:   #cddf9b;                            /* vert clair (était #66C799) */
  --gb:   rgba(36, 87, 77, .10);             /* fond vert 10% */
  --g-glow: rgba(36, 87, 77, .22);           /* halo vert 22% */

  /* Orange */
  --o:    #e5602c;                            /* orange principal (était #FA8C3B) */
  --od:   #c04e21;                            /* orange foncé dérivé (était #D9721E) */
  --ob:   rgba(229, 96, 44, .10);            /* fond orange 10% */
  --o-glow: rgba(229, 96, 44, .22);          /* halo orange 22% */

  /* Bleu (conservé tel quel) */
  --b:    #3399DA;
  --bb:   rgba(51, 153, 218, .10);

  /* Neutres & fonds */
  --bg:   #f7f5ef;                            /* fond page — crème */
  --card: #ffffff;                            /* fond carte */

  /* Texte */
  --t:    #1C1C1E;                            /* texte principal */
  --t2:   #3C3C43;                            /* texte secondaire */
  --t3:   #8E8E93;                            /* texte tertiaire */
  --ti:   #ffffff;                            /* texte sur fond coloré */

  /* Séparateur */
  --sep:  rgba(60, 60, 67, .10);

  /* ── Typographie ─────────────────────────────────────── */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light:   200;
  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* ── Slogan ──────────────────────────────────────────── */
  /* "Ton colis, Son trajet." */

  /* ── Ombres ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.10);
  --shadow-green: 0 4px 16px rgba(36, 87, 77, .22);
  /* Aliases utilisés dans style.css */
  --s1: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --s2: 0 8px 24px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.06);
  --s3: 0 8px 32px rgba(36,87,77,.22), 0 2px 8px rgba(0,0,0,.08);

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ── Easing ──────────────────────────────────────────── */
  --spring: cubic-bezier(.34,1.56,.64,1);
  --smooth: cubic-bezier(.4,0,.2,1);

  /* ── Transitions ─────────────────────────────────────── */
  --transition: .2s ease;
  --transition-slow: .35s ease;
}