/* ==========================================================================
   Sabrina Boost — tokens.css
   --------------------------------------------------------------------------
   Source unique des valeurs de la direction artistique « Bordeaux & Champagne minéral ».
   Aucune couleur, taille, espacement ou durée ne doit être écrite en dur
   ailleurs : styles.css et editorial.css ne consomment que ces variables.
   Référence : design system Sabrina Boost (novembre 2026) et docs/CHARTE-GRAPHIQUE.md.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 1. Couleurs de marque --------------------------------------------- */
  --bordeaux: #60263D;        /* signature : grand bloc, titres de rubrique, accents */
  --bordeaux-fonce: #4A1D30;  /* survol, état actif */
  --champagne: #E8DDD2;       /* surface minérale chaude : une, section de l’autrice ; jamais en texte */
  --or-mat: #D6C1AE;          /* accent discret : filets, soulignement, marqueurs ; jamais en texte sur fond clair */
  --ivoire: #F8F5F0;          /* fond de lecture */
  --encre: #292529;           /* texte */

  /* --- 2. Couleurs sémantiques ------------------------------------------- */
  --fond: var(--ivoire);
  --fond-alt: var(--champagne);
  --fond-chaud: var(--champagne);
  --fond-inverse: var(--bordeaux);
  --premier-plan: var(--encre);
  --texte-secondaire: #5C5257;            /* 6,9:1 sur ivoire, 5,6:1 sur champagne */
  --accent: var(--bordeaux);              /* liens, étiquettes, numéros, filets épais */
  --accent-hover: var(--bordeaux-fonce);
  --accent-sur-chaud: var(--bordeaux);    /* texte des boutons clairs sur bordeaux : 10,5:1 */
  --sur-inverse: var(--ivoire);
  --sur-inverse-secondaire: #E0CBD2;      /* 7,4:1 sur bordeaux */
  --or-sur-inverse: var(--or-mat);        /* or mat lisible uniquement sur bordeaux : 6,6:1 */
  --filet: rgba(41, 37, 41, 0.16);
  --filet-fort: rgba(41, 37, 41, 0.45);
  --filet-or: var(--or-mat);
  --filet-sur-inverse: rgba(248, 245, 240, 0.30);
  --focus: var(--bordeaux);
  --focus-inverse: var(--or-mat);
  --selection: var(--champagne);

  /* --- 3. Typographie : familles ----------------------------------------- */
  --font-titrage: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-texte: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-citation: var(--font-texte);

  /* --- 4. Typographie : échelle fluide ----------------------------------- */
  /* Titrage (Cormorant Garamond 500) */
  --t-hero: clamp(2.75rem, 5.8vw, 5.5rem);        /* H1 accueil */
  --t-une: clamp(2.25rem, 3.6vw, 3.25rem);        /* titre de une, H1 article, nom de l’autrice */
  --t-section: clamp(1.75rem, 2.4vw, 2rem);       /* H2 de section */
  --t-notice: 1.625rem;                           /* titres de notices (26px) */
  --t-h2-article: clamp(1.625rem, 2.2vw, 1.875rem);
  --t-h3-article: 1.375rem;
  --t-numero: clamp(4rem, 7vw, 7rem);             /* numéros éditoriaux, Cormorant 300 */
  --t-numero-petit: 3.5rem;
  /* Citations sobres en Cormorant Garamond romain */
  --t-citation: clamp(1.75rem, 2.4vw, 2.25rem);
  --t-citation-petite: clamp(1.5rem, 2.2vw, 1.9rem);
  /* Texte (Hanken Grotesk) */
  --t-chapo: 1.25rem;        /* 20px */
  --t-chapo-hero: 1.125rem;  /* 18px sur bordeaux */
  --t-corps: 1.0625rem;      /* 17px */
  --t-corps-petit: 0.9375rem;/* 15px */
  --t-intertitre: 1.375rem;  /* 22px, graisse 600 */
  --t-navigation: 0.875rem;  /* 14px */
  --t-meta: 0.8125rem;       /* 13px */
  --t-etiquette: 0.75rem;    /* 12px, capitales espacées */

  /* --- 5. Typographie : graisses, interlignages, approches --------------- */
  --g-titrage: 500;
  --g-numero: 300;
  --g-texte: 400;
  --g-texte-moyen: 500;
  --g-texte-fort: 600;
  --lh-serre: 0.98;
  --lh-titre: 1.05;
  --lh-titre-large: 1.12;
  --lh-chapo: 1.5;
  --lh-corps: 1.6;
  --lh-article: 1.65;
  --ls-hero: -0.015em;
  --ls-titre: -0.01em;
  --ls-navigation: 0.02em;
  --ls-etiquette: 0.12em;

  /* --- 6. Mesures et conteneurs ------------------------------------------ */
  --conteneur: 80rem;        /* 1280px */
  --conteneur-article: 44rem;/* colonne d’article (chapô, intertitres, méta) */
  --mesure: 38rem;           /* ≈ 68 caractères, texte courant */
  --mesure-article: 36rem;   /* ≈ 65 caractères, lecture longue */
  --mesure-chapo: 34rem;
  --mesure-citation: 30ch;
  --mesure-titre: 20ch;

  /* --- 7. Espacements ---------------------------------------------------- */
  --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: 4rem;
  --e-10: 6rem;
  --e-12: 8rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);          /* marges latérales */
  --colonne-gap: 1.5rem;                           /* entre colonnes de grille */
  --section-dense: clamp(3rem, 5vw, 4.5rem);
  --section-ouverte: clamp(4.5rem, 8vw, 7rem);
  --chevauchement: 7rem;                           /* la une sur la transition bordeaux → ivoire */
  --chevauchement-mobile: 3.5rem;
  --en-tete-h: 4.75rem;

  /* --- 8. Grille --------------------------------------------------------- */
  --colonnes: 12;

  /* --- 9. Rayons et filets ---------------------------------------------- */
  --rayon-0: 0px;
  --rayon-1: 2px;
  --filet-fin: 1px;
  --filet-epais: 3px;
  --filet-rubrique-l: 3rem;
  --filet-section-l: 6rem;

  /* --- 10. Mouvement ----------------------------------------------------- */
  --t-rapide: 180ms;
  --t-base: 260ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- 11. Points de rupture (repères ; les media queries les répètent
         en clair car CSS n’accepte pas de variable dans @media) -------------
         --bp-sm : 40rem   (640px)  mobile large
         --bp-md : 56.25rem (900px) tablette portrait → à partir d’ici, grille 12 colonnes
         --bp-lg : 68.75rem (1100px) tablette paysage / petit écran
         --bp-xl : 80rem   (1280px) conteneur plein
  */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-rapide: 0ms;
    --t-base: 0ms;
  }
}