/* AlphaX — Moteur de theme (colorway) Holo = defaut / face de marque (clair). Cosmic = sombre. Sans override -> suivi de l'OS via prefers-color-scheme. Override manuel persiste -> attribut [data-colorway] sur (gagne sur l'OS). Regle : aucune couleur en dur dans les composants, tout passe par ces variables. */ :root { /* Tokens partages (independants du colorway) */ --font-display: 'Anton', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-xl: 36px; --maxw: 1280px; --ease: cubic-bezier(.22, .61, .36, 1); } /* ===== HOLO (clair) — defaut / face de marque ===== */ :root, [data-colorway="holo"] { --bg: #e1dbf6; --bg-2: #cdc2f3; --surface: #f6f2fe; --surface-2: #ece6fb; --text: #171528; --muted: #5b5670; --faint: #5f5b73; --line: rgba(20, 16, 40, .12); --line-2: rgba(20, 16, 40, .06); --accent: #6450f0; --accent-2: #c25bff; --glow-a: #80a4ff; --glow-b: #dca0ff; --x: #ff2545; --x-ink: #d81a38; --on-accent: #ffffff; --grain: .03; --glow-strength: .62; --aura-blend: multiply; --aura-opacity: .6; color-scheme: light; } /* ===== COSMIC (sombre) ===== */ [data-colorway="cosmic"] { --bg: #08070f; --bg-2: #0c0a18; --surface: #15131f; --surface-2: #1d1a2b; --text: #ddd9ec; --muted: #a39fbd; --faint: #9692ad; --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06); --accent: #6b8cff; --accent-2: #a36bff; --glow-a: #3a57ff; --glow-b: #8b3bff; --x: #ff2545; --x-ink: #d81a38; --on-accent: #ffffff; --grain: .05; --glow-strength: .55; --aura-blend: screen; --aura-opacity: .25; color-scheme: dark; } /* ===== Suivi OS quand aucun override manuel (memes valeurs que Cosmic) ===== */ @media (prefers-color-scheme: dark) { :root:not([data-colorway]) { --bg: #08070f; --bg-2: #0c0a18; --surface: #15131f; --surface-2: #1d1a2b; --text: #ddd9ec; --muted: #a39fbd; --faint: #9692ad; --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06); --accent: #6b8cff; --accent-2: #a36bff; --glow-a: #3a57ff; --glow-b: #8b3bff; --x: #ff2545; --x-ink: #d81a38; --on-accent: #ffffff; --grain: .05; --glow-strength: .55; --aura-blend: screen; --aura-opacity: .25; color-scheme: dark; } } /* Application de base */ html { background: var(--bg); color: var(--text); } body { font-family: var(--font-body); transition: background-color .3s var(--ease), color .3s var(--ease); } /* Bascule de colorway : on affiche l'icone du theme vers lequel on bascule. Defaut Holo (clair) -> lune (passer en sombre). Cosmic -> soleil. */ .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } [data-colorway="cosmic"] .theme-toggle .ico-moon { display: none; } [data-colorway="cosmic"] .theme-toggle .ico-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-colorway]) .theme-toggle .ico-moon { display: none; } :root:not([data-colorway]) .theme-toggle .ico-sun { display: block; } }