/* ============================================================ VISION DARK — Design System Tokens v1.0 · Dark · Vermillion accent · 4px base Drop into after the self-hosted fonts stylesheet (pas de Google Fonts distant — RGPD, voir public/fonts/fonts.css) : ============================================================ */ :root { /* ── Backgrounds (void → overlay; lighter = more elevated) ── */ --bg-void: #090909; /* page background */ --bg-base: #111214; /* cards, default surface */ --bg-surface: #1A1C20; /* nested surface */ --bg-elevated: #222428; /* dark buttons, chips */ --bg-overlay: #2A2D32; /* tooltips, popovers */ /* ── Borders (white at low alpha — hairlines, not strokes) ── */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --border-accent: rgba(217,64,48,0.38); /* ── Foreground / Text ── */ --fg1: #F5F5F5; /* primary */ --fg2: rgba(245,245,245,0.55); /* secondary */ --fg3: rgba(245,245,245,0.30); /* tertiary / captions */ --fg4: rgba(245,245,245,0.18); /* disabled */ /* aliases matching source naming */ --text-primary: var(--fg1); --text-secondary: var(--fg2); --text-tertiary: var(--fg3); --text-disabled: var(--fg4); /* ── Accent · Vermillion (the only chromatic color) ── */ --accent: #D94030; --accent-bright: #E8503E; /* hover */ --accent-muted: rgba(217,64,48,0.14); --accent-glow: rgba(217,64,48,0.28); --accent-glow-strong: rgba(217,64,48,0.45); /* ── Status ── */ --status-success: #22C55E; --status-warning: #F59E0B; --status-info: #60A5FA; --status-error: var(--accent); /* errors reuse accent */ /* ── Typography families ── */ --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Type scale (rem) ── */ --text-2xs: 0.625rem; /* 10 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --text-7xl: 4.5rem; /* 72 */ --text-8xl: 6rem; /* 96 */ --text-9xl: 8rem; /* 128 */ /* ── Spacing (4px base) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── Radii ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* default for cards */ --radius-2xl: 24px; /* hero containers */ --radius-3xl: 32px; --radius-full: 9999px; /* buttons, badges-as-pills */ /* ── Shadows ── */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.45); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 20px 48px rgba(0,0,0,0.65); --shadow-glow-sm: 0 0 12px var(--accent-glow); --shadow-glow-md: 0 0 24px var(--accent-glow), 0 0 48px rgba(217,64,48,0.12); --shadow-glow-lg: 0 0 40px var(--accent-glow-strong), 0 0 80px rgba(217,64,48,0.14); /* ── Motion ── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* hover/focus default */ --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); /* panel/page transitions */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro overshoot */ --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-slower: 600ms; } /* ============================================================ BASE + SEMANTIC ELEMENTS These give h1 / h2 / p / code etc. their Vision Dark defaults. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg-void); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: var(--bg-overlay); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Display headers — Barlow Condensed, uppercase, tight */ h1, .h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 8vw, var(--text-9xl)); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; color: var(--text-primary); } h2, .h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; color: var(--text-primary); } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--text-primary); } h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1; color: var(--text-secondary); } /* Subtitle — paired with h1/h2, condensed but lighter weight */ .subtitle { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } /* Eyebrow — mono, accent, wide tracking, sits above an h1 */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); text-transform: uppercase; letter-spacing: 0.15em; } /* Body */ p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; } .lead { font-size: var(--text-lg); color: var(--text-primary); } .caption { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.5; } /* Mono — tokens, code, labels */ code, kbd, samp, .mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-bright); } .label-mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.10em; } /* Links */ a { color: var(--accent-bright); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo); } a:hover { color: var(--accent); } /* Selection */ ::selection { background: var(--accent); color: #fff; } /* Hairline divider */ hr, .divider { border: none; height: 1px; background: var(--border-subtle); margin: var(--space-8) 0; } .divider-accent { background: linear-gradient(90deg, transparent, var(--accent), transparent); } /* ============================================================ UTILITY KEYFRAMES — the three sanctioned motions ============================================================ */ @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes signal { 0%,100% { box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent-glow); transform: scale(1); } 50% { box-shadow: 0 0 14px var(--accent), 0 0 32px var(--accent-glow); transform: scale(1.2); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .float { animation: float 4s ease-in-out infinite; } .shimmer { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: shimmer 2s linear infinite; }