/* ========================================================================= Kaï Consulting — Design System v2 — THEMES Best practices 2026 : - 3 thèmes : light (défaut), dark, high-contrast - Toggle utilisateur via [data-theme="…"] sur - Fallback automatique sur prefers-color-scheme si pas de toggle - color-scheme synchronisé pour les form controls natifs ========================================================================= */ /* ========================================================================= 1. LIGHT (par défaut) ========================================================================= */ :root { color-scheme: light; --bg: var(--ink-50); --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-muted: var(--ink-100); --surface-hover: color-mix(in oklch, var(--ink-100) 60%, transparent); --surface-glass: color-mix(in oklch, #FFFFFF 75%, transparent); --border: var(--ink-200); --border-strong: var(--ink-300); --border-brand: color-mix(in oklch, var(--kai-700) 25%, transparent); --fg: var(--ink-900); --fg-muted: var(--ink-600); --fg-subtle: var(--ink-500); --fg-faint: var(--ink-400); --brand: var(--kai-700); --brand-hover: var(--kai-800); --brand-active: var(--kai-900); --brand-soft: var(--kai-50); --brand-soft-hover: var(--kai-100); --brand-contrast: #FFFFFF; --brand-ring: color-mix(in oklch, var(--kai-700) 30%, transparent); --code-bg: var(--ink-900); --code-fg: var(--ink-100); --code-inline-bg: var(--ink-100); --code-inline-fg: var(--kai-700); } /* ========================================================================= 2. DARK — Auto si prefers-color-scheme: dark ET pas de toggle utilisateur ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--ink-950); --bg-elevated: var(--ink-900); --surface: var(--ink-900); --surface-muted: var(--ink-800); --surface-hover: color-mix(in oklch, var(--ink-800) 60%, transparent); --surface-glass: color-mix(in oklch, var(--ink-900) 75%, transparent); --border: color-mix(in oklch, var(--ink-700) 70%, transparent); --border-strong: var(--ink-700); --border-brand: color-mix(in oklch, var(--kai-600) 40%, transparent); --fg: var(--ink-50); --fg-muted: var(--ink-300); --fg-subtle: var(--ink-400); --fg-faint: var(--ink-500); --brand: var(--kai-600); --brand-hover: var(--kai-500); --brand-active: var(--kai-400); --brand-soft: color-mix(in oklch, var(--kai-600) 22%, transparent); --brand-soft-hover: color-mix(in oklch, var(--kai-600) 34%, transparent); --brand-contrast: #FFFFFF; --brand-ring: color-mix(in oklch, var(--kai-600) 40%, transparent); /* En dark mode, page bg = ink-950 — on remonte le code-bg à ink-900 pour que les cards de code (hero, articles) restent visibles. */ --code-bg: var(--ink-900); --code-fg: var(--ink-200); --code-inline-bg: var(--ink-800); --code-inline-fg: var(--kai-300); --shadow-color: oklch(2% 0 0); } } /* ========================================================================= 3. DARK — Forcé par le toggle utilisateur ========================================================================= */ [data-theme="dark"] { color-scheme: dark; --bg: var(--ink-950); --bg-elevated: var(--ink-900); --surface: var(--ink-900); --surface-muted: var(--ink-800); --surface-hover: color-mix(in oklch, var(--ink-800) 60%, transparent); --surface-glass: color-mix(in oklch, var(--ink-900) 75%, transparent); --border: color-mix(in oklch, var(--ink-700) 70%, transparent); --border-strong: var(--ink-700); --border-brand: color-mix(in oklch, var(--kai-600) 40%, transparent); --fg: var(--ink-50); --fg-muted: var(--ink-300); --fg-subtle: var(--ink-400); --fg-faint: var(--ink-500); --brand: var(--kai-600); --brand-hover: var(--kai-500); --brand-active: var(--kai-400); --brand-soft: color-mix(in oklch, var(--kai-600) 22%, transparent); --brand-soft-hover: color-mix(in oklch, var(--kai-600) 34%, transparent); --brand-contrast: #FFFFFF; --brand-ring: color-mix(in oklch, var(--kai-600) 40%, transparent); /* Idem dark forcé : code-bg légèrement plus clair que le page bg pour que les cards de code (hero, articles) restent distinctes. */ --code-bg: var(--ink-900); --code-fg: var(--ink-200); --code-inline-bg: var(--ink-800); --code-inline-fg: var(--kai-300); --shadow-color: oklch(2% 0 0); } /* ========================================================================= 4. HIGH CONTRAST — Pour les utilisateurs en accessibilité forte Active via [data-theme="contrast"] OU via prefers-contrast: more ========================================================================= */ @media (prefers-contrast: more) { :root:not([data-theme]) { --fg: var(--ink-950); --fg-muted: var(--ink-800); --fg-subtle: var(--ink-700); --border: var(--ink-700); --border-strong: var(--ink-900); --brand: var(--kai-900); --brand-hover: var(--kai-950); } } [data-theme="contrast"] { --fg: var(--ink-950); --fg-muted: var(--ink-800); --fg-subtle: var(--ink-700); --border: var(--ink-700); --border-strong: var(--ink-900); --brand: var(--kai-900); --brand-hover: var(--kai-950); } /* ========================================================================= 5. TRANSITION DOUCE LORS DU SWITCH DE THÈME On désactive transitions sur les propriétés de couleur pendant 1 frame après le switch pour éviter le flash, géré via JS (.theme-switching class) ========================================================================= */ .theme-switching * { transition: none !important; }