/* * variables.css * Design tokens : couleurs, typographie, espacements, transitions. * Le thème est piloté par l'attribut data-theme sur . */ :root { --font-display: "Space Grotesk", sans-serif; --font-body: "Inter", sans-serif; --accent: #007fff; --accent-soft: rgba(0, 127, 255, 0.14); --accent-glow: rgba(0, 127, 255, 0.35); --gradient: linear-gradient(135deg, #007fff 0%, #00c6ff 100%); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; --transition-fast: 0.2s ease; --transition-med: 0.45s cubic-bezier(0.22, 1, 0.36, 1); --transition-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1); --header-height: 72px; --container-max: 1140px; } [data-theme="dark"] { --bg: #0a0e17; --bg-alt: #0f1524; --surface: #141b2e; --surface-hover: #1a2338; --border: rgba(255, 255, 255, 0.08); --text: #e8ecf4; --text-muted: #98a2b8; --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); --particle: rgba(0, 127, 255, 0.55); --particle-link: rgba(0, 127, 255, 0.12); } [data-theme="light"] { --bg: #f6f8fc; --bg-alt: #eef2f9; --surface: #ffffff; --surface-hover: #f0f5fb; --border: rgba(10, 20, 40, 0.1); --text: #1c2433; --text-muted: #5a6579; --shadow: 0 12px 40px rgba(20, 40, 80, 0.12); --particle: rgba(0, 127, 255, 0.45); --particle-link: rgba(0, 127, 255, 0.1); }