/* ============================================================ Coppersmog global base: variables, reset, shared primitives. Loaded first on every page. Page-specific overrides scope to their body class (e.g. .page-lab). ============================================================ */ :root { /* ── Surfaces ─────────────────────────────────────────── */ --bg-0: #0a0806; --bg-1: #16120c; --bg-2: #1e1810; --bg-3: #2a2018; /* ── Borders ──────────────────────────────────────────── */ --border: #3a2a18; --border-hi: #5a4428; /* ── Text ─────────────────────────────────────────────── */ --text-1: #f0e0c8; --text-2: #c8b090; --text-3: #8a7050; --text-4: #4a3828; /* ── Brass palette ────────────────────────────────────── */ --brass: #d8b266; --brass-hi: #f0d690; --brass-lt: #c39a4a; /* brass mid-light, bevel faces */ --brass-edge: #b8893f; /* brass bevel-edge highlight */ --brass-dk: #8a6324; --brass-mid: #7a5a24; /* brass mid-shadow, bevel ramp 35-40% stop */ --brass-deep: #5a4525; --brass-black: #2a1c08; /* ── Bronze palette ───────────────────────────────────── */ --bronze: #a07a3a; --bronze-dk: #523a14; --bronze-text: #f3d77a; /* text engraved on bronze, pale gold over a dark drop */ --ink: #1a0f04; /* near-black brown, deepest ink and gradient base */ --brass-shadow: #1f1810; /* dark end of brass and bronze gradients */ --brass-bevel: #3a2a0c; /* dark brass bevel edge */ --umber-deep: #0a0604; /* deepest gradient base */ --bronze-mid: #6a5230; /* mid bronze, between bronze-dk and bronze */ --copper: #c67a43; /* warm copper: achievement unlock date + category tally */ --silver: #bcc3cd; /* cool silver: locked achievement text */ /* ── Dark wood (frames, placards, cabinetry) ──────────── */ --wood: #3b2716; /* rail face */ --wood-hi: #543921; /* lit bevel + grain highlight */ --wood-mid: #2a1a0e; /* rail mid */ --wood-dk: #160d06; /* deep edge, grooves, drop shadow */ /* ── Amber glass ──────────────────────────────────────── */ --amber: rgba(243, 215, 122, 0.78); --amber-dim: rgba(243, 215, 122, 0.45); /* ── Polished Amber (the premium currency: a rich resin gem, deliberately more saturated than the pale amber glass) ── */ --amber-gem: #e8a32a; --amber-gem-hi: #ffd482; /* ── Crimson felt ─────────────────────────────────────── */ --crimson: rgba(80, 14, 24, 0.92); --plum-felt: #3f1733; /* the other cloth on the bench: plum baize (the Loot Book shelf) */ --soot: #241f1a; /* Coppersmog's residue: the DIRTY end of the conduct meter (dark soot on bronze) */ --soot-text: #c7bbab; /* legible ash-smoke for soot-toned text on the bronze brow */ /* ── Accent (reserved for controls, not the brass world) */ --accent: #4dabf5; --accent-hi: #7ec5ff; /* ── Spark (cyan, the spark's colour: guiding lights, sparkable/Reversal) */ --spark: #19e0e6; --spark-glow: rgba(25, 224, 230, 0.55); /* Readout stat-max tilt: natural / up / down (traits + raid archetype), reads on dark plates. */ --stat-natural: #eef1f4; --stat-up: #86e6a2; --stat-down: #f28b82; /* ── Narrator's channel (the help-bell guidance voice). The narrator is Puddlepot behind the third-person shield, so the .cs-narrator dialog wears his own gilded plum (his waistcoat, gilt on everything he owns), guiding voice as one identity. Used nowhere else in the game. */ --smog-plum-1: #150a0f; /* card ground, darkest (near-black aubergine) */ --smog-plum-2: #251119; /* card ground, top of gradient */ --smog-plum-hi: #b56a9c; /* lifted plum: the card's top-edge highlight (replaces the gilt top) */ --smog-gilt: #e8c25a; /* ostentatious gild: kicker, sub-heads, button */ --smog-gilt-hi: #f6dc94; /* gild sheen (button gradient top) */ --smog-frame: #7a4e2e; /* bronze-plum hairline frame */ --smog-text-1: #f2e6d6; /* plum-warm cream */ --smog-text-2: #cdb7a0; /* ── Radii ────────────────────────────────────────────── */ --radius: 4px; --radius-md: 6px; /* ── Typography ───────────────────────────────────────── */ --font-ui: 'Barlow', sans-serif; --font-condensed: 'Barlow Condensed', 'Barlow', sans-serif; --font-display: 'Playfair Display', serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace; --font-ticker: 'Courier Prime', monospace; --font-chalk: 'Permanent Marker', 'Bradley Hand', cursive; --font-floor: 13px; /* ── Z-index map ──────────────────────────────────────── */ --z-raid-mat: 1; /* raid leather floor: under the pit canvas + all widgets */ --z-canvas: 5; --z-widgets: 20; --z-flanges: 25; --z-raid-winner: 40; /* raid win plaque: above pit chrome, below modals */ --z-drag: 60; --z-modal: 1000; --z-veil: 2000; /* travel blackout: over everything, modals included */ /* ── Accessibility ────────────────────────────────────── */ --a11y-text-bright: 0.200; --a11y-text-dim: 0.300; --a11y-chrome: 0.100; --a11y-glow: 0.150; } /* ── Accessibility derived vars ─────────────────────────── */ :root { --_tb: var(--a11y-text-bright); --_td: var(--a11y-text-dim); --_ch: var(--a11y-chrome); --_gl: var(--a11y-glow); } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } /* ── No accidental text selection ───────────────────────────── The game is a click-and-drag surface (dials, levers, drains, the auction belt), so a drag must never start a text selection. Opt selection back in on real inputs and a .selectable utility for copy surfaces (the admin telemetry export is a