/* * Sonores — Design Tokens CSS * Source unique de vérité pour toutes les variables CSS. * Chargé EN PREMIER dans , avant style.css. * * Contrastes WCAG (sur fond --bg #08080f) : * --text #f1f5f9 → ratio ~15.0 : 1 → AAA ✓ * --text-muted #94a3b8 → ratio ~5.3 : 1 → AA ✓ (était .28 opacité = FAIL) * --text-dim #64748b → ratio ~3.1 : 1 → AA large text ✓ */ :root { /* ── Palette Cosmos ──────────────────────────────────────────────── */ --bg: #08080f; --surface: #0f0f1a; --surface-2: #14142a; --surface-3: #1a1a35; /* ── Accents iridescents (gradient 3 stops) ─────────────────────── */ --accent: #a78bfa; /* violet */ --accent-2: #5cc8ff; /* cyan */ --accent-3: #f472b6; /* rose */ /* Dégradé signature — iridescent collector */ --iris: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%); /* Variante angulaire pour les bordures */ --iris-border: linear-gradient(135deg, rgba(167,139,250,.6) 0%, rgba(92,200,255,.6) 50%, rgba(244,114,182,.6) 100% ); /* ── Bordures ────────────────────────────────────────────────────── */ --border: rgba(167, 139, 250, .15); --border-sm: rgba(167, 139, 250, .08); --border-strong:rgba(167, 139, 250, .35); /* ── Texte — tous WCAG AA+ sur --bg ─────────────────────────────── */ --text: #f1f5f9; /* principal 15.0:1 AAA */ --text-muted: #94a3b8; /* secondaire 5.3:1 AA */ --text-dim: #64748b; /* tertiaire 3.1:1 AA large */ /* ── Glassmorphisme ──────────────────────────────────────────────── */ --glass-bg: rgba(15, 15, 26, .60); --glass-blur: 20px; --glass-border: rgba(167, 139, 250, .20); /* ── Feedback ────────────────────────────────────────────────────── */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: var(--accent-2); /* ── Géométrie Bento ─────────────────────────────────────────────── */ --r: 18px; /* carte principale */ --r-sm: 10px; /* chip, badge */ --r-md: 14px; /* input, bouton */ --r-lg: 24px; /* modale, panel */ --r-xl: 32px; /* card hero */ --r-full: 9999px; /* pill */ /* ── Espacement (multiples de 4) ────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ── Typographie ─────────────────────────────────────────────────── */ /* Inter self-hosted (/assets/fonts/) — zéro requête CDN externe. Fallback : system-ui couvre macOS/iOS/Windows 11 avec une fonte propre. */ --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; /* ── Ombres ──────────────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .40); --shadow-md: 0 4px 24px rgba(0, 0, 0, .50); --shadow-lg: 0 8px 48px rgba(0, 0, 0, .60); --shadow-iris: 0 0 40px rgba(167, 139, 250, .15); --shadow-glow: 0 0 24px rgba(167, 139, 250, .30); /* ── Transitions ─────────────────────────────────────────────────── */ --ease: cubic-bezier(.4, 0, .2, 1); --dur: 180ms; --dur-s: 100ms; --dur-l: 300ms; /* ── Z-index scale ───────────────────────────────────────────────── */ --z-base: 0; --z-card: 10; --z-nav: 100; --z-drawer:200; --z-modal: 300; --z-toast: 400; }