/*
 * AD-097 — Les tokens du design system, en UN SEUL fichier.
 *
 * Écart admis à AD-369, arbitré par Maxime : les maquettes déclarent leurs
 * tokens dans le <style> de chaque page, à l'identique. Les rassembler ici est
 * la seule façon qu'une correction de couleur ne soit pas à reporter sept fois.
 *
 * ⛔ AUCUNE VALEUR N'EST MODIFIÉE, AUCUN NOM N'EST CHANGÉ. Tout ce qui suit est
 * copié de docs/design/*.dc.html, tel quel. Le relevé complet des écarts entre
 * maquettes est dans docs/design/ECARTS-TOKENS.md, pièce justificative
 * d'AD-393.
 *
 * AUCUNE VALEUR EN DUR AILLEURS. Une couleur écrite en clair dans une feuille
 * de composant est une valeur que la prochaine correction oubliera.
 */

:root {
    /* ---------------------------------------------------------------- */
    /* Couleurs de marque                                               */
    /* ---------------------------------------------------------------- */
    --color-brand: #1B9E48;
    --color-brand-strong: #13702F;
    --color-brand-deep: #0B3E1E;
    --color-brand-soft: #E7F2E9;

    /* Rouge d'accent. Déclaré par l'Accueil, utile partout. */
    --color-accent: #DE3346;
    --color-accent-strong: #AF2233;
    --color-accent-soft: #FBEAEC;

    /* ---------------------------------------------------------------- */
    /* Encres et traits                                                 */
    /* ---------------------------------------------------------------- */
    --color-ink: #141A16;

    /*
     * ⚠️ #6A736B — LE SEUL TOKEN DU PROJET DONT LA VALEUR N'EST PAS CELLE
     * D'UNE MAQUETTE, et le seul écart de ce genre autorisé.
     *
     * Les six pages réelles disent #6B736C, qui donne 4,4829:1 sur
     * `--surface-muted` : deux centièmes sous le seuil AA de 4,5:1 pour du
     * texte courant. Arbitré par Maxime le 16/09/2026 — un SEUIL CHIFFRÉ
     * ÉCHOUÉ n'est pas une préférence visuelle, et AD-377 vise le maximum sur
     * l'accessibilité.
     *
     * LA VALEUR N'EST PAS CHOISIE, ELLE EST CALCULÉE : c'est la couleur la
     * plus CLAIRE qui atteigne 4,5:1, trouvée en n'assombrissant que, un canal
     * à la fois. Elle vaut 4,5003:1 — le seuil à trois décimales, et rien de
     * plus. Un rouge et un bleu en moins, le vert inchangé ; la différence est
     * invisible à l'œil.
     *
     * Sur `--surface-page` (blanc) : 4,9095:1.
     *
     * ⛔ CE N'EST PAS UN ASSOUPLISSEMENT D'AD-369. Tout écart sans critère
     * chiffré derrière lui reste interdit. Voir ECARTS-TOKENS.md §3.3.
     */
    --color-ink-subtle: #6A736B;

    --color-line: #DEE1DC;
    --color-line-strong: #B9BFB9;
    --color-line-danger: #E9A7AE;

    /* ---------------------------------------------------------------- */
    /* États                                                            */
    /* ---------------------------------------------------------------- */
    --color-focus: #13702F;
    --color-state-disabled: #EDEEEA;
    --color-state-error: #AF2233;

    /* ---------------------------------------------------------------- */
    /* AD-098 — PAIRES FOND / PREMIER-PLAN                              */
    /*                                                                  */
    /* Chaque `--surface-*` a son `--on-surface-*`. C'est ce qui corrige */
    /* à la racine le vert sur vert : on ne pose jamais un fond sans     */
    /* poser l'encre qui va avec, et le couple ne se sépare pas.         */
    /* ---------------------------------------------------------------- */
    --surface-page: #FFFFFF;
    --on-surface-page: #141A16;
    --on-surface-page-muted: #242C26;

    --surface-muted: #F6F5F1;
    --on-surface-muted: #141A16;
    --on-surface-muted-secondary: #242C26;

    --surface-soft: #E7F2E9;
    --on-surface-soft: #0B3E1E;

    --surface-brand: #1B9E48;
    --on-surface-brand: #06220F;

    --surface-brand-dim: #157C39;
    --on-surface-brand-dim: #FFFFFF;

    --surface-dark: #0B3E1E;
    --on-surface-dark: #FFFFFF;
    --on-surface-dark-secondary: #CFE3D4;

    --surface-black: #111511;
    --on-surface-black: #FFFFFF;
    --on-surface-black-secondary: #C9CEC9;

    --surface-accent: #E50321;
    --surface-accent-hover: #B30219;
    --on-surface-accent: #FFFFFF;

    --surface-overlay: rgba(6,34,15,.58);
    --on-surface-overlay: #FFFFFF;
    --on-surface-overlay-secondary: #E4EFE7;

    /* Formulaires en erreur — Contact et Tunnel. */
    --surface-danger-soft: #FDEBEC;
    --on-surface-danger: #8E0116;

    /* ---------------------------------------------------------------- */
    /* Typographie                                                      */
    /* ---------------------------------------------------------------- */
    --font-display: "Instrument Serif", Georgia, serif;
    --font-text: "Work Sans", Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --text-display: clamp(2.75rem, 7vw, 4.75rem);
    --text-title: clamp(2rem, 5vw, 3rem);
    --text-heading: clamp(1.5rem, 3.4vw, 2rem);
    --text-subheading: 1.25rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-micro: 0.75rem;

    --leading-tight: 1.05;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --tracking-wide: 0.14em;

    /* ---------------------------------------------------------------- */
    /* Espacement                                                       */
    /* ---------------------------------------------------------------- */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /*
     * AD-112 — LA GOUTTIÈRE EST UN TOKEN, pas un padding recopié. 16 px au
     * départ ; les paliers sont posés plus bas, à un seul endroit.
     */
    --gutter: 16px;

    /* Largeur de contenu. Au-delà, une ligne devient illisible. */
    --measure: 1220px;

    /* ---------------------------------------------------------------- */
    /* Rayons, ombres, anneau de focus                                  */
    /* ---------------------------------------------------------------- */
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-soft: 0 1px 2px rgba(11,62,30,.06), 0 8px 24px rgba(11,62,30,.06);
    --shadow-lifted: 0 2px 4px rgba(11,62,30,.08), 0 18px 40px rgba(11,62,30,.12);

    /* Jamais `outline: none`. Le focus doit se voir. */
    --focus-ring: 0 0 0 3px rgba(19,112,47,.28);

    /* ---------------------------------------------------------------- */
    /* Mouvement                                                        */
    /* ---------------------------------------------------------------- */
    --motion-fast: .18s;
    --motion-mid: .3s;
    --motion-slow: .6s;
    --motion-zoom: .9s;
    --ease: cubic-bezier(.2,.6,.2,1);
}

/*
 * AD-112 — LES PALIERS DE GOUTTIÈRE, repris des maquettes À L'IDENTIQUE.
 *
 * Les cinq pages publiques déclarent ces deux lignes, aux mêmes largeurs et
 * aux mêmes valeurs. J'avais commencé par en écrire trois, à d'autres seuils,
 * en les dérivant de l'échelle d'espacement : c'était « améliorer », ce
 * qu'AD-369 interdit. Ce sont bien 48rem → 24px et 75rem → 48px.
 */
@media (min-width: 48rem) {
    :root { --gutter: 24px; }
}

@media (min-width: 75rem) {
    :root { --gutter: 48px; }
}