/* ═══════════════════════════════════════════════════════════════════ 01 TOKENS Design tokens, reset, body wallpaper Sourced from monolithic main.css lines 1-152. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ 2D Platformer Editor — Main Stylesheet Dark theme, desktop-first (≥1280px) ═══════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ───────────────────────────────────────────────── * Two parallel systems coexist: * • Legacy solid theme (--bg0..--bg4, --border, --border2) — preserved * for component code that hasn't been migrated yet. * • Liquid Glass system (--glass-*, --surface-*, --accent-grad) — premium * translucent surfaces with backdrop blur. Applied progressively to the * topbar, panels, modals, popovers, cards, and the new picker UIs. * ─────────────────────────────────────────────────────────────── */ :root { /* Legacy tokens (kept for components not yet migrated) */ --bg0: #0a0a12; --bg1: #13131f; --bg2: #1a1a2e; --bg3: #22223a; --bg4: #2c2c4a; --border: #2a2a45; --border2: #3d3d5e; --text: #e6e6f4; --text-dim: #8888b8; --text-hint: #555585; --accent: #7c75ff; --accent-h: #9b95ff; --accent-d: #524ad6; --green: #3ddc84; --red: #ff5e6d; --yellow: #ffd166; --orange: #ff9a3c; --cyan: #3dd6f5; --panel-w: 300px; --topbar-h: 48px; --status-h: 32px; --radius: 8px; --radius-sm: 5px; --radius-lg: 14px; --shadow: 0 2px 12px rgba(0,0,0,0.5); --transition: 180ms cubic-bezier(0.32, 0.72, 0, 1); /* Tag colours */ --tag-main_character: #7c75ff; --tag-enemy: #ff5e6d; --tag-npc: #3dd6f5; --tag-boss: #ff9a3c; --tag-prop: #8888b8; --tag-collectible: #ffd166; --tag-terrain: #3ddc84; --tag-decoration: #6464a0; --tag-hazard: #ff5e6d; --tag-projectile: #ff9a3c; --tag-trigger_zone: #a0a0cc; /* ── Liquid Glass system ─────────────────────────────────────── */ --glass-bg: rgba(18, 20, 38, 0.55); --glass-bg-strong: rgba(10, 12, 28, 0.78); --glass-bg-subtle: rgba(22, 24, 44, 0.32); --glass-blur: blur(24px) saturate(180%); --glass-blur-strong: blur(40px) saturate(200%); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-strong: rgba(255, 255, 255, 0.16); --glass-shine: rgba(255, 255, 255, 0.06); --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%); --glass-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75), 0 6px 18px -8px rgba(0,0,0,0.4); --glass-shadow-sm: 0 6px 16px -6px rgba(0,0,0,0.55); --glass-glow: 0 0 0 1px rgba(124,143,255,0.28), 0 0 32px -4px rgba(124,143,255,0.18); --accent-grad: linear-gradient(135deg, #9aabff 0%, #7c8fff 50%, #5e6fff 100%); --accent-grad-soft: linear-gradient(135deg, rgba(155,170,255,0.22), rgba(94,111,255,0.10)); --accent-glow: rgba(124,143,255,0.35); --accent-glow-soft: rgba(124,143,255,0.12); --danger-grad: linear-gradient(135deg, #ff7a86 0%, #ff5e6d 100%); --success-grad: linear-gradient(135deg, #4be695 0%, #2bbb6c 100%); /* Expanded accent palette — tags, badges, glows */ --c-pink: #ff6eb4; --c-pink-soft: rgba(255,110,180,0.15); --c-teal: #38e8c8; --c-teal-soft: rgba(56,232,200,0.15); --c-amber: #ffb347; --c-amber-soft: rgba(255,179,71,0.15); --c-rose: #ff6070; --c-rose-soft: rgba(255,96,112,0.12); --c-mint: #50e898; --c-mint-soft: rgba(80,232,152,0.12); /* Text alphas (reference parity) */ --t-hi: rgba(255,255,255,0.92); --t-med: rgba(255,255,255,0.55); --t-low: rgba(255,255,255,0.28); --t-dim: rgba(255,255,255,0.12); /* Premium typography */ --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; /* Spring easings */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-quick: cubic-bezier(0.4, 0, 1, 1); } /* ── Reset ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-display); font-size: 13px; font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; color: var(--text); display: flex; flex-direction: column; /* Layered wallpaper — gives the backdrop-filter something to blur, otherwise glass surfaces look flat. Two soft radial accents + a subtle dot grid + a deep base. Performance: gradients only, no images, GPU-friendly. */ background: radial-gradient(ellipse 60% 50% at 18% 14%, rgba(124,117,255,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 86% 88%, rgba(61,214,245,0.10), transparent 65%), radial-gradient(ellipse 40% 30% at 50% 110%, rgba(255,154,60,0.06), transparent 70%), linear-gradient(180deg, #0a0a14 0%, #060610 100%); background-attachment: fixed; } body::before { /* Faint dotted grid noise — adds texture under the blur. */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0); background-size: 24px 24px; } button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; } input, select, textarea { font: inherit; color: var(--text); background: rgba(20, 22, 38, 0.5); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); padding: 6px 8px; } input:hover, select:hover, textarea:hover { border-color: var(--glass-border-strong); } input:focus, select:focus, textarea:focus { border-color: var(--accent); background: rgba(28, 30, 50, 0.65); box-shadow: 0 0 0 3px rgba(124,117,255,0.18); } select { cursor: pointer; } a { color: var(--accent); } p { line-height: 1.5; }