/*
 * Styles globaux : jetons de design, base et typographie.
 * Organisation des feuilles (importées dans cet ordre par assets/app.js) :
 *   app.css         jetons (couleurs, espacements…), base, typographie
 *   layout.css      coquille de l'application, menu, barre mobile, page de connexion
 *   composants.css  briques réutilisables (carte, bouton, champ, alerte…)
 * Toute couleur ou dimension passe par un jeton : aucune valeur en dur ailleurs.
 */

/* ---------- Jetons ---------- */

:root {
    /* Palette : verts (feuillage) et bruns (terre, écorce) */
    --vert-900: #1b3324;
    --vert-800: #24432f;
    --vert-700: #2f5d3a;
    --vert-500: #4a7c59;
    --vert-200: #cfe0c8;
    --vert-100: #e7f0e2;

    --brun-900: #2e2118;
    --brun-700: #6b4f3a;
    --brun-500: #a67c52;
    --brun-200: #e3d6c3;
    --brun-100: #f4eee4;
    --creme: #fbf8f3;

    --rouge-700: #9b3b2b;
    --rouge-100: #f7e4df;

    /* Rôles */
    --couleur-fond: var(--brun-100);
    --couleur-surface: var(--creme);
    --couleur-texte: var(--brun-900);
    --couleur-texte-doux: var(--brun-700);
    --couleur-bordure: var(--brun-200);
    --couleur-primaire: var(--vert-700);
    --couleur-primaire-survol: var(--vert-800);
    --couleur-focus: var(--brun-500);

    --menu-fond: var(--vert-900);
    --menu-texte: var(--vert-100);
    --menu-survol: var(--vert-800);
    --menu-actif: var(--vert-700);
    --menu-accent: var(--brun-500);

    /* Typographie */
    --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --taille-texte: 1rem;
    --taille-petit: 0.875rem;
    --taille-titre: 1.5rem;

    /* Espacements */
    --espace-1: 0.25rem;
    --espace-2: 0.5rem;
    --espace-3: 0.75rem;
    --espace-4: 1rem;
    --espace-6: 1.5rem;
    --espace-8: 2rem;

    /* Formes */
    --rayon: 0.5rem;
    --ombre: 0 1px 3px rgb(46 33 24 / 0.12);

    /* Menu */
    --menu-largeur: 15rem;
    --menu-largeur-replie: 4rem;
    --barre-mobile-hauteur: 3.5rem;
    --transition: 180ms ease;

    /* Points de rupture (rappel : les media queries ne lisent pas les variables) */
    /* mobile < 48rem ≤ ordinateur */
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police);
    font-size: var(--taille-texte);
    line-height: 1.5;
}

:focus-visible {
    outline: 2px solid var(--couleur-focus);
    outline-offset: 2px;
}

/* ---------- Typographie ---------- */

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.2;
    color: var(--vert-800);
}

h1 {
    font-size: var(--taille-titre);
}

p {
    margin: 0;
}

a {
    color: var(--couleur-primaire);
}