/*
 * Charte de L'atelier De Juju.
 * Les trois couleurs de base viennent du logo :
 * vert forêt #1D3423 (fond), vert feuillage #64AB7B, crème #FBEBD3.
 */
:root {
    --vert-900: #152619;
    --vert-800: #1D3423;
    --vert-700: #25432D;
    --vert-600: #2E573B;
    --vert-500: #3A7450;
    --vert-400: #64AB7B;
    --vert-300: #8FC49F;
    --vert-200: #BCDBC5;
    --vert-100: #DDEDE2;
    --vert-050: #EFF6F1;

    --beige-600: #A8916B;
    --beige-500: #CDB894;
    --beige-400: #E1D1B3;
    --beige-300: #ECE0C9;
    --beige-200: #F4EBDA;
    --beige-100: #F9F3E7;
    --creme: #FDFAF4;
    --creme-logo: #FBEBD3;

    --terre-600: #8C4B2A;
    --terre-500: #A65D37;
    --terre-400: #C27B52;
    --terre-100: #F5E4D6;

    --encre: #1E2921;
    --encre-doux: #3E4A41;
    --gris: #626C64;
    --gris-clair: #939A92;

    --fond: var(--creme);
    --fond-alt: var(--beige-100);
    --fond-sombre: var(--vert-800);
    --surface: #FFFFFF;
    --trait: #E8DECB;
    --trait-fort: #D5C6AA;
    --trait-clair: rgba(251, 235, 211, 0.16);

    /*
     * Rôles des couleurs. Les feuilles de style n'emploient plus directement les teintes claires (vert-050, beige-200…) pour un fond, un bord
     * ou un texte : elles passent par ces jetons, que le thème sombre (plus bas) redéfinit. Les teintes foncées servent toujours de fond aux
     * bandeaux, au pied de page et aux menus, dans les deux thèmes.
     */
    --teinte-vert-1: var(--vert-050);
    --teinte-vert-2: var(--vert-100);
    --teinte-beige-1: var(--beige-100);
    --teinte-beige-2: var(--beige-200);
    --teinte-beige-3: var(--beige-300);
    --teinte-beige-4: var(--beige-400);
    --teinte-terre: var(--terre-100);
    --bord-vert: var(--vert-200);
    --bord-vert-clair: var(--vert-100);
    --bord-beige: var(--beige-300);
    --bord-beige-fort: var(--beige-500);
    --bord-accent: var(--vert-500);
    --bord-terre-clair: var(--terre-100);
    --texte-fort: var(--vert-800);
    --texte-vert: var(--vert-600);
    --texte-terre: var(--terre-600);
    /* Boutons pleins, onglet actif, pastilles : un aplat vert avec du texte crème dessus. */
    --remplissage: var(--vert-800);
    --remplissage-survol: var(--vert-600);
    --sur-remplissage: var(--creme-logo);
    /* Cartes, fenêtres, champs : blanc en thème clair. */
    --surface-douce: #FFFFFF;
    /* Aplat très sombre portant du texte blanc (pastille « Vendu »…). */
    --aplat-sombre: #1E2921;
    --voile-photo: rgba(255, 255, 255, 0.92);
    --ombre-couleur: 29, 52, 35;
    color-scheme: light;

    /* Josefin Sans rappelle les capitales fines du logo, Patrick Hand son « LdJ » manuscrit */
    --police-titre: "Josefin Sans", "Century Gothic", "Futura", sans-serif;
    --police-texte: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --police-main: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
    --police-mono: var(--police-titre);

    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1.0625rem;
    --t-md: 1.1875rem;
    --t-lg: 1.375rem;
    --t-xl: 1.625rem;
    --t-2xl: clamp(1.85rem, 1.35rem + 1.7vw, 2.6rem);
    --t-3xl: clamp(2.2rem, 1.5rem + 2.8vw, 3.5rem);
    --t-4xl: clamp(2.5rem, 1.4rem + 4.2vw, 4.4rem);

    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --e-10: 8rem;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-full: 999px;

    --ombre-douce: 0 1px 2px rgba(29, 52, 35, 0.06), 0 4px 14px -6px rgba(29, 52, 35, 0.12);
    --ombre-moyenne: 0 2px 4px rgba(29, 52, 35, 0.06), 0 14px 30px -14px rgba(29, 52, 35, 0.28);
    --ombre-forte: 0 4px 10px rgba(29, 52, 35, 0.08), 0 24px 48px -20px rgba(29, 52, 35, 0.38);

    --largeur: 74rem;
    --largeur-etroite: 46rem;
    --gouttiere: clamp(1.25rem, 4vw, 3rem);
    --entete-h: 84px;
    /* Hauteur de ce qui reste collé en haut de la fenêtre : celle de l'en-tête, ou 0 quand il s'est replié (voir core/motion.js). */
    --haut-colle: var(--entete-h);

    --sortie: cubic-bezier(0.22, 0.61, 0.36, 1);
    --doux: cubic-bezier(0.65, 0, 0.35, 1);
    --ressort: cubic-bezier(0.34, 1.4, 0.64, 1);
    --duree-1: 160ms;
    --duree-2: 260ms;
    --duree-3: 480ms;
    --duree-4: 800ms;
}

/*
 * Thème sombre : choisi avec le bouton de l'en-tête (mémorisé dans le navigateur), sinon celui de l'appareil. Le fond reste un vert très profond,
 * le texte une crème douce : même identité que le thème clair, sans noir ni blanc purs.
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    --creme: #111A14;
    --fond: #111A14;
    --fond-alt: #17231B;
    --surface: #18251D;
    --surface-douce: #1D2C22;
    --trait: #2A3A2F;
    --trait-fort: #3A4E3F;
    --trait-clair: rgba(251, 235, 211, 0.16);

    --encre: #EDF1E8;
    --encre-doux: #CBD5C9;
    --gris: #A0AC9F;
    --gris-clair: #7C897D;

    --teinte-vert-1: #1A2B21;
    --teinte-vert-2: #22382A;
    --teinte-beige-1: #17231B;
    --teinte-beige-2: #1E2D23;
    --teinte-beige-3: #283A2E;
    --teinte-beige-4: #354A3A;
    --teinte-terre: #3A261B;
    --bord-vert: #355140;
    --bord-vert-clair: #2B4434;
    --bord-beige: #2F4234;
    --bord-beige-fort: #4A6050;
    --bord-accent: #64AB7B;
    --bord-terre-clair: #4A3123;
    --texte-fort: #D5E8DA;
    --texte-vert: #8FC49F;
    --texte-terre: #E8A47E;

    --remplissage: #2F6B47;
    --remplissage-survol: #3B7D56;
    --sur-remplissage: #FFF6E6;
    --voile-photo: rgba(17, 26, 20, 0.88);
    --aplat-sombre: #0A0F0B;
    --ombre-couleur: 0, 0, 0;

    --ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    --ombre-moyenne: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 30px -14px rgba(0, 0, 0, 0.65);
    --ombre-forte: 0 4px 10px rgba(0, 0, 0, 0.35), 0 24px 48px -20px rgba(0, 0, 0, 0.75);
}