/* ===== Palettes de marque alternatives ====================================== Orchidée (le défaut, dans :root ci-dessus) + ces deux signatures = les trois directions présentées sur /design. Le thème actif se pose via data-theme sur (src/html.js, constante THEME) ; sans attribut, :root reste Orchidée. Chaque bloc redéclare exactement les mêmes tokens de marque que :root — basculer tout le site = changer le mot dans THEME. */ html[data-theme="amethyste"] { --brand: #7c3aed; --brand-d: #6d28d9; --brand-deep: #4c1d95; --brand-light: #a855f7; --grad-angle: 135deg; --grad-stops: #4c1d95 0%, #7c3aed 52%, #a855f7 100%; --link: #7458c0; --focus-ring: rgba(124, 58, 237, .22); /* La sidebar reste graphite (neutre) quel que soit le thème ; seule la lame active suit la marque. Donc pas d'override --sidebar* ici, juste le wash. */ --brand-wash: #f1eafe; } html[data-theme="crepuscule"] { --brand: #5b50e6; --brand-d: #4338ca; --brand-deep: #312e81; --brand-light: #818cf8; --grad-angle: 150deg; --grad-stops: #312e81 0%, #6d28d9 48%, #818cf8 100%; --link: #5d54b8; --focus-ring: rgba(91, 80, 230, .22); --brand-wash: #eaeafe; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font: var(--fs-15)/var(--lh) var(--font-sans); color: var(--ink); background: var(--bg); display: flex; min-height: 100vh; } body.centered { display: flex; align-items: center; justify-content: center; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--brand-d); text-decoration: underline; }