/* ============================================ VETUU — Design Tokens (OKLCH) CSS custom properties for consistent theming COLOR SYSTEM Built from concept art reference palette using OKLCH for perceptually uniform colors and predictable shades. OKLCH Format: oklch(Lightness Chroma Hue) - L: 0-1 (darkness to lightness) - C: 0-0.4 (gray to vivid) - H: 0-360° (hue angle) Reference: https://oklch.fyi ============================================ */ /* ---------- Custom Properties ---------- */ :root { /* ======================================== LAYOUT TOKENS ======================================== */ --tile-size: 24px; --map-width: 120; --map-height: 80; /* ======================================== CORE PALETTE — From Reference Art Desert wasteland with warm earth tones and cool teal accents ======================================== */ /* --- Neutrals (warm earth scale) --- */ --color-ink: oklch(0.16 0.025 55); /* #241706 - Darkest, outlines */ --color-coal: oklch(0.27 0.025 58); /* #3C3124 - Very dark surfaces */ --color-earth: oklch(0.34 0.035 60); /* #524326 - Dark brown */ --color-dust: oklch(0.47 0.025 65); /* #6E6252 - Brown gray */ --color-stone: oklch(0.57 0.015 50); /* #837D7D - Warm gray */ --color-ash: oklch(0.65 0.015 55); /* Derived - Mid gray */ --color-fog: oklch(0.70 0.012 290); /* #A8A3AA - Cool gray */ --color-parchment: oklch(0.77 0.020 100); /* #BAB9A7 - Light warm */ --color-bone: oklch(0.86 0.015 330); /* #DBD2D3 - Light cool */ --color-cream: oklch(0.99 0.003 90); /* #FEFDFB - Off-white */ /* --- Teal Family (primary accent) --- */ --color-teal-dark: oklch(0.40 0.055 185); /* #2E5552 - Deep teal */ --color-teal: oklch(0.58 0.075 205); /* #488894 - Main accent */ --color-teal-soft: oklch(0.65 0.055 210); /* #6C9BAA - Soft teal */ --color-teal-pale: oklch(0.75 0.040 210); /* Derived - Pale teal */ /* ======================================== PUNCH ACCENTS — High-chroma highlights For terrain features, special actors, vehicle details All at C:0.18-0.25 for maximum pop against muted base ======================================== */ /* --- Electric Cyan (tech, energy, rare loot) --- */ --punch-cyan-dark: oklch(0.55 0.180 200); /* Deep electric */ --punch-cyan: oklch(0.75 0.180 195); /* Primary punch */ --punch-cyan-bright: oklch(0.88 0.150 190); /* Glow/highlight */ /* --- Hot Coral (heat, fire, danger markers) --- */ --punch-coral-dark: oklch(0.50 0.200 35); /* Smoldering */ --punch-coral: oklch(0.68 0.200 40); /* Primary punch */ --punch-coral-bright: oklch(0.82 0.160 45); /* Flame tip */ /* --- Toxic Green (mutations, acid, hostile flora) --- */ --punch-acid-dark: oklch(0.45 0.180 130); /* Murky toxic */ --punch-acid: oklch(0.72 0.220 135); /* Primary punch */ --punch-acid-bright: oklch(0.88 0.180 140); /* Radioactive glow */ /* --- Vivid Magenta (psionic, rare, ancient tech) --- */ --punch-magenta-dark: oklch(0.42 0.180 320); /* Deep void */ --punch-magenta: oklch(0.62 0.220 325); /* Primary punch */ --punch-magenta-bright: oklch(0.78 0.180 330); /* Psionic flare */ /* --- Solar Gold (treasure, VIPs, legendary) --- */ --punch-gold-dark: oklch(0.55 0.150 85); /* Burnished */ --punch-gold: oklch(0.82 0.180 90); /* Primary punch */ --punch-gold-bright: oklch(0.95 0.140 95); /* Gleaming */ /* --- Azure Blue (water, sky, special zones) --- */ --punch-azure-dark: oklch(0.45 0.160 250); /* Deep water */ --punch-azure: oklch(0.65 0.180 255); /* Primary punch */ --punch-azure-bright: oklch(0.82 0.140 260); /* Sky highlight */ /* --- Warm Family (amber/copper/rust) --- */ --color-rust-dark: oklch(0.34 0.085 50); /* #63371C - Dark rust */ --color-rust: oklch(0.41 0.095 48); /* #7C3F20 - Rust brown */ --color-copper: oklch(0.62 0.125 55); /* #CB7946 - Copper orange */ --color-amber: oklch(0.84 0.115 70); /* #FFC17A - Warm amber */ --color-gold: oklch(0.78 0.130 85); /* Derived - Gold */ /* --- Terrain (sand/tan scale) --- */ --color-sand-dark: oklch(0.52 0.060 65); /* Derived - Dark sand */ --color-sand: oklch(0.58 0.065 65); /* #9E7C59 - Sand */ --color-tan: oklch(0.65 0.055 60); /* #AE8F73 - Warm tan */ --color-khaki: oklch(0.71 0.040 50); /* #B9A396 - Warm beige */ --color-sand-light: oklch(0.79 0.038 55); /* #D5BAA9 - Light sand */ /* --- Weather Particles (dust) --- */ /* Warm tan/ochre scale for sandstorm dust particles */ /* Slightly higher chroma than terrain for visibility at small sizes */ --particle-dust-1: oklch(0.76 0.055 65); /* #D0BC9C - Pale sand */ --particle-dust-2: oklch(0.68 0.070 62); /* #C0A078 - Warm tan */ --particle-dust-3: oklch(0.60 0.075 58); /* #A88860 - Ochre */ --particle-dust-4: oklch(0.52 0.070 55); /* #8C7048 - Brown-tan */ --particle-dust-5: oklch(0.45 0.060 52); /* #705838 - Brown */ /* --- Weather Particles (rain) --- */ /* Cool blue-gray scale for thunderstorm rain drops */ /* Hue shifted from teal (205) toward pure blue (220-225) */ --particle-rain-1: oklch(0.78 0.045 225); /* #B4C8D8 - Pale blue-gray */ --particle-rain-2: oklch(0.68 0.060 220); /* #90ACC4 - Steel blue */ --particle-rain-3: oklch(0.58 0.070 215); /* #6890AC - Mid blue */ --particle-rain-4: oklch(0.50 0.065 212); /* #507890 - Slate blue */ --particle-rain-5: oklch(0.42 0.055 210); /* #3C6078 - Dark blue-gray */ /* --- Ember/Smoke Particles (laser disintegration) --- */ /* Red/orange ember scale for rising smoke from ash piles */ --particle-ember-1: oklch(0.75 0.18 35); /* Bright orange */ --particle-ember-2: oklch(0.65 0.20 30); /* Orange-red */ --particle-ember-3: oklch(0.55 0.18 25); /* Red */ --particle-ember-4: oklch(0.45 0.12 20); /* Dark red */ --particle-ember-5: oklch(0.35 0.05 15); /* Charcoal */ --particle-ember-6: oklch(0.28 0.02 10); /* Dark smoke */ /* ======================================== SEMANTIC COLORS — Derived from palette ======================================== */ /* --- State Colors (perceptually balanced L:0.62-0.65) --- */ --color-danger: oklch(0.62 0.180 25); /* Red - same perceived brightness */ --color-danger-dim: oklch(0.42 0.120 25); /* Dark red */ --color-warning: oklch(0.75 0.140 70); /* Orange/amber */ --color-success: oklch(0.62 0.145 145); /* Green */ --color-success-dim:oklch(0.42 0.100 145); /* Dark green */ --color-info: oklch(0.62 0.100 240); /* Blue */ /* --- Rarity System (consistent L:0.65, varying hue) --- */ --color-rarity-common: var(--color-stone); --color-rarity-uncommon: oklch(0.65 0.130 145); /* Green */ --color-rarity-rare: oklch(0.65 0.130 250); /* Blue */ --color-rarity-epic: oklch(0.65 0.150 300); /* Purple */ --color-rarity-legendary: oklch(0.75 0.140 85); /* Gold */ /* --- Level Difficulty (lightness indicates threat) --- */ --color-level-trivial: oklch(0.55 0.020 0); /* Gray - no threat */ --color-level-easy: oklch(0.62 0.130 145); /* Green - low threat */ --color-level-normal: var(--color-parchment); /* Neutral */ --color-level-hard: oklch(0.65 0.140 60); /* Orange - caution */ --color-level-deadly: oklch(0.60 0.180 25); /* Red - danger */ --color-level-skull: oklch(0.55 0.160 310); /* Purple - death */ /* ======================================== UI SYSTEM — Backgrounds, text, frames ======================================== */ /* --- Backgrounds (cool sci-fi grays) --- */ --bg-void: oklch(0.00 0 0); /* Pure black */ --bg-dark: oklch(0.10 0.008 240); /* Darkest UI - cool */ --bg-panel: oklch(0.16 0.010 240); /* Panel backgrounds - cool slate */ --bg-panel-alpha: oklch(0.16 0.010 240 / 0.95); --bg-frame: oklch(0.12 0.008 240 / 0.98); --bg-surface: oklch(0.22 0.012 240); /* Elevated surfaces - cool */ --bg-hover: oklch(0.28 0.015 240); /* Hover states - cool */ /* --- World/Game --- */ --world-bg: var(--color-sand); /* Game world background */ /* --- Text Hierarchy (cool neutrals) --- */ --text-primary: oklch(0.92 0.008 240); /* Main text - near white, cool */ --text-soft: oklch(0.82 0.008 240); /* Soft text - just off primary */ --text-secondary: oklch(0.72 0.010 240); /* Secondary text - cool */ --text-muted: oklch(0.55 0.008 240); /* Muted/tertiary - cool */ --text-disabled: oklch(0.40 0.005 240); /* Disabled state - cool */ --text-inverse: oklch(0.12 0.008 240); /* On light backgrounds */ /* --- Borders & Frames (cool neutrals) --- */ --border-subtle: oklch(0.28 0.012 240); /* Subtle dividers - cool */ --border-default: oklch(0.38 0.015 240); /* Default borders - cool */ --border-strong: oklch(0.48 0.018 240); /* Emphasized borders - cool */ --frame-border: var(--border-default); --frame-border-width: 1px; /* Standard GUI border width */ --frame-inner: var(--bg-surface); /* --- Interactive States (teal accent) --- */ --accent: var(--color-teal); /* Main teal accent */ --accent-dim: var(--color-teal-dark); /* Dark teal */ --accent-bright: var(--color-teal-soft); /* Soft teal */ --accent-hover: oklch(0.58 0.075 205 / 0.4); /* Teal with alpha for hover states */ --danger: var(--color-danger); --danger-dark: var(--color-danger-dim); --danger-subtle: oklch(0.45 0.09 25); /* Subtle red for hover accents */ --warning: var(--color-warning); --warning-subtle: oklch(0.45 0.09 70); /* Subtle yellow for hover accents */ --success: var(--color-success); --success-subtle: oklch(0.45 0.09 145); /* Subtle green for hover accents */ --info: var(--color-info); /* --- Utility Alpha Colors --- */ /* Black with alpha - shadows, overlays, backdrops */ --alpha-black-90: oklch(0 0 0 / 0.9); --alpha-black-80: oklch(0 0 0 / 0.8); --alpha-black-70: oklch(0 0 0 / 0.7); --alpha-black-60: oklch(0 0 0 / 0.6); --alpha-black-50: oklch(0 0 0 / 0.5); --alpha-black-40: oklch(0 0 0 / 0.4); --alpha-black-30: oklch(0 0 0 / 0.3); --alpha-black-20: oklch(0 0 0 / 0.2); --alpha-black-10: oklch(0 0 0 / 0.1); --alpha-black-05: oklch(0 0 0 / 0.05); --alpha-black-00: oklch(0 0 0 / 0); /* White with alpha - subtle borders, hovers, highlights */ --alpha-white-50: oklch(1 0 0 / 0.5); --alpha-white-40: oklch(1 0 0 / 0.4); --alpha-white-15: oklch(1 0 0 / 0.15); --alpha-white-10: oklch(1 0 0 / 0.1); --alpha-white-08: oklch(1 0 0 / 0.08); --alpha-white-05: oklch(1 0 0 / 0.05); --alpha-white-03: oklch(1 0 0 / 0.03); --alpha-white-02: oklch(1 0 0 / 0.02); --alpha-white-01: oklch(1 0 0 / 0.01); /* Sprite outline color (ink with alpha) */ --sprite-outline: var(--color-ink); --sprite-outline-60: oklch(0.16 0.025 55 / 0.6); --sprite-outline-50: oklch(0.16 0.025 55 / 0.5); --sprite-outline-25: oklch(0.16 0.025 55 / 0.25); /* ======================================== ELEVATION SHADOWS Layered shadows for realistic depth (Josh Comeau technique) Light source: top-left, vertical 2× horizontal ======================================== */ /* Small elevation - subtle lift (tooltips, dropdowns) */ --shadow-sm: 0.3px 0.5px 0.7px oklch(0 0 0 / 0.12), 0.4px 0.8px 1px oklch(0 0 0 / 0.08), 1px 2px 2.5px oklch(0 0 0 / 0.08); /* Medium elevation - floating panels */ --shadow-md: 0.5px 1px 1px oklch(0 0 0 / 0.14), 1px 2px 2px oklch(0 0 0 / 0.12), 2px 4px 4px oklch(0 0 0 / 0.12), 4px 8px 8px oklch(0 0 0 / 0.10); /* Large elevation - modal dialogs, prominent panels */ --shadow-lg: 0.5px 1px 1px oklch(0 0 0 / 0.15), 1px 2px 2px oklch(0 0 0 / 0.15), 2px 4px 4px oklch(0 0 0 / 0.15), 4px 8px 8px oklch(0 0 0 / 0.15), 8px 16px 16px oklch(0 0 0 / 0.15); /* XL elevation - dragging, highest prominence */ --shadow-xl: 0.5px 1px 1px oklch(0 0 0 / 0.18), 1.5px 3px 3px oklch(0 0 0 / 0.16), 3px 6px 6px oklch(0 0 0 / 0.14), 6px 12px 12px oklch(0 0 0 / 0.12), 12px 24px 24px oklch(0 0 0 / 0.10), 24px 48px 48px oklch(0 0 0 / 0.08); /* Hairline border for panels (catches light) */ --border-hairline: 1px solid oklch(1 0 0 / 0.08); /* ======================================== GAME-SPECIFIC COLORS ======================================== */ /* --- Health & Stamina Colors (role-based for gameplay clarity) --- */ /* Player/Friendly colors */ --player-hp-color: oklch(0.58 0.150 145); /* Player HP - green */ --player-hp-bg: oklch(0.25 0.045 145); /* Player HP background */ --player-stamina-color: var(--color-teal); /* Player stamina - teal */ --player-stamina-bg: oklch(0.25 0.040 205); /* Player stamina background */ /* NPC/Friendly colors (same as player, separate vars for future customization) */ --npc-hp-color: oklch(0.58 0.150 145); /* NPC HP - green */ --npc-hp-bg: oklch(0.25 0.045 145); /* NPC HP background */ --npc-stamina-color: var(--color-teal); /* NPC stamina - teal */ --npc-stamina-bg: oklch(0.25 0.040 205); /* NPC stamina background */ /* Enemy colors */ --enemy-hp-color: var(--color-danger); /* Enemy HP - red */ --enemy-hp-bg: oklch(0.25 0.060 25); /* Enemy HP background */ --enemy-stamina-color: oklch(0.65 0.130 55); /* Enemy stamina - amber/gold */ --enemy-stamina-bg: oklch(0.25 0.040 55); /* Enemy stamina background */ /* Legacy aliases (for backwards compatibility) */ --hp-color: var(--player-hp-color); --hp-bg: var(--player-hp-bg); --sense-color: var(--player-stamina-color); /* Renamed: sense → stamina */ --sense-bg: var(--player-stamina-bg); --stamina-color: var(--enemy-stamina-color); --stamina-bg: var(--enemy-stamina-bg); --xp-color: oklch(0.55 0.150 300); /* XP bar - purple */ --xp-bg: oklch(0.22 0.060 300); /* XP bar background - dark purple */ /* --- Actor Colors (neutral) --- */ --player: oklch(0.80 0.008 55); /* Player highlight - light gray */ --militia: oklch(0.65 0.008 55); /* Friendly guards - mid gray */ --boss: oklch(0.55 0.160 310); /* Boss purple */ /* --- Enemy Type Colors (warm/earth tones for hostiles) --- */ --enemy-scavenger: oklch(0.52 0.060 55); /* Common scavenger */ --enemy-stalker: oklch(0.45 0.080 45); /* Stalker brown */ --enemy-bruiser: oklch(0.48 0.070 50); /* Bruiser tan */ --enemy-shaman: oklch(0.50 0.080 130); /* Shaman olive */ --enemy-hunter: oklch(0.55 0.090 120); /* Hunter green */ --enemy-sentry: oklch(0.42 0.015 55); /* Sentry gray */ --enemy-veilwalker: oklch(0.32 0.020 55); /* Veilwalker dark */ --enemy-sandwurm: oklch(0.70 0.100 85); /* Sandwurm gold */ /* --- Combat Effect Colors --- */ --projectile-player: oklch(0.75 0.180 160); /* Player shots - cyan-green */ --projectile-enemy: oklch(0.62 0.200 25); /* Enemy shots - red */ --projectile-special: var(--color-amber); /* Special attacks */ --projectile-psionic: oklch(0.60 0.170 300); /* Psionic purple */ --projectile-nature: oklch(0.65 0.160 145); /* Nature green */ --projectile-fire: oklch(0.62 0.200 35); /* Fire red-orange */ --projectile-ice: oklch(0.65 0.120 240); /* Ice blue */ --melee-player: var(--color-teal-soft); /* Player melee - teal */ --melee-enemy: var(--color-danger); /* Enemy melee */ --melee-special: var(--color-gold); /* Special melee */ --ability-push: var(--color-teal); /* Push ability - teal */ --ability-pull: oklch(0.58 0.150 300); /* Pull ability - purple */ /* --- Weapon Colors --- */ --weapon-kinetic: var(--color-dust); /* Ballistic */ --weapon-energy: oklch(0.70 0.200 320); /* Energy magenta */ /* --- Light Colors --- */ --light-torch: var(--color-amber); --light-lamp: oklch(0.88 0.080 80); /* Warm lamp glow */ /* --- Traffic Signal Colors --- */ --signal-green: oklch(0.72 0.200 145); /* #22ff44 - Go */ --signal-green-glow: oklch(0.72 0.200 145 / 0.8); --signal-yellow: oklch(0.85 0.180 90); /* #ffcc00 - Caution */ --signal-yellow-glow: oklch(0.85 0.180 90 / 0.8); --signal-red: oklch(0.62 0.220 25); /* #ff3333 - Stop */ --signal-red-glow: oklch(0.62 0.220 25 / 0.8); /* --- Structure Colors (map objects) --- */ --structure-wall: var(--color-coal); /* #3C3124 - Walls */ --structure-sandbag: oklch(0.52 0.055 55); /* #8B7355 - Sandbags */ --structure-floor: oklch(0.45 0.040 50); /* #6B5B4F - Guard post floor */ --structure-rubble: oklch(0.35 0.030 55); /* #4A4035 - Rubble piles */ --structure-debris: oklch(0.22 0.020 55); /* #2A2520 - Stone debris */ /* --- Vehicle Category Colors --- */ /* Industrial - earthy browns for haulers/cargo */ --vehicle-industrial-1: oklch(0.52 0.045 55); /* #8B7355 - Ore hauler */ --vehicle-industrial-2: oklch(0.58 0.085 55); /* #CD853F - Drill rig */ --vehicle-industrial-3: oklch(0.55 0.015 100); /* #8B8B7A - Cargo */ --vehicle-industrial-4: oklch(0.38 0.025 145); /* #4A5A4A - Tanker */ /* Military - cool grays and dark blues */ --vehicle-military-1: oklch(0.42 0.025 230); /* #4A5568 - Scout */ --vehicle-military-2: oklch(0.28 0.020 230); /* #2D3748 - Patrol */ --vehicle-military-3: oklch(0.48 0.020 230); /* #5A6A7A - Recon bike */ --vehicle-military-4: oklch(0.28 0.005 0); /* #3A3A3A - APC */ /* Private - warm tans and neutral grays */ --vehicle-private-1: oklch(0.82 0.055 70); /* #E2C799 - Compact */ --vehicle-private-2: oklch(0.70 0.025 230); /* #A0AEC0 - Sedan */ --vehicle-private-3: oklch(0.72 0.060 65); /* #C8A87A - Micro */ --vehicle-private-4: oklch(0.62 0.020 230); /* #8A9AAA - Cruiser */ --vehicle-private-5: oklch(0.22 0.012 260); /* #2A2A35 - Luxury */ --vehicle-private-6: oklch(0.58 0.055 60); /* #9A8A6A - Ute */ /* --- Weather Overlay Colors --- */ --weather-sandstorm: oklch(0.68 0.070 55); /* rgba(180, 140, 90) - Sand tint */ --weather-thunder: oklch(0.32 0.030 230); /* rgba(40, 50, 70) - Storm blue-gray */ --weather-lightning: oklch(0.90 0.025 240); /* Blue-white flash */ /* --- Quadrant/Zone Colors (Base Layout) --- */ --quadrant-operations: oklch(0.45 0.040 230); /* NW - Operations/Command - cool blue */ --quadrant-landing: oklch(0.48 0.030 260); /* NE - Landing Pad - blue-gray */ --quadrant-barracks: oklch(0.52 0.055 55); /* SW - Barracks/Living - warm brown */ --quadrant-storage: oklch(0.48 0.050 145); /* SE - Storage - muted green */ /* ======================================== TERRAIN PALETTE — Map tiles Synced with map.json terrain types ======================================== */ --sand: var(--color-sand); --sand-dark: var(--color-sand-dark); --stone-light: var(--color-khaki); --rock: var(--color-dust); --road: oklch(0.56 0.055 60); /* Road tan */ --scrap-town: oklch(0.40 0.020 55); /* Scrap metal gray */ --planks: oklch(0.45 0.070 55); /* Wood planks */ --ash: oklch(0.52 0.045 58); /* Ash/burnt */ --salt: var(--color-sand-light); /* Salt flats */ --wall: var(--color-coal); /* ======================================== MINIMAP COLORS ======================================== */ --minimap-bg: var(--bg-dark); --minimap-fog: oklch(0.10 0.008 240 / 0.92); /* Cool fog matching UI */ --minimap-grid: var(--alpha-white-15); --minimap-stroke: var(--alpha-black-60); --minimap-stroke-heavy: var(--alpha-black-70); --minimap-path: #00ff88; /* Path guidance - green (matching worldmap) */ --minimap-path-stroke: rgba(0, 0, 0, 0.5); --minimap-player: oklch(0.95 0.015 270); /* Player - bright white-blue */ --minimap-npc: var(--color-success); /* Friendly NPC - green */ --minimap-npc-guard: var(--color-teal); /* Guard - teal */ --minimap-npc-medic: oklch(0.70 0.150 350); /* Medic - rose/pink */ --minimap-enemy-passive: var(--color-warning); --minimap-enemy-engaged: var(--color-danger); --minimap-enemy-alpha: var(--color-gold); --minimap-object-collect: oklch(0.60 0.150 300); /* Purple */ --minimap-object-read: oklch(0.60 0.120 250); /* Blue */ --minimap-object-loot: var(--color-amber); --minimap-object-default: oklch(0.65 0.130 300); /* Light purple */ --minimap-vehicle: oklch(0.72 0.025 220); /* Blue-gray */ /* --- Spawn Zone Debug Colors (bright for visibility) --- */ --zone-safe: oklch(0.72 0.200 145); /* #00ff00 - Green */ --zone-frontier: oklch(0.90 0.180 105); /* #ffff00 - Yellow */ --zone-wilderness: oklch(0.72 0.180 60); /* #ff8800 - Orange */ --zone-danger: oklch(0.62 0.220 25); /* #ff0000 - Red */ --zone-deep: oklch(0.62 0.200 320); /* #ff00ff - Magenta */ /* ======================================== WORLD MAP COLORS ======================================== */ --worldmap-fog: oklch(0.10 0.008 240 / 0.85); /* Cool fog matching UI */ --worldmap-player: oklch(0.95 0.015 270); --worldmap-player-direction:var(--alpha-black-80); --worldmap-waypoint: var(--color-teal-soft); /* Waypoint - teal */ --worldmap-waypoint-stroke: var(--alpha-black-60); --worldmap-quest-main: var(--color-gold); --worldmap-quest-side: var(--color-amber); --worldmap-merchant: var(--color-success); --worldmap-save: oklch(0.60 0.120 250); --worldmap-fast-travel: oklch(0.55 0.150 300); --worldmap-region-text: oklch(from var(--color-cream) l c h / 0.6); --worldmap-region-stroke: var(--alpha-black-40); /* ======================================== SPACING & SIZING (4px Grid System) All GUI dimensions use multiples of 4 ======================================== */ /* --- Base Spacing Scale --- */ --space-1: 4px; /* Tight: icon gaps, timer offsets */ --space-2: 8px; /* Compact: bar heights, small padding */ --space-3: 12px; /* Standard: panel padding, gaps */ --space-4: 16px; /* Comfortable: section spacing */ --space-5: 20px; /* Roomy: large gaps */ --space-6: 24px; /* Spacious: major sections */ --space-8: 32px; /* Extra: modal padding */ --space-10: 40px; /* Large: major layout gaps */ --space-12: 48px; /* XL: portrait sizes */ --space-16: 64px; /* XXL: large portraits */ /* --- Component Sizes (4px grid) --- */ --size-icon-xs: 12px; /* Tiny icons */ --size-icon-sm: 16px; /* Small icons */ --size-icon-md: 24px; /* Effect/ability boxes */ --size-icon-lg: 32px; /* Action bar icons */ --size-icon-xl: 40px; /* Large icons */ --size-bar-sm: 4px; /* Thin bars (cooldowns) */ --size-bar-md: 8px; /* Standard bars (HP, sense) */ --size-bar-lg: 12px; /* Thick bars */ --size-portrait-sm: 40px; /* Compact portrait */ --size-portrait-md: 56px; /* Standard portrait */ --size-portrait-lg: 64px; /* Large portrait */ --size-slot: 56px; /* Action bar slot */ --size-slot-sm: 40px; /* Compact slot */ /* --- GUI Padding (consistent across all UI elements) --- */ --gui-padding: var(--space-2); /* 8px - standard GUI element padding */ --gui-padding-sm: var(--space-1); /* 4px - compact elements */ --gui-gap: var(--space-2); /* 8px - standard gap between elements */ --gui-gap-sm: var(--space-1); /* 4px - tight gaps */ --gui-gap-md: var(--space-3); /* 12px - medium gaps */ --gui-gap-lg: var(--space-4); /* 16px - spacious gaps */ /* --- GUI Margins (edge spacing) --- */ --gui-margin: 1rem; /* 16px - distance from window edges */ --gui-margin-sm: 0.5rem; /* 8px - compact margin/inner gaps */ /* ======================================== TIMING & MOTION ======================================== */ --move-duration: 280ms; /* Tactical movement speed */ --move-steps: 4; --ui-transition: 180ms; /* --- Fade Timing System (unified opacity transitions) --- */ --fade-snappy: 150ms; /* UI feedback, tooltips, lightning */ --fade-quick: 200ms; /* Entity spawn-in, fog reveal, state changes */ --fade-standard: 300ms; /* Entity despawn, combat transitions */ --fade-slow: 500ms; /* Weather, environment, dramatic reveals */ --fade-dramatic: 800ms; /* Death/corpse fade, vehicle exit, loading */ /* ======================================== TYPOGRAPHY ======================================== */ --font-text: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'Roboto Mono', 'Courier New', monospace; /* Semantic font aliases */ --font-display: var(--font-text); /* UI labels, names */ --font-body: var(--font-text); /* Body text */ --font-numbers: var(--font-mono); /* Timers, stats, values */ /* --- Font Size Scale --- */ --font-size-2xs: 0.5rem; /* 8px - timers, smallest text */ --font-size-xs: 0.6rem; /* 9.6px - bar text, small labels */ --font-size-sm: 0.7rem; /* 11.2px - medium labels */ --font-size-md: 0.8rem; /* 12.8px - names, standard text */ --font-size-lg: 0.9rem; /* 14.4px - emphasis */ --font-size-xl: 1rem; /* 16px - body */ --font-size-2xl: 1.2rem; /* 19.2px - large icons */ --font-size-3xl: 1.5rem; /* 24px - portrait icons */ --font-size-4xl: 2rem; /* 32px - titles */ /* --- Semantic Typography: Frames --- */ --frame-name-size: var(--font-size-md); /* 0.8rem */ --frame-level-size: var(--font-size-xs); /* 0.6rem - was 0.65rem, normalized */ --frame-bar-text-size: var(--font-size-xs); /* 0.6rem */ /* --- Semantic Typography: Effects & Abilities --- */ --effect-icon-size: var(--font-size-xs); /* 0.6rem */ --effect-timer-size: var(--font-size-2xs); /* 0.5rem */ --ability-icon-size: var(--font-size-sm); /* 0.7rem */ --ability-timer-size: var(--font-size-2xs); /* 0.5rem */ /* --- Semantic Typography: Portraits --- */ --portrait-icon-size: var(--font-size-3xl); /* 1.5rem */ /* --- Semantic Typography: Action Bar --- */ --action-icon-size: var(--font-size-2xl); /* 1.2rem - was 1.3rem, normalized */ --action-label-size: var(--font-size-2xs); /* 0.5rem - was 0.55rem, normalized */ --action-key-size: var(--font-size-2xs); /* 0.5rem */ /* --- Semantic Typography: Stats & Panels --- */ --stat-label-size: var(--font-size-sm); /* 0.7rem - was 0.75rem, normalized */ --stat-value-size: var(--font-size-sm); /* 0.7rem */ --panel-title-size: var(--font-size-md); /* 0.8rem */ --panel-text-size: var(--font-size-sm); /* 0.7rem - was 0.65rem, normalized */ /* ======================================== LEGACY ALIASES For backwards compatibility during migration ======================================== */ --black: var(--bg-void); --rarity-green: var(--color-rarity-uncommon); --rarity-blue: var(--color-rarity-rare); --rarity-gold: var(--color-rarity-legendary); --level-trivial: var(--color-level-trivial); --level-easy: var(--color-level-easy); --level-normal: var(--color-level-normal); --level-hard: var(--color-level-hard); --level-very-hard: var(--color-level-deadly); --level-impossible: var(--color-level-skull); } /* ======================================== SHADOW SYSTEM Dynamic shadows based on sun position (CSS vars set by time.js) NOTE: Shadow transitions removed for performance. Transitioning :root custom properties causes style recalc on ALL inheriting elements every frame. The 90s update interval with subtle values makes jumps imperceptible. ======================================== */