/* --------------------------------------------------------------------------- Infra 360 - shared design tokens (single source of truth for every page). Dark is the default theme; light mode is the same tokens with a second value set, switched by data-theme="light" on (set by theme.js, persisted in localStorage). Style components through tokens only - never hardcode a color that has a token. The "legacy aliases" block keeps the older variable names working (--panel-bg-solid, --accent, ...) so existing rules resolve to the new palette without a big-bang rewrite. New rules should use the new names. --------------------------------------------------------------------------- */ :root { /* ground */ --bg: #0d0f13; /* page canvas */ --bg-sunk: #0a0c0f; /* topbars, sidebars */ --surface: #14171d; /* cards, tables, dropdowns */ --surface-2: #101318; /* table headers, sunken wells */ --border: #262a33; --border-soft: #1d2129; /* text */ --text: #e9ecf1; --muted: #8b95a5; --faint: #5b6472; /* accent - the only brand color */ --mint: #1cb797; --mint-bright: #2fd0ac; /* hover / active text on tint */ --mint-tint: rgba(28, 183, 151, 0.12); --mint-line: rgba(28, 183, 151, 0.35); --on-mint: #06251c; /* text on a mint fill */ /* semantic (not the accent) */ --danger: #f4655f; --danger-tint: rgba(244, 101, 95, 0.1); --danger-line: rgba(244, 101, 95, 0.35); --warn: #e5a545; --blue: #6c8fd8; /* floating chrome over imagery (viewer topbar, HUD, map controls) */ --glass: rgba(8, 10, 13, 0.88); --glass-border: rgba(255, 255, 255, 0.07); /* controls */ --input-bg: rgba(0, 0, 0, 0.32); --track: rgba(255, 255, 255, 0.13); --hover-wash: rgba(128, 140, 155, 0.12); /* legible on both themes */ --av-bg: #182420; --veil-rgb: 13, 15, 19; /* login photo veil, as r,g,b */ --shadow: 0 14px 34px rgba(0, 0, 0, 0.55); /* type */ --sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* legacy aliases (older rules keep working, resolved to the new palette) */ --panel-bg: var(--glass); --panel-bg-solid: var(--surface); --panel-border: var(--border); --text-secondary: var(--muted); --accent: var(--mint); --accent-hover: var(--mint-bright); --info-blue: var(--blue); } :root[data-theme="light"] { --bg: #eef0f3; --bg-sunk: #f7f8fa; --surface: #ffffff; --surface-2: #f2f4f7; --border: #d7dce3; --border-soft: #e4e8ee; --text: #182028; --muted: #5a6574; --faint: #8a94a3; --mint: #17a385; --mint-bright: #0d8a70; --mint-tint: rgba(23, 163, 133, 0.11); --mint-line: rgba(23, 163, 133, 0.4); --danger: #d64540; --danger-tint: rgba(214, 69, 64, 0.08); --danger-line: rgba(214, 69, 64, 0.4); --warn: #c98a1e; --blue: #3f66c4; --glass: rgba(255, 255, 255, 0.92); --glass-border: rgba(15, 25, 35, 0.1); --input-bg: #ffffff; --track: rgba(15, 25, 35, 0.16); --av-bg: #dff2ec; --veil-rgb: 238, 240, 243; --shadow: 0 12px 30px rgba(23, 32, 42, 0.16); } /* Brand lockup (logo-dark.svg / logo-light.svg): two imgs, one shown per theme. The wordmark is baked into the file, so the swap happens here rather than via currentColor (SVG-in-img can't inherit page colors). */ .lockup-light { display: none; } :root[data-theme="light"] .lockup-dark { display: none; } :root[data-theme="light"] .lockup-light { display: inline-block; } /* Any element with its own "display" rule silently wins over the browser's built-in [hidden]{display:none} regardless of specificity. This guarantees hidden always actually hides. (Shared here so pages don't re-declare it.) */ [hidden] { display: none !important; }