/* Seconde 2 — design tokens Deux univers : "Papier" (clair, par défaut) et "Ardoise" (sombre). Bascule via [data-theme="dark"] sur , gérée par theme.js. */ :root { /* Papier */ --bg: #EDE7DC; --bg-elevated: #F5F1E8; --bg-inset: #E4DDCE; --text: #2E2A22; --text-muted: #6B6455; --accent: #3D5A6C; --accent-text: #F5F1E8; --accent-soft: #DCE3E4; --accent-secondary: #8A4B3F; --border: #D9D0BF; --border-strong: #C2B89F; --danger: #9B3B32; --focus-ring: #3D5A6C; /* Typographie */ --font-heading: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Karla", -apple-system, "Segoe UI", sans-serif; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.15rem); --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3rem); --fs-loader: clamp(2.4rem, 1.8rem + 2.8vw, 4.2rem); --lh-body: 1.65; --lh-heading: 1.2; /* Espacements */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3.25rem; --space-6: 5rem; --content-width: 42rem; --page-width: 72rem; --radius: 6px; --radius-sm: 4px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur-base: 260ms; } [data-theme="dark"] { /* Ardoise */ --bg: #22282A; --bg-elevated: #2B3133; --bg-inset: #1B2021; --text: #EAE4D8; --text-muted: #A6A89C; --accent: #8FB4C2; --accent-text: #1B2021; --accent-soft: #33474D; --accent-secondary: #D08A70; --border: #3A4143; --border-strong: #4A5254; --danger: #D98276; --focus-ring: #8FB4C2; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }