/* SoundLab FR — tokens. Importer en premier, avant toute autre feuille. Les polices sont chargées via dans le (pas d'@import : ça sérialise les requêtes et retarde le premier rendu). */ :root { --sl-bg: #0D0D0F; --sl-surface: #1A1B1F; --sl-surface-hover: #202126; --sl-border: #26272C; --sl-border-strong: #33343A; --sl-cyan: #22D3EE; --sl-cyan-soft: #67E8F9; --sl-violet: #A855F7; --sl-violet-soft: #C4B5FD; --sl-amber: #F59E0B; --sl-amber-soft: #FCD34D; --sl-text: #E5E7EB; --sl-text-2: #9CA3AF; --sl-text-3: #6B7280; --sl-text-on-accent: #0D0D0F; --sl-danger: #F87171; --sl-success: #34D399; --sl-gradient: linear-gradient(90deg, #22D3EE, #A855F7); --sl-gradient-d: linear-gradient(120deg, #22D3EE, #A855F7); --sl-r-sm: 8px; --sl-r-md: 12px; --sl-r-lg: 14px; --sl-r-xl: 20px; --sl-r-full: 999px; --sl-1: 4px; --sl-2: 8px; --sl-3: 12px; --sl-4: 16px; --sl-5: 20px; --sl-6: 24px; --sl-8: 32px; --sl-10: 40px; --sl-12: 48px; --sl-16: 64px; --sl-20: 80px; --sl-28: 112px; --sl-font: 'Space Grotesk', system-ui, sans-serif; --sl-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --sl-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --sl-shadow-2: 0 8px 24px rgba(0, 0, 0, .5); --sl-glow-cyan: 0 0 0 1px rgba(34, 211, 238, .35), 0 0 24px rgba(34, 211, 238, .18); --sl-container: 1180px; --sl-gutter: 24px; --sl-ease: cubic-bezier(.2, .8, .2, 1); --sl-t-fast: 120ms; --sl-t-base: 220ms; --sl-t-slow: 400ms; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--sl-bg); color: var(--sl-text); font-family: var(--sl-font); font-size: 17px; line-height: 1.6; text-wrap: pretty; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } h2 { font-weight: 500; letter-spacing: -.02em; font-size: 32px; } h3 { font-weight: 500; letter-spacing: -.01em; font-size: 22px; } a { color: var(--sl-cyan); text-decoration: none; transition: color var(--sl-t-fast) var(--sl-ease); } a:hover { color: var(--sl-cyan-soft); } :focus-visible { outline: none; box-shadow: var(--sl-glow-cyan); border-radius: var(--sl-r-sm); } ::selection { background: var(--sl-violet); color: var(--sl-bg); } .sl-label { font-family: var(--sl-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-cyan); } .sl-container { width: 100%; max-width: var(--sl-container); margin-inline: auto; padding-inline: var(--sl-gutter); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }