/* ============================================================ RAZCOM — DESIGN TOKENS v3 · "Departure Nocturne" Thème sombre unifié : near-black + aura cobalt/violet/corail/teal ============================================================ */ :root { /* Base — fond sombre profond partout */ --paper: #0A0E1C; /* fond global */ --paper-2: #0D1226; /* fond section alterné, un poil plus clair */ --ink: #F5F7FF; /* texte principal = quasi blanc */ --ink-2: #FFFFFF; --ink-soft: #AEB6D6; /* texte secondaire */ --ink-mute: #757F9E; /* texte discret */ /* Accents électriques */ --cobalt: #4C63FF; --cobalt-deep:#2E3FE0; --violet: #9B7CFF; --coral: #FF6A4C; --teal: #12E6C8; --gold: #FFC24B; /* Dégradés */ --grad-brand: linear-gradient(115deg, #4C63FF 0%, #9B7CFF 48%, #FF6A4C 105%); --grad-cool: linear-gradient(135deg, #4C63FF 0%, #7A6BFF 100%); --grad-hot: linear-gradient(135deg, #9B7CFF 0%, #FF6A4C 100%); --grad-teal: linear-gradient(135deg, #12E6C8 0%, #4C63FF 100%); --grad-ink: linear-gradient(160deg, #0D1226 0%, #05070F 100%); /* Surfaces — cartes en verre sombre */ --card: #10162C; --card-2: #141A34; --card-brd: rgba(255,255,255,0.08); --card-brd-2: rgba(255,255,255,0.16); --tint: rgba(255,255,255,0.05); --glass: rgba(16,22,44,.62); --glass-nav: rgba(10,14,28,.68); --glass-nav-strong: rgba(10,14,28,.9); /* Aura — halos radiaux réutilisés partout (band, cta, cartes) */ --aura-1: radial-gradient(38vw 38vw at 12% 15%, rgba(76,99,255,.30), transparent 60%); --aura-2: radial-gradient(34vw 34vw at 88% 85%, rgba(255,106,76,.24), transparent 60%); --aura-3: radial-gradient(28vw 28vw at 60% 40%, rgba(18,230,200,.16), transparent 60%); --aura-card: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 65%); /* Ombres — plus de glow, moins d'ombre portée classique */ --sh-xs: 0 1px 2px rgba(0,0,0,.3); --sh-sm: 0 2px 14px rgba(0,0,0,.35); --sh-md: 0 16px 44px rgba(0,0,0,.45); --sh-lg: 0 34px 90px rgba(0,0,0,.55); --glow-cobalt: 0 18px 50px rgba(76,99,255,.45); --glow-coral: 0 18px 50px rgba(255,106,76,.42); --glow-teal: 0 0 40px rgba(18,230,200,.5); /* Type */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-body: 'Inter', system-ui, sans-serif; --t-xs: clamp(.72rem, 1.3vw, .78rem); --t-sm: clamp(.84rem, 1.5vw, .92rem); --t-base: clamp(.96rem, 1.7vw, 1.06rem); --t-lg: clamp(1.1rem, 2vw, 1.28rem); --t-xl: clamp(1.3rem, 2.6vw, 1.6rem); --t-2xl: clamp(1.7rem, 3.6vw, 2.3rem); --t-3xl: clamp(2.2rem, 5vw, 3.4rem); --t-4xl: clamp(2.8rem, 7vw, 5rem); --t-mega: clamp(3.4rem, 11vw, 9.5rem); /* Rythme */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-full:999px; --max: 1280px; --ease: cubic-bezier(.19,1,.22,1); --spring: cubic-bezier(.34,1.56,.64,1); /* Surfaces additionnelles */ --deep: #05070F; /* noir quasi pur — bandes de contraste maximal, reste sombre dans les 2 thèmes */ --on-light: #0A0E1C; /* texte sombre utilisé sur fond blanc/clair (boutons, chips) */ } /* ============================================================ THÈME CLAIR — élégant, porcelaine chaude, mêmes accents Activé via [data-theme="light"] sur ============================================================ */ [data-theme="light"] { --paper: #FAF8F3; /* porcelaine chaude, pas blanc pur */ --paper-2: #FFFFFF; --ink: #14151C; /* texte principal quasi noir */ --ink-2: #000000; --ink-soft: #55586A; --ink-mute: #9497A6; --card: #FFFFFF; --card-2: #F6F4EE; --card-brd: rgba(20,21,28,0.08); --card-brd-2: rgba(20,21,28,0.14); --tint: rgba(76,99,255,0.055); /* légère teinte cobalt plutôt que gris neutre */ --glass: rgba(255,255,255,.72); --glass-nav: rgba(255,255,255,.66); --glass-nav-strong: rgba(255,255,255,.9); /* Aura plus vivante — froid + une touche chaude, pas juste délavé */ --aura-1: radial-gradient(40vw 40vw at 10% 10%, rgba(76,99,255,.22), transparent 62%); --aura-2: radial-gradient(36vw 36vw at 90% 18%, rgba(255,106,76,.16), transparent 60%); --aura-3: radial-gradient(34vw 34vw at 55% 90%, rgba(18,230,200,.15), transparent 62%); /* Ombres teintées navy — plus riches qu'un gris plat */ --sh-xs: 0 1px 2px rgba(31,40,74,.06); --sh-sm: 0 3px 14px rgba(31,40,74,.08); --sh-md: 0 16px 40px rgba(31,40,74,.11); --sh-lg: 0 32px 76px rgba(31,40,74,.14); }