/* Jetons FENOPJERCI v3 — fichier généré par tools/design/generer.py depuis design/tokens/fenop-v3.tokens.json :
   ne pas modifier à la main (spec_fenop_design.md § 2). */

:root {
    color-scheme: light;
    --fenop-espace-1: 4px;
    --fenop-espace-2: 8px;
    --fenop-espace-3: 12px;
    --fenop-espace-4: 16px;
    --fenop-espace-5: 20px;
    --fenop-espace-6: 24px;
    --fenop-espace-8: 32px;
    --fenop-espace-10: 40px;
    --fenop-espace-12: 48px;
    --fenop-marge-ecran: 24px;
    --fenop-marge-ordinateur: 48px;
    --fenop-rayon-case: 8px;
    --fenop-rayon-touche: 14px;
    --fenop-rayon-champ: 16px;
    --fenop-rayon-carte: 20px;
    --fenop-rayon-grande-carte: 24px;
    --fenop-rayon-feuille: 28px;
    --fenop-rayon-pilule: 999px;
    --fenop-taille-cible: 48px;
    --fenop-taille-bouton: 56px;
    --fenop-taille-champ: 60px;
    --fenop-taille-touche: 52px;
    --fenop-taille-icone: 24px;
    --fenop-taille-avatar: 48px;
    --fenop-taille-pastille-s: 40px;
    --fenop-taille-pastille: 48px;
    --fenop-taille-pastille-l: 52px;
    --fenop-taille-pastille-xl: 64px;
    --fenop-trait-fin: 1.5px;
    --fenop-trait-moyen: 2px;
    --fenop-trait-fort: 3px;
    --fenop-police-texte: "Andika", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --fenop-graisse-normale: 400;
    --fenop-graisse-grasse: 700;
    --fenop-texte-grand: 2.75rem;
    --fenop-texte-ecran: 1.625rem;
    --fenop-texte-question: 1.5rem;
    --fenop-texte-titre: 1.1875rem;
    --fenop-texte-bouton: 1.125rem;
    --fenop-texte-corps: 1.0625rem;
    --fenop-texte-etiquette: 0.875rem;
    --fenop-texte-legende: 0.875rem;
    --fenop-interligne-grand: 1.09;
    --fenop-interligne-ecran: 1.23;
    --fenop-interligne-question: 1.25;
    --fenop-interligne-titre: 1.26;
    --fenop-interligne-bouton: 1.33;
    --fenop-interligne-corps: 1.53;
    --fenop-interligne-etiquette: 1.29;
    --fenop-interligne-legende: 1.43;
    --fenop-mouvement-rapide: 150ms;
    --fenop-mouvement-normal: 250ms;
    --fenop-mouvement-lent: 350ms;
    --fenop-mouvement-celebration: 600ms;
    --fenop-logo-vert: #109444;
    --fenop-logo-orange: #EC8032;
    --fenop-logo-noir: #191717;
    --fenop-fond: #FAF7F1;
    --fenop-carte: #FFFFFF;
    --fenop-bulle: #FFFFFF;
    --fenop-terre: #F3ECE1;
    --fenop-texte: #1E1B16;
    --fenop-doux: #5B5347;
    --fenop-bordure: #8C8273;
    --fenop-separateur: #E6DED2;
    --fenop-foret: #285E45;
    --fenop-foret-fonce: #1D4834;
    --fenop-foret-clair: #E8EFEA;
    --fenop-sur-foret: #FFFFFF;
    --fenop-orange: #F77F00;
    --fenop-orange-texte: #A34E00;
    --fenop-orange-clair: #FDEAD7;
    --fenop-ocre: #8A5F0E;
    --fenop-ocre-clair: #F5EBD5;
    --fenop-terre-cuite: #A8492A;
    --fenop-terre-cuite-clair: #F6E4DC;
    --fenop-indigo: #34507F;
    --fenop-indigo-clair: #E6EBF3;
    --fenop-brun: #7A4E2D;
    --fenop-brun-clair: #EFE5DB;
    --fenop-erreur: #C0362C;
    --fenop-erreur-fond: #FCEBE9;
    --fenop-attention: #A85A00;
    --fenop-attention-fond: #FFF3E0;
    --fenop-info: #34507F;
    --fenop-info-fond: #E6EBF3;
    --fenop-inactif: #DCD4C7;
}

