/* Tokens de design — palette + variables d'espacement / radius / ombres. Le thème (clair/sombre) est défini par les variables --bg / --text / ... qui changent selon [data-theme="dark"|"light"] sur . La sélection est gérée par /js/theme.js (clé localStorage : ui.theme). */ :root { /* Palette de base — partagée entre thèmes (couleurs sémantiques). */ --cherry-50: #fff1f2; --cherry-200: #ffc9cf; --cherry-500: #d4243a; --cherry-600: #b21e30; /* nouveau : plus accessible pour bouton primary */ --cherry-700: #8e1626; --cherry-900: #4a0a14; --leaf: #4a7c3a; --leaf-dark: #3a6230; /* nouveau : meilleur contraste sur paper */ --orange: #e88f3a; --gold: #e6b34a; --gold-dark: #b88a2a; /* nouveau : meilleur contraste sur paper */ --ink: #1a0e10; --paper: #fdf8f6; --danger: #c84a56; /* assombri pour AA contre fond clair et sombre */ --success: #5a8a4a; /* Espacements / radius / ombres / typo. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --tap-target: 44px; } /* THÈME SOMBRE (par défaut). */ :root, :root[data-theme="dark"] { --bg: #14080c; --bg-elev: #1f0e12; --bg-elev-2: #2a141a; --text: #f5e8ea; --text-muted: #b89598; --border: #3a1f23; /* Couleurs primaires utilisées en thème sombre. */ --primary: var(--cherry-500); --primary-on: #ffffff; --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } /* THÈME CLAIR. */ :root[data-theme="light"] { --bg: #faf3f4; --bg-elev: #ffffff; --bg-elev-2: #f4e8ea; --text: #1a0e10; --text-muted: #6a4d50; --border: #e0c8cc; /* On utilise cherry-600 (plus foncé) en clair pour passer AA sur blanc. */ --primary: var(--cherry-600); --primary-on: #ffffff; --shadow-md: 0 4px 12px rgba(40, 10, 15, 0.10); --shadow-lg: 0 8px 32px rgba(40, 10, 15, 0.16); } /* Si l'utilisateur n'a pas choisi et que son système préfère clair. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #faf3f4; --bg-elev: #ffffff; --bg-elev-2: #f4e8ea; --text: #1a0e10; --text-muted: #6a4d50; --border: #e0c8cc; --primary: var(--cherry-600); --primary-on: #ffffff; --shadow-md: 0 4px 12px rgba(40, 10, 15, 0.10); --shadow-lg: 0 8px 32px rgba(40, 10, 15, 0.16); } }