/* ========================================================================== tokens.css — Design tokens Variables CSS exposées globalement. Aucune règle utilitaire ici. Réf : §6 du cahier des charges. ========================================================================== */ :root { /* Surfaces */ --bg: #0a0b0f; --bg-elevated: #14151c; --surface: #1a1c25; --surface-hover: #21232e; --surface-completed: #131419; --border: #2a2c38; --border-strong: #3a3d4d; /* Text */ --text: #e8eaf0; --text-muted: #8a8e9c; --text-dim: #4a4d5a; /* Status */ --success: #34d399; --success-bg: rgba(52, 211, 153, 0.10); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.10); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.10); /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Layout */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 9999px; --header-h: 60px; --max-width: 680px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-glow: 0 0 0 1px var(--accent-glow), 0 4px 24px var(--accent-glow); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 350ms; /* Accent par défaut (override par .accent-{name} sur ) */ --accent: #4f7cff; --accent-light: #7c9aff; --accent-glow: rgba(79, 124, 255, 0.18); } /* ── Variantes d'accent (appliquées sur etc.) ── */ .accent-blue { --accent: #4f7cff; --accent-light: #7c9aff; --accent-glow: rgba(79, 124, 255, 0.18); } .accent-green { --accent: #34d399; --accent-light: #6ee7b7; --accent-glow: rgba(52, 211, 153, 0.18); } .accent-amber { --accent: #fbbf24; --accent-light: #fcd34d; --accent-glow: rgba(251, 191, 36, 0.18); } .accent-violet { --accent: #a78bfa; --accent-light: #c4b5fd; --accent-glow: rgba(167, 139, 250, 0.18); }