:root[data-theme="sombre"] {
    color-scheme: dark;
    --fenop-fond: #16130F;
    --fenop-carte: #201C17;
    --fenop-bulle: #201C17;
    --fenop-terre: #2A251F;
    --fenop-texte: #F3EFE7;
    --fenop-doux: #BDB4A6;
    --fenop-bordure: #857B6E;
    --fenop-separateur: #352F28;
    --fenop-foret: #7CC39C;
    --fenop-foret-fonce: #5FA67F;
    --fenop-foret-clair: #1F2E26;
    --fenop-sur-foret: #16130F;
    --fenop-orange: #F2A057;
    --fenop-orange-texte: #F4B67A;
    --fenop-orange-clair: #3A2A18;
    --fenop-ocre: #D9AE5B;
    --fenop-ocre-clair: #362C18;
    --fenop-terre-cuite: #E08A63;
    --fenop-terre-cuite-clair: #3A2620;
    --fenop-indigo: #9DB3DC;
    --fenop-indigo-clair: #232B3A;
    --fenop-brun: #C9A27F;
    --fenop-brun-clair: #30261D;
    --fenop-erreur: #FF7A6E;
    --fenop-erreur-fond: #3A1714;
    --fenop-attention: #F2B25C;
    --fenop-attention-fond: #3A2A10;
    --fenop-info: #9DB3DC;
    --fenop-info-fond: #232B3A;
    --fenop-inactif: #3A342C;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="clair"]) {
        color-scheme: dark;
        --fenop-fond: #16130F;
        --fenop-carte: #201C17;
        --fenop-bulle: #201C17;
        --fenop-terre: #2A251F;
        --fenop-texte: #F3EFE7;
        --fenop-doux: #BDB4A6;
        --fenop-bordure: #857B6E;
        --fenop-separateur: #352F28;
        --fenop-foret: #7CC39C;
        --fenop-foret-fonce: #5FA67F;
        --fenop-foret-clair: #1F2E26;
        --fenop-sur-foret: #16130F;
        --fenop-orange: #F2A057;
        --fenop-orange-texte: #F4B67A;
        --fenop-orange-clair: #3A2A18;
        --fenop-ocre: #D9AE5B;
        --fenop-ocre-clair: #362C18;
        --fenop-terre-cuite: #E08A63;
        --fenop-terre-cuite-clair: #3A2620;
        --fenop-indigo: #9DB3DC;
        --fenop-indigo-clair: #232B3A;
        --fenop-brun: #C9A27F;
        --fenop-brun-clair: #30261D;
        --fenop-erreur: #FF7A6E;
        --fenop-erreur-fond: #3A1714;
        --fenop-attention: #F2B25C;
        --fenop-attention-fond: #3A2A10;
        --fenop-info: #9DB3DC;
        --fenop-info-fond: #232B3A;
        --fenop-inactif: #3A342C;
    }
}

.fenop-grand {
    font-size: var(--fenop-texte-grand);
    line-height: var(--fenop-interligne-grand);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-ecran {
    font-size: var(--fenop-texte-ecran);
    line-height: var(--fenop-interligne-ecran);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-question {
    font-size: var(--fenop-texte-question);
    line-height: var(--fenop-interligne-question);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-titre {
    font-size: var(--fenop-texte-titre);
    line-height: var(--fenop-interligne-titre);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-bouton {
    font-size: var(--fenop-texte-bouton);
    line-height: var(--fenop-interligne-bouton);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-corps {
    font-size: var(--fenop-texte-corps);
    line-height: var(--fenop-interligne-corps);
    font-weight: var(--fenop-graisse-normale);
}

.fenop-etiquette {
    font-size: var(--fenop-texte-etiquette);
    line-height: var(--fenop-interligne-etiquette);
    font-weight: var(--fenop-graisse-grasse);
}

.fenop-legende {
    font-size: var(--fenop-texte-legende);
    line-height: var(--fenop-interligne-legende);
    font-weight: var(--fenop-graisse-normale);
}