/* ==========================================================================
   Poche — tokens
   Une seule police, six couleurs à rôle fixe, sept crans typographiques.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Couleurs — rôles */
  --blanc: #FFFFFF;
  --encre: #161B3D;
  --encre-2: #3A4066;
  --gris: #5C6180;
  --filet: #E4E6F0;
  --filet-fort: #C9CCDC;

  --cobalt: #2946E6;
  --cobalt-fonce: #1F37C0;
  --cobalt-nuit: #172A94;
  --ciel: #EAF0FF;
  --ciel-2: #D6E0FF;

  --beurre: #FFD84A;
  --beurre-fonce: #F2C51C;
  --sable: #FFF6D6;

  --mandarine: #FF6A2B;
  --mandarine-texte: #C94A12;
  --mandarine-nuit: #A63B0C;
  --peche: #FFE9DE;

  --menthe: #DDF6EA;
  --menthe-texte: #0B6B47;
  --menthe-fort: #1DB37A;

  --erreur: #B42318;
  --erreur-fond: #FDECEA;

  /* Typographie */
  --police: "Bricolage Grotesque", system-ui, "Segoe UI", Roboto, sans-serif;
  --t-affiche: 2.5rem;   /* 40 px */
  --t-h1: 1.875rem;      /* 30 px */
  --t-h2: 1.5rem;        /* 24 px */
  --t-h3: 1.25rem;       /* 20 px */
  --t-corps: 1.125rem;   /* 18 px */
  --t-petit: 1rem;       /* 16 px */
  --t-prix: 1.5rem;      /* 24 px */
  --t-prix-grand: 2rem;  /* 32 px */

  --lh-affiche: 1;
  --lh-titre: 1.1;
  --lh-corps: 1.5;

  /* Espacements (base 4) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;

  /* Rayons — par hiérarchie, pas un seul rayon pour tout */
  --r-pilule: 999px;
  --r-tuile: 28px;
  --r-carte: 20px;
  --r-champ: 14px;
  --r-petit: 10px;

  /* Mouvement */
  --ressort: cubic-bezier(.2, .9, .3, 1.2);
  --sortie: cubic-bezier(.4, 0, 1, 1);
  --d-court: 160ms;
  --d-moyen: 220ms;
  --d-feuille: 260ms;

  /* Gabarit */
  --largeur: 72.5rem;     /* 1160 px */
  --marge: 1.25rem;       /* 20 px mobile */
  --barre-haut: 3.5rem;   /* 56 px */
  --dock-onglets: 4rem;   /* 64 px */
  --dock-action: 4.5rem;  /* 72 px */
  --dock-total: calc(var(--dock-onglets) + var(--dock-action) + env(safe-area-inset-bottom, 0px));
  --cible: 2.75rem;       /* 44 px minimum tactile */
  --cible-large: 3.5rem;  /* 56 px */
}

@media (min-width: 64rem) {
  :root {
    --t-affiche: 4rem;      /* 64 px */
    --t-h1: 2.625rem;       /* 42 px */
    --t-h2: 1.75rem;        /* 28 px */
    --t-petit: 0.9375rem;   /* 15 px */
    --t-prix-grand: 2.25rem;
    --lh-affiche: .98;
    --lh-titre: 1.05;
    --marge: 2rem;
    --barre-haut: 4.5rem;
    --dock-total: 0px;
  }
}