/* =========================================================== Luna Chem Lab — Visual Overhaul · Step 1: Tone System Mood: "Dark · Analog · Dangerous" Ref : Zachtronics · Potion Craft · Powder Toy · Breaking Bad Additive layer — does NOT override existing tokens.css. =========================================================== */ :root { /* ───────── Expanded palette (24 tokens) ───────── */ /* Primary — Cyan (UI backbone) */ --tone-primary: #22d3ee; --tone-primary-dim: #06b6d4; --tone-primary-deep: #0891b2; /* Warm accent — Amber (flame / lamp / warning) */ --tone-amber: #f59e0b; --tone-amber-bright: #fbbf24; --tone-amber-deep: #d97706; /* Cool accent — Blue (water / data / ice) */ --tone-blue: #3b82f6; --tone-blue-ice: #60a5fa; --tone-blue-deep: #1e3a8a; /* Danger — Red (explosion / stop) */ --tone-red: #ef4444; --tone-red-deep: #991b1b; /* Toxic — Lime (acid / corrosive) */ --tone-toxic: #84cc16; --tone-toxic-glow: #bef264; /* Analog — Oak (workbench top, ring stand wood) */ --tone-wood: #8b6914; --tone-wood-light: #a88550; --tone-wood-dark: #3d2d08; /* Paper — Cream (labels, notes, reagent stickers) */ --tone-paper: #f5f5dc; --tone-paper-aged: #d4c590; /* Metal — Chrome / brushed (ring stand, clamps, fixtures) */ --tone-metal: #94a3b8; --tone-metal-dark: #475569; /* Background depth (2-stop gradient floor → wall → ceiling) */ --tone-bg-ceiling: #050510; /* top of room */ --tone-bg-wall: #14142a; /* mid wall */ --tone-bg-floor: #1a1a2e; /* bench-height floor gradient */ /* ───────── Glow presets (2-layer for depth) ───────── */ --glow-cyan: 0 0 20px rgba(34,211,238,0.45), 0 0 40px rgba(34,211,238,0.15); --glow-cyan-soft: 0 0 10px rgba(34,211,238,0.25); --glow-amber: 0 0 20px rgba(245,158,11,0.55), 0 0 40px rgba(245,158,11,0.20); --glow-amber-strong: 0 0 24px rgba(251,191,36,0.80), 0 0 60px rgba(245,158,11,0.35); --glow-red: 0 0 20px rgba(239,68,68,0.55), 0 0 40px rgba(239,68,68,0.20); --glow-toxic: 0 0 20px rgba(132,204,22,0.45), 0 0 40px rgba(132,204,22,0.15); --glow-blue-ice: 0 0 16px rgba(96,165,250,0.40), 0 0 32px rgba(96,165,250,0.12); --glow-white-hot: 0 0 32px rgba(255,255,255,0.70), 0 0 80px rgba(251,191,36,0.30); /* ───────── Motion / easing ───────── */ --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-bounce-big: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-ambient: cubic-bezier(0.4, 0, 0.2, 1); --d-fast: 120ms; --d-med: 240ms; --d-slow: 480ms; /* ───────── Type (already imported in ) ───────── */ --f-label: 'Special Elite', 'JetBrains Mono', monospace; /* typewriter labels */ --f-pixel: 'Press Start 2P', monospace; /* 8-bit dialog */ --f-orbitron: 'Orbitron', 'JetBrains Mono', monospace; /* HUD digital */ } /* ───────── Theme toggle state ───────── Toggled via JS: document.documentElement.dataset.labTheme = 'dark' | 'amber' | 'night' Default = 'dark'. 'night' = flames become main light source. 'amber' = warm day. */ :root[data-lab-theme="amber"] { --tone-bg-ceiling: #1a0f05; --tone-bg-wall: #2d1a08; --tone-bg-floor: #3d2408; } :root[data-lab-theme="night"] { --tone-bg-ceiling: #020208; --tone-bg-wall: #05050a; --tone-bg-floor: #080812; } /* ───────── Global tone grading overlay ───────── Cool shadow corners + warm highlight diagonal. Blend via mix-blend-mode: overlay so colors underneath stay visible. pointer-events: none so UI stays interactive. z-index between canvas (low) and modals (high 9999+). */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: /* Vignette — dark corners */ radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%), /* Warm top-left / cool bottom-right color grade */ linear-gradient(135deg, rgba(245,158,11,0.05) 0%, transparent 40%, rgba(59,130,246,0.05) 100%); mix-blend-mode: overlay; opacity: 0.85; transition: opacity var(--d-slow) var(--ease-out-quart), background var(--d-slow) var(--ease-out-quart); } /* Subtle static film grain — layered dots */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.018) 1px, transparent 2px), radial-gradient(circle at 75% 80%, rgba(255,255,255,0.014) 1px, transparent 2px), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.010) 1px, transparent 2px); background-size: 3px 3px, 5px 5px, 7px 7px; opacity: 0.55; mix-blend-mode: overlay; } :root[data-lab-theme="night"] body::before { background: radial-gradient(ellipse at center, transparent 18%, rgba(0,0,0,0.65) 100%), linear-gradient(135deg, rgba(245,158,11,0.07) 0%, transparent 40%, rgba(59,130,246,0.07) 100%); opacity: 1; } :root[data-lab-theme="amber"] body::before { background: radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,0.22) 100%), linear-gradient(135deg, rgba(245,158,11,0.12) 0%, transparent 50%, rgba(239,68,68,0.06) 100%); } /* Accessibility — respect reduced motion */ @media (prefers-reduced-motion: reduce) { body::before { transition: none; } } /* ───────── Utility helpers (for dynamically spawned DOM) ───────── */ .tone-glow-cyan { box-shadow: var(--glow-cyan); } .tone-glow-amber { box-shadow: var(--glow-amber); } .tone-glow-red { box-shadow: var(--glow-red); } .tone-glow-toxic { box-shadow: var(--glow-toxic); } .tone-label { font-family: var(--f-label); letter-spacing: 0.04em; } .tone-pixel { font-family: var(--f-pixel); letter-spacing: 0.02em; } .tone-hud { font-family: var(--f-orbitron); letter-spacing: 0.06em; } /* ───────── Theme toggle button (top-bar control) ───────── */ .theme-toggle { background: rgba(10,10,20,0.7); border: 1px solid var(--tone-primary-dim); color: var(--tone-primary); border-radius: 6px; padding: 4px 10px; font-family: var(--f-label); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; transition: all var(--d-fast) var(--ease-out-quart); text-transform: uppercase; } .theme-toggle:hover { background: rgba(34,211,238,0.15); box-shadow: var(--glow-cyan-soft); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } /* Amber theme reskins toggle to warm */ :root[data-lab-theme="amber"] .theme-toggle { border-color: var(--tone-amber); color: var(--tone-amber-bright); } :root[data-lab-theme="amber"] .theme-toggle:hover { background: rgba(245,158,11,0.15); box-shadow: var(--glow-amber); } :root[data-lab-theme="night"] .theme-toggle { border-color: var(--tone-metal); color: var(--tone-metal); }