/*
 * Design tokens — Actu MaRégion (E.Leclerc Occitanie & Aurillac)
 * Source : handoff-dev/02-design-tokens.md — valeurs figées, ne pas inventer
 * d'autres teintes/tailles ailleurs dans le CSS.
 */

:root {
    /* Couleurs de marque */
    --mr-brun: #4a2c28;
    --mr-brun-fonce: #3a2320;
    --mr-brun-tres-fonce: #33201d;
    --mr-corail: #eb7663;
    --mr-corail-fonce: #d85a48;
    --mr-corail-tres-fonce: #c43b23;
    --mr-rose-pale: #fdf1ef;
    --mr-rose: #f6e3df;
    --mr-rose-2: #f9d6cf;
    --mr-encre: #2b2b2b;
    --mr-blanc: #ffffff;
    --mr-gris-fond: #f4f4f4;
    --mr-gris-fond-2: #f4f4f6;
    --mr-gris-bord: #f0f0f0;
    --mr-gris-bord-2: #ededed;
    --mr-gris-texte: #5a5a5a;
    --mr-bleu-leclerc: #0066b3;
    --mr-bleu-focus: #1b5fa8;
    --mr-rouge-leclerc: #d9503a;
    --mr-vert: #16704a;
    --mr-ciel: #5bb8e0;
    --mr-teal: #1d7b7e;
    --mr-orange: #f07c00;

    /* Typographie */
    --mr-font-texte: 'Roboto', system-ui, sans-serif;
    --mr-font-titrage: 'Katahdin Round', 'Fredoka', system-ui, sans-serif;
    /* Baskerville, serif (pas de webfont 'Libre Baskerville' ni de repli
       Georgia) : sur le vrai site, .cheese-header_quote/.nc-header_quote
       déclarent littéralement font-family:Baskerville,serif — mais la
       police chargée s'appelle "Baskervville" (orthographe différente,
       un "v" de plus), donc ce nom ne correspond jamais et le navigateur
       retombe sur le serif générique du système. Résultat mesuré : ~13 %
       plus étroit/petit que "Libre Baskerville" à taille égale. Comme
       cette coquille est déjà comme ça en production, la reproduire ici
       est ce qui rend le texte identique à ce que voient les visiteurs
       réels, plutôt que la version "corrigée" qu'on avait avant. */
    --mr-font-surtitre: Baskerville, serif;

    --mr-fs-mention: 12px;
    --mr-fs-legende: 13px;
    --mr-fs-secondaire: 15px;
    --mr-fs-courant: 17px;
    --mr-fs-accroche: 19px;
    --mr-fs-carte: 20px;
    --mr-fs-sous-titre: clamp(22px, 2.4vw, 27px);
    --mr-fs-titre-section: clamp(28px, 2.6vw, 52px);
    --mr-fs-titre-page: clamp(30px, 2.6vw, 46px);
    --mr-fs-surtitre: clamp(19px, 1.5vw, 34px);

    /* Espacements */
    --mr-space-section: 60px;
    --mr-space-section-mobile: 48px;
    --mr-gutter: max(24px, (100% - 1600px) / 2);
    --mr-gutter-mobile: 18px;
    --mr-content-max: 1600px;

    /* Rayons */
    --mr-r-xs: 4px;
    --mr-r-s: 8px;
    --mr-r-m: 12px;
    --mr-r-m2: 14px;
    --mr-r-l: 16px;
    --mr-r-xl: 26px;
    --mr-r-pill: 999px;

    /* Ombres */
    --mr-shadow-card: 0 12px 28px rgba(74, 44, 40, 0.14);
    --mr-shadow-pin: 0 2px 6px rgba(74, 44, 40, 0.35);
    --mr-shadow-cluster: 0 3px 10px rgba(74, 44, 40, 0.32);
    --mr-shadow-focus-enh: 0 0 0 3px #3a2320;

    /* Mouvement */
    --mr-ease-expressive: cubic-bezier(0.22, 0.7, 0.2, 1);
    --mr-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mr-duration-zoom: 0.45s;
    --mr-duration-slide: 0.5s;
    --mr-duration-t: 0.18s;

    /* Focus */
    --mr-focus-color: var(--mr-bleu-focus);
    --mr-focus-color-accent: var(--mr-corail-tres-fonce);

    /* Panneau d'accessibilité — teinte d'accent dédiée au mode contraste
       élevé/renforcé (base.css et suivants), volontairement séparée de
       --mr-corail-tres-fonce : garder un seul token nommé pour ce rôle
       permet de l'ajuster sans devoir ressortir chaque règle qui l'utilise. */
    --mr-a11y-accent: #c43b23;

    /* Palette du mode contraste élevé, reprise telle quelle de la maquette
       source (handoff-dev/sources-design-components/Site.dc.html,
       [data-contrast="high"]) : chaque teinte de marque est ASSOMBRIE pour
       passer les seuils RGAA, jamais remplacée par du noir/blanc pur — sur
       demande explicite du client, qui a rejeté la bascule "tout en noir et
       blanc" livrée précédemment. */
    --mr-a11y-vif: #7a2418; /* accent foncé des éléments interactifs de marque (CTA, flèches, pastilles carte, fanions) */
    --mr-a11y-corail: #9e3526;
    --mr-a11y-teal: #0e5c5f;
    --mr-a11y-orange: #b85800;
}

/* Breakpoints de référence (documentation — pas de valeur CSS custom
   property possible pour les media queries, voir base.css) :
   640 / 767 / 900 / 1023 / 1100 px. Aucun autre seuil ne doit être introduit. */