/* ============================================================================= ELYSIUM DESIGN SYSTEM — TOKENS Extrait du logo Elysium Agency : script néon cyan sur navy profond. Source unique de vérité. Aucun composant ne doit contenir une valeur brute (couleur hex, px d'espacement, ombre) : tout passe par une variable d'ici. ============================================================================= */ :root { /* ========================================================================== 1. COULEURS PRIMITIVES ========================================================================== */ /* --- Cyan néon : le cœur lumineux du lettrage ------------------------- */ --ely-cyan-50: #F2FCFF; --ely-cyan-100: #DCF5FF; --ely-cyan-200: #B4EAFF; --ely-cyan-300: #7ADCFF; --ely-cyan-400: #38C6FF; /* ← accent principal de la marque */ --ely-cyan-500: #12A9EE; --ely-cyan-600: #0A87C6; --ely-cyan-700: #0A6796; /* --- Bleu électrique : le halo autour du lettrage --------------------- */ --ely-blue-300: #6FA8FF; --ely-blue-400: #3B82F6; --ely-blue-500: #1D6FE0; --ely-blue-600: #1454B2; --ely-blue-700: #0D3C82; --ely-blue-800: #082A5C; /* --- Navy : le fond, du centre éclairé aux coins noirs ----------------- */ --ely-navy-950: #01050D; --ely-navy-900: #030916; /* fond de page, le plus sombre */ --ely-navy-850: #061024; --ely-navy-800: #0A162E; /* surface de base */ --ely-navy-700: #102343; /* surface surélevée */ --ely-navy-600: #17335C; --ely-navy-500: #204476; --ely-navy-400: #2E5A93; /* --- Neutres ---------------------------------------------------------- */ --ely-white: #FFFFFF; --ely-ice-100: #EAF2FF; --ely-ice-200: #C6D8F0; --ely-ice-300: #A8BEDC; --ely-ice-400: #7E97BC; --ely-ice-500: #5B7095; /* --- Sémantiques ------------------------------------------------------ */ --ely-success-400: #3DDC97; --ely-success-600: #14A97A; --ely-warning-400: #FFB84D; --ely-warning-600: #C77F14; --ely-danger-400: #FF5D6C; --ely-danger-600: #C42C3C; /* ========================================================================== 2. ALIAS SÉMANTIQUES — utilisez ceux-ci dans les composants ========================================================================== */ /* Fonds */ --ely-bg: var(--ely-navy-900); --ely-bg-subtle: var(--ely-navy-850); --ely-surface: var(--ely-navy-800); --ely-surface-raised: var(--ely-navy-700); --ely-surface-glass: rgba(16, 35, 67, 0.55); --ely-surface-glass-strong: rgba(16, 35, 67, 0.82); --ely-overlay: rgba(1, 5, 13, 0.78); /* Texte */ --ely-text: var(--ely-ice-100); --ely-text-secondary: var(--ely-ice-300); --ely-text-muted: var(--ely-ice-400); --ely-text-accent: var(--ely-cyan-300); --ely-text-on-accent: var(--ely-navy-950); /* Bordures */ --ely-border: rgba(122, 220, 255, 0.14); --ely-border-strong: rgba(122, 220, 255, 0.30); --ely-border-accent: rgba(56, 198, 255, 0.55); --ely-border-subtle: rgba(122, 220, 255, 0.07); /* Accent */ --ely-accent: var(--ely-cyan-400); --ely-accent-hover: var(--ely-cyan-300); --ely-accent-active: var(--ely-cyan-500); --ely-accent-soft: rgba(56, 198, 255, 0.12); --ely-accent-softer: rgba(56, 198, 255, 0.06); /* États */ --ely-success: var(--ely-success-400); --ely-warning: var(--ely-warning-400); --ely-danger: var(--ely-danger-400); --ely-info: var(--ely-cyan-400); /* ========================================================================== 3. DÉGRADÉS SIGNATURE ========================================================================== */ /* Le fond du logo : centre légèrement éclairé, coins noirs */ --ely-gradient-page: radial-gradient(ellipse 120% 85% at 50% 40%, #0D2549 0%, #061024 45%, transparent 75%); --ely-gradient-accent: linear-gradient(135deg, var(--ely-cyan-300) 0%, var(--ely-cyan-400) 45%, var(--ely-blue-500) 100%); --ely-gradient-accent-soft: linear-gradient(135deg, rgba(122,220,255,0.18) 0%, rgba(29,111,224,0.10) 100%); /* Le trait lumineux qui traverse le logo */ --ely-gradient-swoosh: linear-gradient(90deg, transparent 0%, rgba(56,198,255,0.15) 12%, rgba(180,234,255,0.95) 50%, rgba(56,198,255,0.15) 88%, transparent 100%); --ely-gradient-text: linear-gradient(120deg, var(--ely-cyan-100) 0%, var(--ely-cyan-300) 40%, var(--ely-blue-300) 100%); --ely-gradient-surface: linear-gradient(160deg, rgba(23,51,92,0.55) 0%, rgba(10,22,46,0.35) 100%); /* ========================================================================== 4. GLOW — l'effet signature de la marque Trois intensités. Toujours en cascade : cœur serré → halo large. ========================================================================== */ --ely-glow-xs: 0 0 6px rgba(56,198,255,0.35); --ely-glow-sm: 0 0 8px rgba(56,198,255,0.40), 0 0 22px rgba(29,111,224,0.24); --ely-glow-md: 0 0 12px rgba(56,198,255,0.48), 0 0 34px rgba(29,111,224,0.32), 0 0 68px rgba(29,111,224,0.16); --ely-glow-lg: 0 0 16px rgba(122,220,255,0.55), 0 0 48px rgba(56,198,255,0.38), 0 0 110px rgba(29,111,224,0.24); /* Glow appliqué au texte (text-shadow, pas box-shadow) */ --ely-glow-text-sm: 0 0 8px rgba(56,198,255,0.55), 0 0 20px rgba(29,111,224,0.35); --ely-glow-text-md: 0 0 6px rgba(234,249,255,0.85), 0 0 18px rgba(56,198,255,0.65), 0 0 44px rgba(29,111,224,0.45); --ely-glow-text-lg: 0 0 4px rgba(255,255,255,0.95), 0 0 14px rgba(180,234,255,0.85), 0 0 38px rgba(56,198,255,0.65), 0 0 90px rgba(29,111,224,0.45); /* ========================================================================== 5. ÉLÉVATION — ombres portées neutres (se cumulent avec le glow) ========================================================================== */ --ely-shadow-sm: 0 1px 2px rgba(1,5,13,0.55); --ely-shadow-md: 0 4px 14px rgba(1,5,13,0.55), 0 1px 3px rgba(1,5,13,0.40); --ely-shadow-lg: 0 12px 34px rgba(1,5,13,0.60), 0 4px 10px rgba(1,5,13,0.40); --ely-shadow-xl: 0 26px 64px rgba(1,5,13,0.68), 0 8px 20px rgba(1,5,13,0.45); /* ========================================================================== 6. TYPOGRAPHIE ========================================================================== */ /* Familles. - display : le script calligraphique du logo. Réservé au wordmark et aux accroches courtes. Jamais pour du texte courant. - heading : sans-serif géométrique, présence forte. - body : sans-serif neutre, très lisible en petit corps. */ --ely-font-display: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive; --ely-font-heading: 'Sora', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --ely-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --ely-font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, Consolas, monospace; /* Échelle fluide — ratio ~1.25 (majeure tierce), clampée pour le responsive */ --ely-text-2xs: 0.6875rem; /* 11px */ --ely-text-xs: 0.75rem; /* 12px */ --ely-text-sm: 0.875rem; /* 14px */ --ely-text-base: 1rem; /* 16px */ --ely-text-md: 1.0625rem; /* 17px */ --ely-text-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem); --ely-text-xl: clamp(1.375rem, 0.7vw + 1.21rem, 1.625rem); --ely-text-2xl: clamp(1.75rem, 1.2vw + 1.47rem, 2.25rem); --ely-text-3xl: clamp(2.125rem, 2.0vw + 1.66rem, 3rem); --ely-text-4xl: clamp(2.625rem, 3.4vw + 1.83rem, 4.25rem); --ely-text-5xl: clamp(3.25rem, 5.2vw + 2.03rem, 6rem); /* Graisses */ --ely-weight-light: 300; --ely-weight-regular: 400; --ely-weight-medium: 500; --ely-weight-semibold: 600; --ely-weight-bold: 700; --ely-weight-extrabold: 800; /* Interlignes */ --ely-leading-none: 1; --ely-leading-tight: 1.12; --ely-leading-snug: 1.3; --ely-leading-normal: 1.6; --ely-leading-relaxed: 1.75; /* Interlettrages — les titres serrent, les eyebrows s'écartent */ --ely-tracking-tighter: -0.03em; --ely-tracking-tight: -0.018em; --ely-tracking-normal: 0; --ely-tracking-wide: 0.04em; --ely-tracking-wider: 0.12em; --ely-tracking-widest: 0.22em; /* ========================================================================== 7. ESPACEMENT — base 4px ========================================================================== */ --ely-space-0: 0; --ely-space-1: 0.25rem; /* 4px */ --ely-space-2: 0.5rem; /* 8px */ --ely-space-3: 0.75rem; /* 12px */ --ely-space-4: 1rem; /* 16px */ --ely-space-5: 1.25rem; /* 20px */ --ely-space-6: 1.5rem; /* 24px */ --ely-space-8: 2rem; /* 32px */ --ely-space-10: 2.5rem; /* 40px */ --ely-space-12: 3rem; /* 48px */ --ely-space-16: 4rem; /* 64px */ --ely-space-20: 5rem; /* 80px */ --ely-space-24: 6rem; /* 96px */ --ely-space-32: 8rem; /* 128px */ --ely-space-40: 10rem; /* 160px */ /* Rythme vertical des sections (respire beaucoup — codes agence) */ --ely-section-y: clamp(4rem, 8vw, 9rem); --ely-section-y-tight: clamp(2.5rem, 5vw, 5rem); /* ========================================================================== 8. RAYONS ========================================================================== */ --ely-radius-xs: 4px; --ely-radius-sm: 8px; --ely-radius-md: 12px; --ely-radius-lg: 16px; --ely-radius-xl: 24px; --ely-radius-2xl: 32px; --ely-radius-full: 999px; /* ========================================================================== 9. BORDURES & TRAITS ========================================================================== */ --ely-border-width: 1px; --ely-border-width-thick: 2px; --ely-ring-width: 2px; --ely-ring-offset: 2px; --ely-focus-ring: 0 0 0 var(--ely-ring-offset) var(--ely-navy-900), 0 0 0 calc(var(--ely-ring-offset) + var(--ely-ring-width)) var(--ely-cyan-400), 0 0 18px rgba(56,198,255,0.55); /* ========================================================================== 10. MOUVEMENT ========================================================================== */ --ely-duration-instant: 80ms; --ely-duration-fast: 160ms; --ely-duration-normal: 260ms; --ely-duration-slow: 420ms; --ely-duration-slower: 700ms; --ely-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ely-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ely-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ely-transition: all var(--ely-duration-fast) var(--ely-ease-out); /* ========================================================================== 11. LAYOUT ========================================================================== */ --ely-container: 1200px; --ely-container-wide: 1400px; --ely-container-prose: 68ch; --ely-gutter: clamp(1.25rem, 4vw, 3rem); /* Breakpoints (référence — CSS ne peut pas les utiliser en media query) */ --ely-bp-sm: 640px; --ely-bp-md: 768px; --ely-bp-lg: 1024px; --ely-bp-xl: 1280px; /* ========================================================================== 12. Z-INDEX ========================================================================== */ --ely-z-base: 0; --ely-z-raised: 10; --ely-z-sticky: 100; --ely-z-header: 200; --ely-z-dropdown: 300; --ely-z-overlay: 400; --ely-z-modal: 500; --ely-z-toast: 600; }