/* ============================================================================ NECROPOLIS V2 - DESIGN TOKENS ---------------------------------------------------------------------------- Production-grade token system. Refs: Linear / Vercel / Frostpunk / Helldivers 2 HUD / Death Stranding / Cyberpunk 2077 / Apple HIG / Stripe. Architecture 3 niveaux : 1. PRIMITIVES : valeurs brutes immutables (palette OKLCH, scale, etc.) 2. SEMANTIC : intent contextuel (--bg-base, --text-primary, ...) 3. COMPONENTS : tokens specifiques (HP bar, resource pill, ...) Convention : --{category}-{role}-{variant?} ex: --bg-elevated, --text-primary, --color-blood-500, --shadow-glow-blood Compat : aliases en bas de fichier pour le CSS app.css existant (--c-blood etc.) ============================================================================ */ :root { color-scheme: dark; /* ========================================================================== 1. PALETTE PRIMITIVE - BACKGROUNDS (8 niveaux de profondeur) -------------------------------------------------------------------------- Echelle de noirs neutres legerement froids (hint de bleu metal). -depth-0 = abyss (vide cosmique) -> -depth-7 = elevated (UI flottante). ========================================================================== */ --depth-0: #000000; /* abyss - black hole, video bg */ --depth-1: #050507; /* void - app shell base */ --depth-2: #0a0a0d; /* obsidian - canvas */ --depth-3: #0e0e10; /* noir - principal background */ --depth-4: #14141a; /* coal - section background */ --depth-5: #1c1c20; /* concrete - cards, panels */ --depth-6: #22222a; /* steel - elevated surfaces */ --depth-7: #2a2a2e; /* graphite - top elevation, modals */ /* ========================================================================== 1. PALETTE PRIMITIVE - SURFACES GLASS / OPAQUE / ELEVATED -------------------------------------------------------------------------- Translucide pour HUD militaire layered. Backdrop-filter requis. ========================================================================== */ --surface-glass-subtle: rgba(255, 255, 255, 0.025); --surface-glass-low: rgba(255, 255, 255, 0.04); --surface-glass: rgba(255, 255, 255, 0.06); --surface-glass-elevated: rgba(255, 255, 255, 0.09); --surface-glass-high: rgba(255, 255, 255, 0.12); --surface-tint-blood: rgba(168, 30, 30, 0.08); --surface-tint-fire: rgba(232, 106, 25, 0.07); --surface-tint-tesla: rgba(58, 227, 255, 0.06); --surface-tint-toxic: rgba(107, 191, 58, 0.06); --surface-opaque-low: #14141a; --surface-opaque-mid: #1c1c20; --surface-opaque-high: #22222a; --surface-opaque-top: #2a2a2e; /* ========================================================================== 1. PALETTE PRIMITIVE - BLOOD (brand primary, 11 shades) -------------------------------------------------------------------------- OKLCH calibre : L decroissant 95% -> 18%, C max ~0.21 a L 50%. ========================================================================== */ --color-blood-50: oklch(95% 0.018 22); /* #fbe6e6 - hairline tint */ --color-blood-100: oklch(89% 0.045 22); /* badge bg light */ --color-blood-200: oklch(80% 0.085 22); /* hover light */ --color-blood-300: oklch(70% 0.130 22); /* */ --color-blood-400: oklch(60% 0.180 22); /* */ --color-blood-500: oklch(54% 0.210 22); /* #C92B2B - blood-glow */ --color-blood-600: oklch(48% 0.205 22); /* #A81E1E - blood (primary) */ --color-blood-700: oklch(40% 0.180 22); /* #7A1414 - blood-dark */ --color-blood-800: oklch(33% 0.150 22); /* */ --color-blood-900: oklch(26% 0.110 22); /* deep wine */ --color-blood-950: oklch(18% 0.075 22); /* near black tinted */ /* ========================================================================== 1. PALETTE PRIMITIVE - FIRE (orange chaud / explosion / molotov) ========================================================================== */ --color-fire-50: oklch(96% 0.022 55); --color-fire-100: oklch(91% 0.055 55); --color-fire-200: oklch(83% 0.105 55); --color-fire-300: oklch(73% 0.155 55); --color-fire-400: oklch(66% 0.185 55); /* #E86A19 - fire */ --color-fire-500: oklch(60% 0.180 55); --color-fire-600: oklch(54% 0.165 55); /* #B84F0E - fire-dark */ --color-fire-700: oklch(45% 0.140 55); --color-fire-800: oklch(36% 0.110 55); --color-fire-900: oklch(28% 0.080 55); --color-fire-950: oklch(20% 0.055 55); /* ========================================================================== 1. PALETTE PRIMITIVE - TOXIC (vert biohazard / radiation) ========================================================================== */ --color-toxic-50: oklch(96% 0.030 135); --color-toxic-100: oklch(90% 0.075 135); --color-toxic-200: oklch(83% 0.130 135); --color-toxic-300: oklch(76% 0.180 135); --color-toxic-400: oklch(70% 0.205 135); /* #6BBF3A - toxic */ --color-toxic-500: oklch(63% 0.190 135); --color-toxic-600: oklch(55% 0.165 135); --color-toxic-700: oklch(45% 0.135 135); --color-toxic-800: oklch(35% 0.105 135); --color-toxic-900: oklch(27% 0.080 135); --color-toxic-950: oklch(19% 0.055 135); /* ========================================================================== 1. PALETTE PRIMITIVE - TESLA (cyan electrique / arc / EMP) ========================================================================== */ --color-tesla-50: oklch(97% 0.022 220); --color-tesla-100: oklch(92% 0.055 220); --color-tesla-200: oklch(86% 0.100 220); --color-tesla-300: oklch(80% 0.140 220); /* #3AE3FF - tesla */ --color-tesla-400: oklch(74% 0.155 220); --color-tesla-500: oklch(67% 0.165 220); --color-tesla-600: oklch(58% 0.155 220); --color-tesla-700: oklch(48% 0.135 220); --color-tesla-800: oklch(38% 0.110 220); --color-tesla-900: oklch(28% 0.080 220); --color-tesla-950: oklch(20% 0.055 220); /* ========================================================================== 1. PALETTE PRIMITIVE - NEON (jaune signaletique / waypoint / loot) ========================================================================== */ --color-neon-50: oklch(97% 0.025 90); --color-neon-100: oklch(93% 0.075 90); --color-neon-200: oklch(88% 0.135 90); --color-neon-300: oklch(83% 0.170 90); /* #F2C94C - neon */ --color-neon-400: oklch(78% 0.180 90); --color-neon-500: oklch(72% 0.175 90); --color-neon-600: oklch(63% 0.155 90); --color-neon-700: oklch(52% 0.130 90); --color-neon-800: oklch(41% 0.105 90); --color-neon-900: oklch(31% 0.080 90); --color-neon-950: oklch(22% 0.055 90); /* ========================================================================== 1. PALETTE PRIMITIVE - FOG (gris-bleu post-apo / brouillard / metal) ========================================================================== */ --color-fog-50: oklch(96% 0.005 230); --color-fog-100: oklch(89% 0.010 230); --color-fog-200: oklch(78% 0.015 230); --color-fog-300: oklch(67% 0.020 230); --color-fog-400: oklch(56% 0.022 230); /* #5A6B75 - fog */ --color-fog-500: oklch(48% 0.022 230); --color-fog-600: oklch(40% 0.020 230); --color-fog-700: oklch(32% 0.018 230); --color-fog-800: oklch(24% 0.015 230); --color-fog-900: oklch(17% 0.012 230); --color-fog-950: oklch(11% 0.010 230); /* ========================================================================== 1. PALETTE PRIMITIVE - BONE (texte / os / parchemin sale) ========================================================================== */ --color-bone-50: #f5f1e9; --color-bone-100: #ece5d6; --color-bone-200: #ddd2bc; --color-bone-300: #c8c0b4; /* #c8c0b4 - bone original */ --color-bone-400: #a89e8a; --color-bone-500: #877d6a; --color-bone-600: #695f4f; --color-bone-700: #4a4339; --color-bone-800: #322c25; --color-bone-900: #1d1915; /* ========================================================================== 1. PALETTE PRIMITIVE - RUST (rouille / metal corrode / bois brule) ========================================================================== */ --color-rust-50: #f4e8e0; --color-rust-100: #e6d0bc; --color-rust-200: #c8a888; --color-rust-300: #9a755b; --color-rust-400: #7a5440; --color-rust-500: #5A4030; /* rouille-2 */ --color-rust-600: #453C38; /* rouille */ --color-rust-700: #322a26; --color-rust-800: #221c19; --color-rust-900: #14110f; /* ========================================================================== 2. SEMANTIC - BACKGROUNDS ========================================================================== */ --bg-abyss: var(--depth-0); --bg-base: var(--depth-1); --bg-canvas: var(--depth-2); --bg-app: var(--depth-3); --bg-section: var(--depth-4); --bg-surface: var(--depth-5); --bg-elevated: var(--depth-6); --bg-floating: var(--depth-7); --bg-glass: var(--surface-glass); --bg-glass-low: var(--surface-glass-low); --bg-glass-high: var(--surface-glass-elevated); --bg-overlay: rgba(5, 5, 7, 0.72); /* modal backdrop */ --bg-overlay-deep: rgba(0, 0, 0, 0.88); /* video / dramatic */ --bg-scrim: rgba(5, 5, 7, 0.45); /* drawer/sheet */ /* ========================================================================== 2. SEMANTIC - TEXT (5 niveaux de contraste WCAG AA+ sur --bg-app #0e0e10) -------------------------------------------------------------------------- Mesures : primary 21:1 - body, titres, CTA secondary 10.5:1 - sous-titres, labels tertiary 5.8:1 - meta, timestamps, hints (>4.5 AA) quaternary 3.9:1 - placeholders, disabled (UI uniquement, jamais texte) muted 2.8:1 - separateurs textuels seulement ========================================================================== */ --text-primary: #f5f5f7; /* never pure white */ --text-secondary: #c8c8d0; --text-tertiary: #8b8b94; --text-quaternary: #5e5e66; --text-muted: #3f3f46; --text-inverse: #0e0e10; /* on light bg */ --text-brand: var(--color-blood-500); --text-brand-hover:var(--color-blood-400); --text-link: var(--color-tesla-300); --text-link-hover: var(--color-tesla-200); --text-on-blood: #ffffff; --text-on-fire: #1a0a00; --text-on-toxic: #0a1505; --text-on-tesla: #001518; --text-on-neon: #1a1500; /* ========================================================================== 2. SEMANTIC - BORDERS ========================================================================== */ --border-hairline: rgba(255, 255, 255, 0.04); /* invisible separation */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-emphasis: rgba(255, 255, 255, 0.24); --border-blood: rgba(168, 30, 30, 0.40); --border-blood-strong:rgba(201, 43, 43, 0.65); --border-fire: rgba(232, 106, 25, 0.40); --border-tesla: rgba(58, 227, 255, 0.40); --border-toxic: rgba(107, 191, 58, 0.40); --border-neon: rgba(242, 201, 76, 0.40); --border-focus: var(--color-tesla-400); --border-error: var(--color-blood-500); --border-success: var(--color-toxic-500); --border-warning: var(--color-neon-400); /* ========================================================================== 2. SEMANTIC - STATES (success / warning / error / info) ========================================================================== */ --state-success-bg: rgba(107, 191, 58, 0.10); --state-success-fg: var(--color-toxic-300); --state-success-solid: var(--color-toxic-500); --state-success-border:rgba(107, 191, 58, 0.35); --state-warning-bg: rgba(242, 201, 76, 0.10); --state-warning-fg: var(--color-neon-300); --state-warning-solid: var(--color-neon-500); --state-warning-border:rgba(242, 201, 76, 0.35); --state-error-bg: rgba(168, 30, 30, 0.12); --state-error-fg: var(--color-blood-400); --state-error-solid: var(--color-blood-600); --state-error-border: rgba(168, 30, 30, 0.40); --state-info-bg: rgba(58, 227, 255, 0.08); --state-info-fg: var(--color-tesla-300); --state-info-solid: var(--color-tesla-500); --state-info-border: rgba(58, 227, 255, 0.35); /* ========================================================================== 3. TYPOGRAPHY - FONT STACKS -------------------------------------------------------------------------- Display : sans grotesque pour HUD militaire (Inter Display, Geist) Body : Inter (variable, OpenType features) Mono : pour stats, ratios, codes evenement (JetBrains Mono / Geist Mono) Brand : Eurostile / Rajdhani style sci-fi (fallback Inter compresse) ========================================================================== */ --font-display: 'Inter Display', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Geist Mono', 'SF Mono', Menlo, Consolas, 'Courier New', monospace; --font-brand: 'Rajdhani', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-features-body: 'cv11', 'ss01', 'ss03', 'kern', 'liga'; --font-features-num: 'tnum', 'lnum', 'zero'; /* tabular numbers */ --font-features-mono: 'liga' off, 'calt' off; /* code display */ /* ========================================================================== 3. TYPOGRAPHY - SCALE (Major Third, ratio 1.25) -------------------------------------------------------------------------- Base 16px. 12 tailles. Convention rem pour scaling utilisateur respecte. ========================================================================== */ --text-xs: 0.6875rem; /* 11px - micro labels, badges */ --text-sm: 0.8125rem; /* 13px - meta, UI controls */ --text-base: 0.9375rem; /* 15px - body principal mobile */ --text-md: 1rem; /* 16px - body desktop, prose */ --text-lg: 1.125rem; /* 18px - lead, intro */ --text-xl: 1.25rem; /* 20px - h6 */ --text-2xl: 1.5rem; /* 24px - h5 */ --text-3xl: 1.875rem; /* 30px - h4 */ --text-4xl: 2.25rem; /* 36px - h3 */ --text-5xl: 3rem; /* 48px - h2 */ --text-6xl: 3.75rem; /* 60px - h1 */ --text-7xl: 4.5rem; /* 72px - hero compact */ --text-8xl: 6rem; /* 96px - hero standard */ --text-9xl: 8rem; /* 128px - splash / cinematic */ /* ========================================================================== 3. TYPOGRAPHY - WEIGHTS ========================================================================== */ --weight-thin: 100; --weight-extralight: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* ========================================================================== 3. TYPOGRAPHY - LINE HEIGHTS ========================================================================== */ --leading-none: 1; --leading-tight: 1.1; /* hero/display */ --leading-snug: 1.25; /* headings */ --leading-normal: 1.4; /* UI text */ --leading-relaxed:1.55; /* body prose */ --leading-loose: 1.75; /* longform reading */ /* ========================================================================== 3. TYPOGRAPHY - LETTER SPACING (negatif sur display, positif sur eyebrow) ========================================================================== */ --tracking-tightest: -0.04em; /* hero >64px */ --tracking-tighter: -0.025em; /* display 32-64 */ --tracking-tight: -0.012em; /* h2-h4 */ --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.12em; /* eyebrow ALL CAPS */ --tracking-tactical: 0.18em; /* HUD labels military */ /* ========================================================================== 4. SPACING (8pt grid + 4pt half-step pour densite militaire) ========================================================================== */ --space-0: 0; --space-px: 1px; --space-0_5: 2px; --space-1: 4px; --space-1_5: 6px; --space-2: 8px; --space-2_5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-32: 128px; --space-40: 160px; --space-48: 192px; --space-56: 224px; --space-64: 256px; /* ========================================================================== 5. RADII / BORDERS - sharp HUD militaire + accents subtils -------------------------------------------------------------------------- Geometry premium : majorite sharp/2px tactical, radius reserve aux pills. ========================================================================== */ --radius-none: 0; --radius-xs: 2px; /* tactical chamfer */ --radius-sm: 4px; /* HUD card */ --radius-md: 6px; /* button default */ --radius-lg: 8px; /* card */ --radius-xl: 12px; /* modal */ --radius-2xl: 16px; --radius-3xl: 24px; --radius-pill: 9999px; /* badge, avatar circle */ --radius-full: 50%; /* circle */ /* Border widths */ --border-w-hair: 0.5px; --border-w-thin: 1px; --border-w-tactical: 2px; /* HUD ring */ --border-w-armor: 3px; /* emphasis frame */ --border-w-bold: 4px; /* Border styles */ --border-style-solid: solid; --border-style-dashed: dashed; /* marking line */ --border-style-dotted: dotted; /* coordonnee grid */ /* Compound borders ready */ --border-hairline-top: var(--border-w-hair) solid var(--border-hairline); --border-tactical-blood: var(--border-w-tactical) solid var(--border-blood); --border-tactical-tesla: var(--border-w-tactical) solid var(--border-tesla); --border-marking-warn: var(--border-w-tactical) dashed var(--border-warning); /* ========================================================================== 5. CLIP-PATHS - angles coupes sci-fi (Helldivers / Cyberpunk panels) -------------------------------------------------------------------------- Usage: clip-path: var(--clip-tactical); ========================================================================== */ --clip-tactical: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); --clip-tactical-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); --clip-tactical-lg: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); --clip-tactical-right: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); --clip-tactical-left: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); --clip-arrow-right: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); --clip-arrow-left: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); --clip-banner: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%); --clip-notch-top: polygon(0 0, calc(50% - 16px) 0, 50% 12px, calc(50% + 16px) 0, 100% 0, 100% 100%, 0 100%); --clip-hud-frame: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); /* ========================================================================== 6. SHADOWS - elevation realiste + glows tactical -------------------------------------------------------------------------- Elevation : 2-3 layers (key light + ambient + contact) pour profondeur. Glows : color spread pour feedback (selection, threat, charge). ========================================================================== */ --shadow-none: none; /* Elevation 0 = flush (pas d'ombre, juste hairline interieur) */ --shadow-elev-0: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); /* Elevation 1 = card subtil */ --shadow-elev-1: 0 1px 0 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 4px -1px rgba(0, 0, 0, 0.20); /* Elevation 2 = panel hover */ --shadow-elev-2: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset, 0 2px 4px 0 rgba(0, 0, 0, 0.40), 0 4px 8px -2px rgba(0, 0, 0, 0.30); /* Elevation 3 = popover, tooltip */ --shadow-elev-3: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 4px 8px 0 rgba(0, 0, 0, 0.45), 0 8px 16px -4px rgba(0, 0, 0, 0.35); /* Elevation 4 = modal, drawer */ --shadow-elev-4: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 8px 16px -2px rgba(0, 0, 0, 0.50), 0 16px 32px -8px rgba(0, 0, 0, 0.45); /* Elevation 5 = top floating (action sheet, command palette) */ --shadow-elev-5: 0 1px 0 0 rgba(255, 255, 255, 0.07) inset, 0 16px 32px -4px rgba(0, 0, 0, 0.60), 0 24px 60px -12px rgba(0, 0, 0, 0.85); /* Glows tactiques (utiliser modere, lit la nuit) */ --shadow-glow-blood-sm: 0 0 8px rgba(201, 43, 43, 0.45); --shadow-glow-blood: 0 0 16px rgba(201, 43, 43, 0.50), 0 0 32px rgba(168, 30, 30, 0.25); --shadow-glow-blood-lg: 0 0 24px rgba(201, 43, 43, 0.65), 0 0 48px rgba(168, 30, 30, 0.35); --shadow-glow-fire-sm: 0 0 8px rgba(232, 106, 25, 0.40); --shadow-glow-fire: 0 0 16px rgba(232, 106, 25, 0.50), 0 0 32px rgba(184, 79, 14, 0.25); --shadow-glow-fire-lg: 0 0 24px rgba(232, 106, 25, 0.65), 0 0 48px rgba(184, 79, 14, 0.35); --shadow-glow-tesla-sm: 0 0 8px rgba(58, 227, 255, 0.50); --shadow-glow-tesla: 0 0 16px rgba(58, 227, 255, 0.55), 0 0 32px rgba(58, 227, 255, 0.25); --shadow-glow-tesla-lg: 0 0 24px rgba(58, 227, 255, 0.70), 0 0 48px rgba(58, 227, 255, 0.35); --shadow-glow-toxic: 0 0 16px rgba(107, 191, 58, 0.50), 0 0 32px rgba(107, 191, 58, 0.20); --shadow-glow-neon: 0 0 16px rgba(242, 201, 76, 0.55), 0 0 32px rgba(242, 201, 76, 0.25); /* Inner shadows (concave : recess pressed / convex : raised) */ --shadow-inner-recess: inset 0 2px 4px 0 rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(0, 0, 0, 0.30); --shadow-inner-deep: inset 0 4px 8px 0 rgba(0, 0, 0, 0.65); --shadow-inner-convex: inset 0 1px 0 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 0 rgba(0, 0, 0, 0.30); --shadow-inner-bevel: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 0 rgba(0, 0, 0, 0.40), inset 1px 0 0 0 rgba(255, 255, 255, 0.03), inset -1px 0 0 0 rgba(0, 0, 0, 0.20); /* Drop shadows realistes (pour images / portraits) */ --shadow-drop-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20); --shadow-drop-md: 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-drop-lg: 0 8px 16px rgba(0, 0, 0, 0.40), 0 16px 32px rgba(0, 0, 0, 0.30), 0 32px 64px rgba(0, 0, 0, 0.20); /* Focus ring (2px tactical + outer glow, accessibility WCAG 2.1) */ --shadow-focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--color-tesla-400), 0 0 12px rgba(58, 227, 255, 0.50); --shadow-focus-ring-blood: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--color-blood-500), 0 0 12px rgba(201, 43, 43, 0.50); /* ========================================================================== 7. MOTION - durations / easings / springs -------------------------------------------------------------------------- Easings : standard pour entrances/exits, spring pour delight, snap = haptic. ========================================================================== */ --duration-instant: 75ms; --duration-fast: 100ms; --duration-quick: 150ms; --duration-normal: 200ms; --duration-medium: 300ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-dramatic: 800ms; --duration-cinematic: 1200ms; /* Easings */ --ease-linear: linear; /* loops only */ --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1); --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* go-to UI exit */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* go-to UI enter */ --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0); --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0); --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0); --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0); --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); /* Spring (overshoot - delight moments) */ --ease-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.68, -0.55, 0.27, 1.55); --ease-spring-bouncy: cubic-bezier(0.5, -0.8, 0.4, 1.8); /* Snap (haptic feel - tactical UI) */ --ease-snap: cubic-bezier(0.85, 0, 0.15, 1); --ease-snap-in: cubic-bezier(0.85, 0, 0.20, 1); /* Stagger delays (animations en serie) */ --stagger-tight: 20ms; --stagger-snappy: 30ms; --stagger-default: 50ms; --stagger-relaxed: 80ms; --stagger-dramatic: 120ms; /* ========================================================================== 8. Z-INDEX - 5 niveaux + sub-positions ========================================================================== */ --z-deep: -1; /* parallax bg, decorative behind content */ --z-base: 0; --z-raised: 10; /* card hover lift */ --z-dropdown: 1000; /* select, autocomplete, menu */ --z-sticky: 1100; /* sticky header / table head */ --z-fixed: 1200; /* nav fixed */ --z-overlay: 1300; /* backdrop scrim */ --z-modal: 1400; /* dialog, sheet */ --z-popover: 1500; /* tooltip, popover floating */ --z-toast: 1600; /* notifications */ --z-debug: 9999; /* devtools overlays */ /* ========================================================================== 9. BREAKPOINTS (mobile-first explicite, usage en custom media via PostCSS ou JS - les CSS utilise valeurs en dur pour @media) ========================================================================== */ --bp-xs: 360px; /* small phone */ --bp-sm: 640px; /* phone landscape, large phone */ --bp-md: 768px; /* tablet portrait */ --bp-lg: 1024px; /* tablet landscape, small laptop */ --bp-xl: 1280px; /* laptop */ --bp-2xl: 1536px; /* desktop */ --bp-3xl: 1920px; /* large desktop */ /* Container max-widths (lecture confort) */ --container-prose: 65ch; --container-narrow: 640px; --container-default: 1024px; --container-wide: 1280px; --container-xwide: 1440px; --container-full: 100%; /* ========================================================================== 10. GAMING TOKENS - HP BARS -------------------------------------------------------------------------- Gradient triphasique (full vert -> mid jaune -> low rouge). Couches : fill (gradient), edge (highlight 1px sup), wear (motif texture). ========================================================================== */ --hp-full-from: var(--color-toxic-400); --hp-full-to: var(--color-toxic-600); --hp-full: linear-gradient(180deg, var(--color-toxic-400) 0%, var(--color-toxic-600) 100%); --hp-full-edge: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.30); --hp-mid-from: var(--color-neon-300); --hp-mid-to: var(--color-neon-600); --hp-mid: linear-gradient(180deg, var(--color-neon-300) 0%, var(--color-neon-600) 100%); --hp-low-from: var(--color-blood-400); --hp-low-to: var(--color-blood-700); --hp-low: linear-gradient(180deg, var(--color-blood-400) 0%, var(--color-blood-700) 100%); --hp-low-pulse: var(--shadow-glow-blood-sm); --hp-critical: linear-gradient(180deg, oklch(60% 0.22 22) 0%, oklch(40% 0.18 22) 100%); --hp-track: var(--depth-2); --hp-track-border: var(--border-default); --shield-fill: linear-gradient(180deg, var(--color-tesla-300) 0%, var(--color-tesla-600) 100%); --shield-glow: var(--shadow-glow-tesla-sm); /* ========================================================================== 10. GAMING TOKENS - RESOURCES (wood, metal, stone, food, gems, fuel, ammo) -------------------------------------------------------------------------- Chaque resource = couleur d'identite + gradient pill + icone tint. ========================================================================== */ --res-wood: #b8773a; --res-wood-from: #c98847; --res-wood-to: #8c5524; --res-wood-glow: 0 0 12px rgba(184, 119, 58, 0.35); --res-metal: #9aa0a8; --res-metal-from: #c5cad2; --res-metal-to: #6b727b; --res-metal-glow: 0 0 12px rgba(154, 160, 168, 0.35); --res-stone: #7d7e83; --res-stone-from: #9a9ba0; --res-stone-to: #54555a; --res-stone-glow: 0 0 10px rgba(125, 126, 131, 0.30); --res-food: var(--color-toxic-500); --res-food-from: var(--color-toxic-400); --res-food-to: var(--color-toxic-700); --res-food-glow: var(--shadow-glow-toxic); --res-gems: #b366ff; --res-gems-from: #d4a3ff; --res-gems-to: #7d3ec9; --res-gems-glow: 0 0 16px rgba(179, 102, 255, 0.50); --res-fuel: var(--color-fire-400); --res-fuel-from: var(--color-fire-300); --res-fuel-to: var(--color-fire-700); --res-fuel-glow: var(--shadow-glow-fire); --res-ammo: var(--color-neon-300); --res-ammo-from: var(--color-neon-200); --res-ammo-to: var(--color-neon-600); --res-ammo-glow: var(--shadow-glow-neon); --res-blood: var(--color-blood-500); --res-blood-from: var(--color-blood-400); --res-blood-to: var(--color-blood-800); --res-blood-glow: var(--shadow-glow-blood); /* ========================================================================== 10. GAMING TOKENS - BUILDING STATES -------------------------------------------------------------------------- Idle = neutre / Constructing = pulse tesla / Damaged = teint blood / Destroyed = grayscale + smoke. ========================================================================== */ --build-idle-bg: var(--bg-surface); --build-idle-border: var(--border-default); --build-idle-tint: none; --build-constructing-bg: linear-gradient(135deg, var(--surface-tint-tesla), transparent); --build-constructing-border: var(--border-tesla); --build-constructing-glow: var(--shadow-glow-tesla-sm); --build-constructing-stripe: repeating-linear-gradient( 45deg, rgba(58, 227, 255, 0.08) 0, rgba(58, 227, 255, 0.08) 10px, transparent 10px, transparent 20px); --build-upgrading-glow: var(--shadow-glow-neon); --build-upgrading-stripe: repeating-linear-gradient( 45deg, rgba(242, 201, 76, 0.10) 0, rgba(242, 201, 76, 0.10) 10px, transparent 10px, transparent 20px); --build-damaged-bg: linear-gradient(135deg, var(--surface-tint-blood), transparent); --build-damaged-border: var(--border-blood); --build-damaged-glow: var(--shadow-glow-blood-sm); --build-damaged-shake: cubic-bezier(0.36, 0.07, 0.19, 0.97); --build-destroyed-bg: #0a0a0a; --build-destroyed-border: rgba(255, 255, 255, 0.04); --build-destroyed-filter: grayscale(0.85) brightness(0.45) contrast(0.9); --build-destroyed-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); --build-locked-filter: grayscale(1) brightness(0.55) opacity(0.7); --build-disabled-bg: var(--surface-glass-low); /* ========================================================================== 10. GAMING TOKENS - ALERT STATES (calm / warning / critical / emergency) ========================================================================== */ --alert-calm-bg: transparent; --alert-calm-fg: var(--text-tertiary); --alert-calm-border: var(--border-subtle); --alert-calm-glow: none; --alert-warning-bg: rgba(242, 201, 76, 0.08); --alert-warning-fg: var(--color-neon-300); --alert-warning-border: var(--border-neon); --alert-warning-glow: 0 0 8px rgba(242, 201, 76, 0.25); --alert-critical-bg: rgba(232, 106, 25, 0.10); --alert-critical-fg: var(--color-fire-400); --alert-critical-border: var(--border-fire); --alert-critical-glow: 0 0 12px rgba(232, 106, 25, 0.40); --alert-critical-pulse-duration: 1.6s; --alert-emergency-bg: rgba(168, 30, 30, 0.15); --alert-emergency-fg: var(--color-blood-300); --alert-emergency-border: var(--border-blood-strong); --alert-emergency-glow: var(--shadow-glow-blood); --alert-emergency-pulse-duration: 0.9s; /* ========================================================================== 11. ATMOSPHERIC GRADIENTS - app shell, cards, glows ambiance -------------------------------------------------------------------------- Pre-fait pour eviter de re-composer dans chaque composant. ========================================================================== */ /* Body background : atmosphere post-apo (blood haut, fire bas-droit, tesla gauche) */ --gradient-app-shell: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(168, 30, 30, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(232, 106, 25, 0.04) 0%, transparent 50%), radial-gradient(circle at 0% 50%, rgba(58, 227, 255, 0.02) 0%, transparent 40%); --gradient-canvas-fog: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(90, 107, 117, 0.08) 0%, transparent 70%), linear-gradient(180deg, var(--depth-2) 0%, var(--depth-1) 100%); /* Hero gradients */ --gradient-hero-blood: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(168, 30, 30, 0.18) 0%, transparent 60%), linear-gradient(135deg, var(--depth-3) 0%, var(--depth-1) 100%); --gradient-hero-tactical: radial-gradient(ellipse 70% 90% at 70% 30%, rgba(58, 227, 255, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 70% at 20% 80%, rgba(168, 30, 30, 0.12) 0%, transparent 60%), linear-gradient(135deg, var(--depth-3) 0%, var(--depth-1) 100%); --gradient-hero-fire: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232, 106, 25, 0.20) 0%, transparent 55%), linear-gradient(180deg, var(--depth-1) 0%, var(--depth-3) 60%, var(--depth-4) 100%); /* Card gradients (subtle interior glow) */ --gradient-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%); --gradient-card-elevated: linear-gradient(180deg, var(--depth-6) 0%, var(--depth-5) 100%); --gradient-card-blood: linear-gradient(135deg, rgba(168, 30, 30, 0.12) 0%, rgba(168, 30, 30, 0.02) 100%); --gradient-card-tesla: linear-gradient(135deg, rgba(58, 227, 255, 0.10) 0%, rgba(58, 227, 255, 0.02) 100%); --gradient-card-fire: linear-gradient(135deg, rgba(232, 106, 25, 0.10) 0%, rgba(232, 106, 25, 0.02) 100%); /* Button gradients (volumetric depth) */ --gradient-btn-primary: linear-gradient(180deg, var(--color-blood-500) 0%, var(--color-blood-700) 100%); --gradient-btn-primary-hover: linear-gradient(180deg, var(--color-blood-400) 0%, var(--color-blood-600) 100%); --gradient-btn-primary-active: linear-gradient(180deg, var(--color-blood-700) 0%, var(--color-blood-800) 100%); --gradient-btn-secondary: linear-gradient(180deg, var(--depth-6) 0%, var(--depth-5) 100%); --gradient-btn-secondary-hover: linear-gradient(180deg, var(--depth-7) 0%, var(--depth-6) 100%); --gradient-btn-tesla: linear-gradient(180deg, var(--color-tesla-500) 0%, var(--color-tesla-700) 100%); /* Glow ambient (positionable) */ --gradient-glow-blood-radial: radial-gradient(circle at center, rgba(201, 43, 43, 0.35) 0%, rgba(201, 43, 43, 0) 70%); --gradient-glow-fire-radial: radial-gradient(circle at center, rgba(232, 106, 25, 0.35) 0%, rgba(232, 106, 25, 0) 70%); --gradient-glow-tesla-radial: radial-gradient(circle at center, rgba(58, 227, 255, 0.35) 0%, rgba(58, 227, 255, 0) 70%); /* Vignette / overlay cinematic */ --gradient-vignette: radial-gradient(ellipse 100% 100% at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.40) 90%, rgba(0, 0, 0, 0.65) 100%); --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--depth-1) 100%); --gradient-fade-top: linear-gradient(0deg, transparent 0%, var(--depth-1) 100%); --gradient-scanline: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.015) 2px, rgba(255, 255, 255, 0.015) 3px); /* Mesh background (HUD grid tactical) */ --gradient-grid-tactical: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); --gradient-grid-size: 32px 32px; /* HP/Resource progress bar fills (animatables) */ --gradient-progress-blood: linear-gradient(90deg, var(--color-blood-700) 0%, var(--color-blood-500) 50%, var(--color-blood-400) 100%); --gradient-progress-tesla: linear-gradient(90deg, var(--color-tesla-700) 0%, var(--color-tesla-500) 50%, var(--color-tesla-300) 100%); --gradient-progress-toxic: linear-gradient(90deg, var(--color-toxic-700) 0%, var(--color-toxic-500) 50%, var(--color-toxic-300) 100%); /* ========================================================================== 12. OPACITIES (modulation rapide alpha) ========================================================================== */ --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.10; --opacity-20: 0.20; --opacity-30: 0.30; --opacity-40: 0.40; --opacity-50: 0.50; --opacity-60: 0.60; --opacity-70: 0.70; --opacity-80: 0.80; --opacity-90: 0.90; --opacity-95: 0.95; --opacity-100: 1; /* ========================================================================== 13. BLUR (backdrop-filter effects HUD glass) ========================================================================== */ --blur-none: 0; --blur-xs: 2px; --blur-sm: 4px; --blur-md: 8px; --blur-lg: 12px; --blur-xl: 20px; --blur-2xl: 32px; --blur-3xl: 48px; --backdrop-glass-subtle: blur(var(--blur-sm)) saturate(120%); --backdrop-glass: blur(var(--blur-lg)) saturate(140%); --backdrop-glass-strong: blur(var(--blur-2xl)) saturate(160%); /* ========================================================================== 14. GAME-SPECIFIC HUD METRICS (HUD heights, ammo strip, etc.) ========================================================================== */ --hud-bar-height: 56px; --hud-bar-height-compact:44px; --hud-pill-height: 28px; --hud-pill-height-lg: 36px; --hud-icon-sm: 16px; --hud-icon-md: 20px; --hud-icon-lg: 24px; --hud-icon-xl: 32px; --hud-portrait-sm: 40px; --hud-portrait-md: 56px; --hud-portrait-lg: 72px; --hud-tap-target: 44px; /* WCAG iOS tap minimum */ /* ========================================================================== 15. ACCESSIBILITY - reduced motion overrides (used by .reduce-motion class or @media query consumers) ========================================================================== */ --motion-safe-duration-fast: var(--duration-fast); --motion-safe-duration-normal: var(--duration-normal); } /* ============================================================================ REDUCED MOTION - respect user preference ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 50ms; --duration-quick: 50ms; --duration-normal: 50ms; --duration-medium: 50ms; --duration-slow: 80ms; --duration-slower: 80ms; --duration-dramatic: 100ms; --duration-cinematic: 100ms; --stagger-tight: 0ms; --stagger-snappy: 0ms; --stagger-default: 0ms; --stagger-relaxed: 0ms; --stagger-dramatic: 0ms; } } /* ============================================================================ COMPATIBILITY ALIASES ---------------------------------------------------------------------------- Mappent les anciens tokens (--c-*) vers les nouveaux pour migration douce. A supprimer une fois app.css entierement migre vers V2. ============================================================================ */ :root { --c-void: var(--depth-1); --c-noir: var(--depth-3); --c-noir-2: var(--depth-4); --c-beton: var(--depth-5); --c-beton-2: var(--depth-7); --c-rouille: var(--color-rust-600); --c-rouille-2: var(--color-rust-500); --c-fog: var(--color-fog-400); --c-bone: var(--color-bone-300); --c-blood: var(--color-blood-600); --c-blood-dark: var(--color-blood-700); --c-blood-glow: var(--color-blood-500); --c-fire: var(--color-fire-400); --c-fire-dark: var(--color-fire-600); --c-toxic: var(--color-toxic-400); --c-tesla: var(--color-tesla-300); --c-neon: var(--color-neon-300); --shadow-blood: var(--shadow-glow-blood); --shadow-fire: var(--shadow-glow-fire); --shadow-tesla: var(--shadow-glow-tesla); --shadow-deep: var(--shadow-elev-5); --shadow-card: var(--shadow-elev-1); --border-glass: var(--border-w-thin) solid var(--border-subtle); --border-active: var(--border-w-thin) solid var(--border-blood); /* ========================================================================== BRIDGE TOKENS (consommes par mobile-v2.css) Sans ces alias, mobile-v2 utilise des fallbacks vert fluo #00ff95 qui CASSENT la brand identity (rouge sang). ========================================================================== */ --color-accent: var(--color-blood-500); --color-accent-glow: rgba(201, 43, 43, 0.18); --color-surface: var(--bg-surface); --color-surface-elevated: var(--bg-elevated); --color-bg-game: var(--depth-2); --color-bg-solid: var(--depth-1); --color-text: var(--text-primary); --color-text-muted: var(--text-tertiary); --color-input-bg: rgba(255, 255, 255, 0.04); --color-danger: var(--state-error-solid); --color-success: var(--state-success-solid); --color-warning: var(--state-warning-solid); /* Fix WCAG : text-quaternary releve de #5e5e66 (2.8:1) a #6e6e76 (4:1) */ --text-quaternary: #6e6e76; } /* Tap target unifie : 44px partout (WCAG 2.5.5 AAA + Android M3). Hors :root pour override mobile-v2 et components-v2 qui defininissent eux-memes. */ :root { --tap-min: 44px; --tap-target: 44px; --tap-large: 56px; /* gants TC22 industriel */ }