/* * Kerskol - theme de base (tokens semantiques) * ------------------------------------------------------------------ * Palette validee. Ne pas modifier les valeurs sans accord. * * Modes : * - Clair : valeurs par defaut sur :root. * - Sombre : applique automatiquement via prefers-color-scheme * (sauf si l'utilisateur force le clair avec data-theme="light"), * ou explicitement via :root[data-theme="dark"]. * * Themes enfants (mecanisme prevu, aucun thème enfant fourni ici) : * Un futur univers visuel se declare avec un attribut sur : * * et un bloc CSS qui NE REDEFINIT QUE des variables --kk-* : * :root[data-theme="foret"] { --kk-accent: #2F855A; ... } * Aucune regle de mise en page dans un thème enfant : uniquement des * variables. Aucun personnage sous licence, aucune marque tierce. * Prevoir au besoin une variante sombre du thème enfant via * @media (prefers-color-scheme: dark) :root[data-theme="foret"] { ... }. */ /* ------------------------- Police auto-hebergee ------------------------- */ /* Andika (SIL, licence OFL - voir fonts/OFL.txt). Aucune ressource externe. */ @font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Andika-Regular.6cd8bbd868.woff2") format("woff2"); } @font-face { font-family: "Andika"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Andika-Bold.fb01125935.woff2") format("woff2"); } /* ------------------------------ Mode clair ------------------------------ */ :root { /* Surfaces */ --kk-bg: #FFFFFF; /* fond de page */ --kk-surface: #F5F5F4; /* cartes, panneaux */ --kk-border: #E7E5E4; /* bordures, separateurs */ /* Texte */ --kk-text: #292524; /* texte principal */ --kk-text-2: #57534E; /* texte secondaire */ /* Accent (chaud, orange Kerskol) */ --kk-accent: #E06A00; /* boutons/titres GROS et GRAS uniquement (>= 24px ou >= 18.66px gras) */ --kk-on-accent: #FFFFFF; /* texte sur bouton accent (gros + gras) */ --kk-accent-text: #BD5500; /* petits liens/textes accent, a poser sur --kk-bg */ /* Retours pedagogiques : BANDEAUX pastel (fond doux + texte fonce de la meme famille), jamais aplat vif. Toujours accompagnes d'une icone cote UI (voir README : icone "reessayer", formulations bienveillantes). */ --kk-success-bg: #DCF5E7; /* fond du bandeau succes */ --kk-success-text: #1E6B45; /* texte/icone sur bandeau succes */ --kk-danger-bg: #FCE3DE; /* fond du bandeau erreur */ --kk-danger-text: #A8322A; /* texte/icone sur bandeau erreur */ /* Forme & typographie */ --kk-radius: 14px; --kk-radius-sm: 8px; --kk-font: "Andika", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ------------------------------ Mode sombre ----------------------------- */ /* Auto : suit la preference systeme, sauf clair force explicitement. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kk-bg: #1C1917; --kk-surface: #292524; --kk-border: #44403C; --kk-text: #E7E5E4; --kk-text-2: #A8A29E; --kk-accent: #FB923C; /* boutons + titres + liens (contraste large OK) */ --kk-on-accent: #1C1917; /* texte sur bouton accent */ --kk-accent-text: #FB923C; /* liens accent (AA meme en petit sur fond sombre) */ --kk-success-bg: #1F3A2E; --kk-success-text: #A7E8C4; --kk-danger-bg: #3F2826; --kk-danger-text: #F7BDB4; } } /* Sombre force explicitement (independamment de la preference systeme). */ :root[data-theme="dark"] { --kk-bg: #1C1917; --kk-surface: #292524; --kk-border: #44403C; --kk-text: #E7E5E4; --kk-text-2: #A8A29E; --kk-accent: #FB923C; --kk-on-accent: #1C1917; --kk-accent-text: #FB923C; --kk-success-bg: #1F3A2E; --kk-success-text: #A7E8C4; --kk-danger-bg: #3F2826; --kk-danger-text: #F7BDB4; }