@layer tokens, reset, base, composants, pages, utilitaires;

/* Polices auto-hébergées, sous-ensemble latin (français compris) */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-italique-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* ==========================================================
   Marie Nawrot · tokens de l'identité visuelle · territoire « Fait. »
   Version du site : l'accent passe au brun cacao (#6F4331), validé sur la maquette « express ».
   ========================================================== */
@layer tokens {
  :root {
    /* ---------- Couleurs (4, pas une de plus) ---------- */
    --blanc-lilas: #F6F5FA;  /* rgb(246 245 250) · fond · 60 %            */
    --noyer:       #53301D;  /* rgb(83 48 29)    · photos, détails · 3 %   */
    --bleu-encre:  #0A4275;  /* rgb(10 66 117)   · actions, coche · 12 %   */
    --nuit:        #07031A;  /* rgb(7 3 26)      · titres, ratures · 25 %  */
    --nuit-adoucie:#2B273C;  /* rgb(43 39 60)    · texte courant (13,3:1)  */
    --blanc:       #FFFFFF;  /* surfaces de cartes uniquement              */
    --marron:      #6F4331;  /* accent unique du site (7,7:1 sur lilas)    */
    --erreur:      #9B1C1C;

    /* Rôles (utilise ceux-ci dans le code, pas les couleurs brutes) */
    --fond:            var(--blanc-lilas);
    --surface:         var(--blanc);
    --texte:           var(--nuit-adoucie);
    --titre:           var(--nuit);
    --action:          var(--marron);
    --action-survol:   color-mix(in oklch, var(--marron) 80%, black);
    --bouton:          var(--bleu-encre);
    --bouton-survol:   color-mix(in oklch, var(--bleu-encre) 80%, black);
    --bouton-pale:     color-mix(in oklch, var(--bleu-encre) 10%, var(--blanc-lilas));
    --accent:          var(--marron);
    --accent-pale:     color-mix(in oklch, var(--marron) 10%, var(--blanc-lilas));
    --texte-doux:      color-mix(in oklch, var(--nuit-adoucie) 78%, var(--blanc-lilas));
    --sur-action:      var(--blanc-lilas);
    --filet:           color-mix(in oklch, var(--nuit) 12%, var(--blanc-lilas));
    --rature:          var(--nuit);
    --focus:           var(--marron);

    /* ---------- Typographie ---------- */
    --police-titre: 'Bricolage Grotesque', 'Trebuchet MS', Arial, sans-serif;
    --police-texte: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --police-ui:    'Bricolage Grotesque', 'Trebuchet MS', Arial, sans-serif;

    --t-h1:    clamp(2.75rem, 1.7rem + 4vw, 4.5rem);    /* 44 → 72 px */
    --t-h2:    clamp(2rem, 1.5rem + 1.8vw, 2.875rem);   /* 32 → 46 px */
    --t-h3:    1.625rem;                                /* 26 px */
    --t-texte: 1.125rem;                                /* 18 px */
    --t-ui:    1.0625rem;                               /* 17 px */
    --t-petit: 0.9375rem;                               /* 15 px */

    --g-titre: 800;  --g-texte: 400;  --g-ui: 600;
    --il-titre: 0.98; --il-texte: 1.6;
    --ie-titre: -0.03em;
    --mesure: 66ch;  /* longueur de ligne max du texte */

    /* ---------- Espacement (base 8 px) ---------- */
    --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
    --e-5: 1.5rem;  --e-6: 2rem;   --e-7: 3rem;    --e-8: 4.5rem; --e-9: 7rem;
    --largeur-max: 72rem;
    --gouttiere: clamp(1rem, 0.6rem + 2vw, 2.5rem);
    --hauteur-barre: 4.75rem;

    /* ---------- Formes ---------- */
    --rayon-controle: 10px;
    --rayon-carte:    16px;
    --rayon-bouton:   999px;  /* pilule */
    --ombre-carte: 0 1px 2px rgb(7 3 26 / 0.04), 0 8px 24px rgb(7 3 26 / 0.06);
    --cible-min: 44px;

    /* ---------- Mouvement : « comme un trait de stylo » ---------- */
    --courbe-stylo: cubic-bezier(0.65, 0, 0.35, 1);
    --d-micro: 160ms;
    --d-rature: 400ms;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --d-micro: 0ms; --d-rature: 0ms; }
  }
}