/** * Thème Clefkey. — source unique des tokens clair / sombre. * * Chargé AVANT style.css et docs.css : ces fichiers ne définissent que des * composants et consomment les variables déclarées ici. * * Le thème appliqué est piloté par l'attribut `data-theme` sur * (posé par le script inline puis par js/theme.js) : * - data-theme="dark" → palette sombre * - data-theme="light" → palette claire * - attribut absent → fallback sur `prefers-color-scheme` de l'OS */ /* ── Tokens invariants (identiques clair / sombre) ──────── */ :root { --accent: #2F5FF0; --accent-light: #5b82f5; --accent-hover: #254ed6; --accent-glow: rgba(47, 95, 240, 0.28); --accent-subtle: rgba(47, 95, 240, 0.14); --success: #10b981; --success-subtle: rgba(16, 185, 129, 0.14); --error: #ef4444; --error-subtle: rgba(239, 68, 68, 0.14); --warning: #f59e0b; --info: #5b82f5; --radius: 16px; --radius-sm: 12px; --radius-xs: 8px; --radius-xl: 24px; --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --font-display: 'Segoe UI', 'Segoe UI Variable Text', system-ui, -apple-system, sans-serif; --sidebar-bg: #2F5FF0; --sidebar-text: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.72); --sidebar-active-bg: #ffffff; --sidebar-active-fg: #2F5FF0; /* Docs — invariants */ --docs-blue: #2F5FF0; --docs-font: 'IBM Plex Sans', 'Segoe UI', sans-serif; --docs-display: var(--font-display); --docs-mono: 'IBM Plex Mono', ui-monospace, monospace; --docs-sidebar-w: 280px; --docs-toc-w: 220px; --safe-top: 0px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: 0px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: 0px; --safe-left: env(safe-area-inset-left, 0px); --safe-right: 0px; --safe-right: env(safe-area-inset-right, 0px); } /* ── Palette sombre ────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-card: #161616; --bg-elevated: #1c1c1c; --bg-hover: #242424; --border: rgba(255, 255, 255, 0.1); --border-light: rgba(255, 255, 255, 0.18); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.72); --text-muted: rgba(255, 255, 255, 0.48); --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28); --overlay: rgba(0, 0, 0, 0.72); --loading-overlay: rgba(0, 0, 0, 0.78); --sidebar-overlay: rgba(0, 0, 0, 0.55); --sidebar-bg: #000000; --sidebar-text: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.62); --sidebar-active-bg: #ffffff; --sidebar-active-fg: #000000; --auth-orb-1: rgba(255, 255, 255, 0.08); --auth-orb-2: rgba(255, 255, 255, 0.05); --auth-orb-3: rgba(255, 255, 255, 0.04); /* Docs */ --docs-bg: #070707; --docs-panel: #0e0e0e; --docs-sidebar: #0a0a0a; --docs-border: rgba(255, 255, 255, 0.1); --docs-text: rgba(255, 255, 255, 0.92); --docs-muted: rgba(255, 255, 255, 0.58); --docs-body-text: rgba(255, 255, 255, 0.82); --docs-hover-bg: rgba(255, 255, 255, 0.05); --docs-code-bg: rgba(255, 255, 255, 0.06); --docs-code-border: rgba(255, 255, 255, 0.08); --docs-pre-bg: #050505; --docs-pre-text: rgba(255, 255, 255, 0.88); --docs-link: #8aa7ff; --docs-link-hover: #b7c7ff; --docs-burger: #ffffff; } /* ── Palette claire ────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg-primary: #F5F6FA; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-elevated: #F5F6FA; --bg-hover: #eef0f6; --border: #e6e8ef; --border-light: #d8dce8; --text-primary: #111827; --text-secondary: #6b7280; --text-muted: #9ca3af; --accent-glow: rgba(47, 95, 240, 0.18); --accent-subtle: rgba(47, 95, 240, 0.1); --success-subtle: rgba(16, 185, 129, 0.1); --error-subtle: rgba(239, 68, 68, 0.1); --shadow: 0 12px 40px rgba(17, 24, 39, 0.08); --shadow-sm: 0 4px 16px rgba(17, 24, 39, 0.05); --overlay: rgba(0, 0, 0, 0.35); --loading-overlay: rgba(255, 255, 255, 0.88); --sidebar-overlay: rgba(0, 0, 0, 0.3); --sidebar-bg: #2F5FF0; --sidebar-text: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.72); --sidebar-active-bg: #ffffff; --sidebar-active-fg: #2F5FF0; --auth-orb-1: rgba(47, 95, 240, 0.14); --auth-orb-2: rgba(47, 95, 240, 0.08); --auth-orb-3: rgba(91, 130, 245, 0.06); /* Docs */ --docs-bg: #f4f6fb; --docs-panel: #ffffff; --docs-sidebar: #eef1f7; --docs-border: rgba(15, 23, 42, 0.1); --docs-text: rgba(11, 13, 18, 0.92); --docs-muted: rgba(11, 13, 18, 0.55); --docs-body-text: rgba(11, 13, 18, 0.82); --docs-hover-bg: rgba(15, 23, 42, 0.06); --docs-code-bg: rgba(15, 23, 42, 0.06); --docs-code-border: rgba(15, 23, 42, 0.12); --docs-pre-bg: #0f1218; --docs-pre-text: rgba(255, 255, 255, 0.9); --docs-link: #2a4fb5; --docs-link-hover: #1b3585; --docs-burger: #0b0d12; } /* ── Fallback OS (avant que data-theme soit posé) ───────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-card: #161616; --bg-elevated: #1c1c1c; --bg-hover: #242424; --border: rgba(255, 255, 255, 0.1); --border-light: rgba(255, 255, 255, 0.18); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.72); --text-muted: rgba(255, 255, 255, 0.48); --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28); --overlay: rgba(0, 0, 0, 0.72); --loading-overlay: rgba(0, 0, 0, 0.78); --sidebar-overlay: rgba(0, 0, 0, 0.55); --sidebar-bg: #000000; --sidebar-text: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.62); --sidebar-active-bg: #ffffff; --sidebar-active-fg: #000000; --auth-orb-1: rgba(255, 255, 255, 0.08); --auth-orb-2: rgba(255, 255, 255, 0.05); --auth-orb-3: rgba(255, 255, 255, 0.04); --docs-bg: #070707; --docs-panel: #0e0e0e; --docs-sidebar: #0a0a0a; --docs-border: rgba(255, 255, 255, 0.1); --docs-text: rgba(255, 255, 255, 0.92); --docs-muted: rgba(255, 255, 255, 0.58); --docs-body-text: rgba(255, 255, 255, 0.82); --docs-hover-bg: rgba(255, 255, 255, 0.05); --docs-code-bg: rgba(255, 255, 255, 0.06); --docs-code-border: rgba(255, 255, 255, 0.08); --docs-pre-bg: #050505; --docs-pre-text: rgba(255, 255, 255, 0.88); --docs-link: #8aa7ff; --docs-link-hover: #b7c7ff; --docs-burger: #ffffff; } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg-primary: #F5F6FA; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-elevated: #F5F6FA; --bg-hover: #eef0f6; --border: #e6e8ef; --border-light: #d8dce8; --text-primary: #111827; --text-secondary: #6b7280; --text-muted: #9ca3af; --accent-glow: rgba(47, 95, 240, 0.18); --accent-subtle: rgba(47, 95, 240, 0.1); --shadow: 0 12px 40px rgba(17, 24, 39, 0.08); --shadow-sm: 0 4px 16px rgba(17, 24, 39, 0.05); --overlay: rgba(0, 0, 0, 0.35); --loading-overlay: rgba(255, 255, 255, 0.88); --sidebar-overlay: rgba(0, 0, 0, 0.3); --sidebar-bg: #2F5FF0; --sidebar-text: #ffffff; --sidebar-muted: rgba(255, 255, 255, 0.72); --sidebar-active-bg: #ffffff; --sidebar-active-fg: #2F5FF0; --auth-orb-1: rgba(47, 95, 240, 0.14); --auth-orb-2: rgba(47, 95, 240, 0.08); --auth-orb-3: rgba(91, 130, 245, 0.06); --docs-bg: #f4f6fb; --docs-panel: #ffffff; --docs-sidebar: #eef1f7; --docs-border: rgba(15, 23, 42, 0.1); --docs-text: rgba(11, 13, 18, 0.92); --docs-muted: rgba(11, 13, 18, 0.55); --docs-body-text: rgba(11, 13, 18, 0.82); --docs-hover-bg: rgba(15, 23, 42, 0.06); --docs-code-bg: rgba(15, 23, 42, 0.06); --docs-code-border: rgba(15, 23, 42, 0.12); --docs-pre-bg: #0f1218; --docs-pre-text: rgba(255, 255, 255, 0.9); --docs-link: #2a4fb5; --docs-link-hover: #1b3585; --docs-burger: #0b0d12; } }