/*
 | Les jetons de design, relevés dans le Figma « Bus Toqué » par l'API.
 |
 | Ce ne sont pas des valeurs approchées à l'œil sur une capture : chaque
 | hexadécimal, chaque corps et chaque interlettrage vient du fichier lui-même.
 | C'est la seule feuille où une valeur brute a le droit de figurer ; partout
 | ailleurs on écrit `var(--bt-…)`.
 |
 | ⚠️ Deux noms de la palette d'origine sont trompeurs, et ils sont conservés
 | tels quels pour qu'on retrouve la correspondance avec le Figma :
 |
 |   - `gris-clair` (#2D3E46) est le plus SOMBRE des deux gris ;
 |   - `lavande-light` (#735D47) n'est pas une lavande mais un brun.
 |
 | Les renommer ici couperait le lien avec la maquette ; s'en servir en croyant
 | au nom donnerait un fond clair là où le design en veut un sombre. D'où les
 | alias par rôle plus bas — c'est eux qu'on utilise.
 */

:root {
    /* ── Palette, telle qu'elle est nommée dans le Figma ─────────────────── */
    --bt-beige: #d8d3c6;
    --bt-bordeaux: #441319;
    --bt-bordeaux-medium: #542126;
    --bt-cuire-dark: #3e2916;
    --bt-cuire-medium: #4b3520;
    --bt-gris-clair: #2d3e46;
    --bt-gris-fonce: #232e33;
    --bt-lavande-light: #735d47;
    --bt-sable: #cebea5;
    --bt-sable-dark: #bdac90;
    --bt-white: #ffffff;

    /* Neutres — l'échelle « stone » de Tailwind, reprise telle quelle. */
    --bt-neutral-50: #fafafa;
    --bt-neutral-100: #f5f5f4;
    --bt-neutral-200: #e7e5e4;
    --bt-neutral-300: #d6d3d1;
    --bt-neutral-400: #a8a29e;
    --bt-neutral-500: #78716c;
    --bt-neutral-600: #57534e;
    --bt-neutral-700: #44403c;
    --bt-neutral-800: #292524;
    --bt-neutral-900: #1c1917;
    --bt-black: #0c0a09;

    /* ── Rôles ──────────────────────────────────────────────────────────── */
    /* Ce sont ces noms-là qu'on emploie : ils disent l'usage, pas la teinte,
       et ils survivent à un changement de palette. */
    --bt-fond: var(--bt-beige);
    --bt-fond-clair: var(--bt-white);
    --bt-fond-sombre: var(--bt-gris-clair);
    --bt-fond-tres-sombre: var(--bt-gris-fonce);
    --bt-encre: var(--bt-gris-clair);
    --bt-encre-inverse: var(--bt-beige);
    --bt-accent: var(--bt-bordeaux);
    --bt-accent-doux: var(--bt-sable);

    /* ── Typographie ────────────────────────────────────────────────────── */
    /*
     | Deux familles, et deux seulement : un serif pour les titres, un grotesque
     | pour tout le reste. Les piles de repli sont là pour le jour où la police
     | n'est pas chargée — jamais pour remplacer un choix.
     */
    --bt-titre: "STIX Two Text", Georgia, "Times New Roman", serif;
    --bt-texte: "Familjen Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

    /*
     | L'échelle du Figma, à la lettre. L'interlettrage y est exprimé en
     | pourcentage du corps — d'où les `em`, qui suivent le corps tout seuls là
     | où des pixels se décaleraient à chaque changement de taille.
     */
    --bt-display: 72px;
    --bt-display-interligne: 1.1;
    --bt-display-lettres: -0.04em;

    --bt-h1: 56px;
    --bt-h2: 40px;
    --bt-h3: 32px;
    --bt-h4: 28px;
    --bt-h5: 24px;
    --bt-h6: 20px;
    --bt-titre-interligne: 1.1;
    --bt-titre-lettres: -0.03em;
    /* L'italique des titres est plus serré : 90 % contre 110 %. Ce n'est pas une
       coquette — c'est ce qui rapproche la ligne italique de celle du dessus. */
    --bt-titre-italique-interligne: 0.9;

    --bt-corps-lg: 18px;
    --bt-corps-md: 16px;
    --bt-corps-sm: 14px;
    --bt-corps-xs: 12px;
    --bt-corps-interligne: 1.24;
    --bt-corps-lettres: -0.02em;

    /* ── Mise en page ───────────────────────────────────────────────────── */
    --bt-largeur: 1440px;
    --bt-gouttiere: 48px;
    --bt-rayon: 16px;
    --bt-rayon-carte: 12px;
}

/*
 | Mobile : le Figma ne réduit pas les titres à l'aveugle, il en donne une autre
 | échelle. On la reprend telle quelle plutôt que d'appliquer un facteur.
 |
 | La bascule est posée à 782 px, la même que WordPress emploie pour sa barre
 | d'administration : une frontière de moins à retenir.
 */
@media (max-width: 782px) {
    :root {
        --bt-display: 48px;
        --bt-h1: 36px;
        --bt-h2: 32px;
        --bt-h3: 28px;
        --bt-h4: 24px;
        /* 22 et 20, relevés dans le Figma : ni 20/18 comme le laisserait croire
           une réduction régulière, ni la même échelle qu'en grand écran. */
        --bt-h5: 22px;
        --bt-h6: 20px;

        /* Les corps de texte, eux, ne changent pas d'une taille d'écran à
           l'autre : 18/16/14/12 partout. */

        --bt-gouttiere: 16px;
    }
}