/* ===================================================================== * tokens.css — source unique des variables de design. * * Chargé en PREMIER par base.html (application) ET public_base.html * (vitrine) : c'est ce qui garantit que le site public et la console sont * le même produit. Aucune règle de composant ici, uniquement des variables. * Pour changer une couleur, un rayon ou une police : c'est ici, une fois. * * Thème : `data-theme="dark"` est posé sur avant le premier paint * (script inline des deux gabarits de base). Le clair est la valeur par * défaut ; le sombre ne redéfinit que les valeurs qui changent. * ===================================================================== */ :root{ /* Surfaces et filets */ --bg:#F4F3F8; --panel:#FFFFFF; --card:#FFFFFF; --line:#E4E2EE; --line2:#D8D5E6; --line-soft:#ECEAF3; --surface:#FAFAFD; --surface-hi:#F1EFF8; /* Texte */ --ink:#17142A; --sub:#5F5B7A; --mut:#6E6A8A; /* Marque : indigo (accent) et cyan (anneau du logo) */ --accent:#544AE3; --accent-hi:#4238C9; --accent2:#7B72F0; --accent-soft:#F4F3FE; --accent-tint:#EEEDFC; --accent-line:#D8D5F8; --accent-ring:#C9C4F6; --cyan:#0FA3B1; /* cyan de TEXTE (contraste AA sur fond clair) */ --cyan-brand:#3FC1D9; /* cyan de MARQUE : anneau du logo, jamais du texte */ --cyan-tint:#EAF9FB; --logo-fill:var(--accent); /* disque plein du logo */ --accent-text:var(--accent); /* liens et mots mis en avant sur fond de page */ --kicker:var(--accent); /* sur-titres en capitales mono */ /* Statuts */ --ok:#1F9D61; --err:#D6455B; --warn:#B07C14; --ok-bg:#E8F6EF; --ok-line:#BEE5D2; --err-bg:#FCEDEF; --err-line:#F3C6CD; --warn-bg:#FBF3DF; --warn-line:#EBD9AC; /* Forme : un rayon par usage, partout pareil */ --radius:10px; --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-pill:999px; --sh-1:0 1px 2px rgba(24,26,32,.05); --sh-2:0 4px 14px -4px rgba(24,26,32,.12), 0 1px 3px rgba(24,26,32,.05); /* Rythme et typo */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --t-xs:11px; --t-sm:12px; --t-md:13px; --t-base:14px; --t-lg:16px; --fw-med:500; --fw-semi:600; --row-h:30px; --dur:.14s; --ease:cubic-bezier(.22,.7,.3,1); --font-ui:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --rail-bg:rgba(255,255,255,.72); --rail-ring:rgba(20,22,32,.06); font-family:var(--font-ui); } :root[data-theme="dark"]{ --bg:#0B0D14; --panel:#12162A; --card:#12162A; --line:#232A46; --line2:#2E3459; --line-soft:#1C2136; --surface:#111420; --surface-hi:#171C33; --ink:#EDEFF7; --sub:#C4C8DB; --mut:#8D93AE; --accent:#6C63F0; --accent-hi:#7D74FF; --accent2:#8B85F5; --accent-soft:rgba(108,99,240,.16); --accent-tint:rgba(108,99,240,.18); --accent-line:#3A3568; --accent-ring:#4A4380; --cyan:#4FD2E8; --cyan-brand:#4FD2E8; --cyan-tint:rgba(79,210,232,.14); --logo-fill:var(--accent2); --accent-text:#8B85F5; --kicker:#4FD2E8; --ok:#3ECF8E; --err:#F26D7E; --warn:#E8B13A; --ok-bg:rgba(62,207,142,.14); --ok-line:rgba(62,207,142,.4); --err-bg:rgba(242,109,126,.14); --err-line:rgba(242,109,126,.4); --warn-bg:rgba(232,177,58,.14); --warn-line:rgba(232,177,58,.4); /* Vraie « dynamic island » : capsule sombre translucide, pas un panneau plein — proche du noir quelle que soit la teinte du fond derrière. */ --rail-bg:rgba(8,9,15,.68); --rail-ring:rgba(255,255,255,.07); }