/* * Design tokens — Le Poids des Mots * Palette, typographie, espacements. Seule source de vérité pour les couleurs : * ne jamais coder une couleur en dur ailleurs, toujours passer par ces variables. * Le thème sombre est géré automatiquement (prefers-color-scheme) et peut être * forcé via l'attribut data-theme="dark|light" sur . */ :root{ --papier:#FDFBF9; --surface:#F6F3F1; --surface-2:#ECE7E2; --encre:#1F1A16; --texte:#3D362F; --sourdine:#7A6F65; --peche:#E3A783; --peche-fonce:#C4794E; --peche-clair:#F1D3C1; --peche-pale:#F8E9E0; --kaki:#C9CAA8; --kaki-clair:#E4E5D4; --kaki-pale:#F2F2EA; --filet:rgba(31,26,22,.13); --filet-fort:rgba(31,26,22,.28); --donnee:#C4794E; --donnee-pale:rgba(196,121,78,.16); --erreur:#B3261E; --erreur-pale:#FBEAE9; --succes:#3B6E4F; --succes-pale:#EAF3ED; --logo-filter:none; --ombre:0 1px 2px rgba(31,26,22,.04); --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif; --sans:"Archivo","Helvetica Neue",Arial,sans-serif; --max:1160px; --pad:clamp(20px,5vw,56px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --papier:#18140F; --surface:#201B16; --surface-2:#292219; --encre:#F6F0EA; --texte:#DED5CB; --sourdine:#A3968A; --peche:#E3A783; --peche-fonce:#EBBB9D; --peche-clair:#4A3527; --peche-pale:#28201A; --kaki:#C9CAA8; --kaki-clair:#3A3B2C; --kaki-pale:#20211A; --filet:rgba(246,240,234,.15); --filet-fort:rgba(246,240,234,.32); --donnee:#EBBB9D; --donnee-pale:rgba(235,187,157,.2); --erreur:#E5847A; --erreur-pale:#3A211F; --succes:#8FC6A3; --succes-pale:#1E2E23; --logo-filter:invert(1); --ombre:0 1px 2px rgba(0,0,0,.3); } } :root[data-theme="dark"]{ --papier:#18140F; --surface:#201B16; --surface-2:#292219; --encre:#F6F0EA; --texte:#DED5CB; --sourdine:#A3968A; --peche:#E3A783; --peche-fonce:#EBBB9D; --peche-clair:#4A3527; --peche-pale:#28201A; --kaki:#C9CAA8; --kaki-clair:#3A3B2C; --kaki-pale:#20211A; --filet:rgba(246,240,234,.15); --filet-fort:rgba(246,240,234,.32); --donnee:#EBBB9D; --donnee-pale:rgba(235,187,157,.2); --erreur:#E5847A; --erreur-pale:#3A211F; --succes:#8FC6A3; --succes-pale:#1E2E23; --logo-filter:invert(1); --ombre:0 1px 2px rgba(0,0,0,.3); }