/* ══════════════════════════════════════════════════════════════ Theme tokens — light (default) + four dark variants. The whole app's chrome (top bar, panels, modals, sidebar, canvas background + grid, the floating device-name labels) reads its surface / text / border colours from these semantic tokens, so a single `data-theme` attribute on reskins everything. The VLAN poster view (css/vlan.css) reads these same tokens, so it follows the active theme too — white in light mode, dark in the dark skins. Device-type colours (switch-teal, router-orange…), status colours, and the per-VLAN accent palette are NOT themed — they are content / brand, not chrome. Picker order: light · gray · gray blue · dark gray ══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --bg: #ffffff; /* page / canvas / workspace base */ --surface: #ffffff; /* panels, modals, top bar, cards */ --surface-2: #f7f8fa; /* inset fields, textareas, code */ --surface-3: #fafbfc; /* nested cards, board background */ --ink: #111827; /* primary text */ --ink-soft: #374151; /* secondary text / button text */ --ink-mute: #6b7280; /* tertiary text */ --ink-faint: #9aa1ac; /* placeholders / very muted */ --line: #e6e7eb; /* hairline borders */ --line-soft: #eef0f2; /* faint dividers */ --line-strong: #cccccc; /* stronger field borders */ --hover: #f1f3f5; /* ghost-button / row hover */ --field: #ffffff; /* input background */ --field-border: #e0e0e0; /* input border */ --accent: #0066ff; --grid-dot: #9aa4b2; /* canvas dot-grid */ --canvas-label: #111827; /* device name text on the canvas */ --overlay: rgba(0, 0, 0, 0.40); /* modal backdrop */ --float-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.12); /* Primary call-to-action buttons (Export / OK / Copy / active tab) */ --primary-bg: #111111; --primary-bg-hover: #333333; --primary-fg: #ffffff; } /* ── Dark gray — neutral, medium-dark (the default dark) ───────── */ :root[data-theme="dark-gray"] { --bg: #1d1f23; --surface: #26282d; --surface-2: #2d2f35; --surface-3: #303339; --ink: #e7e9ec; --ink-soft: #c2c6cd; --ink-mute: #9197a1; --ink-faint: #6b7079; --line: #3a3d44; --line-soft: #32353b; --line-strong: #4a4e56; --hover: #303339; --field: #2d2f35; --field-border: #3f434b; --accent: #4d9bff; --grid-dot: #3a3f47; --canvas-label: #d7dadf; --overlay: rgba(0, 0, 0, 0.55); --float-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 30px rgba(0, 0, 0, 0.55); --primary-bg: #3b76e8; --primary-bg-hover: #2f64d4; --primary-fg: #ffffff; } /* ── Gray — a bit brighter than dark gray ─────────────────────── */ :root[data-theme="gray"] { --bg: #2b2e33; --surface: #34373d; --surface-2: #3b3f46; --surface-3: #3f434a; --ink: #eef0f3; --ink-soft: #cfd3da; --ink-mute: #a3a9b3; --ink-faint: #797f89; --line: #474b53; --line-soft: #3f434a; --line-strong: #565b64; --hover: #3f434a; --field: #3b3f46; --field-border: #4d525b; --accent: #5aa3ff; --grid-dot: #4a4f58; --canvas-label: #e2e4e8; --overlay: rgba(0, 0, 0, 0.50); --float-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.50); --primary-bg: #4079ea; --primary-bg-hover: #3568d6; --primary-fg: #ffffff; } /* ── Gray blue — bluish slate dark ────────────────────────────── */ :root[data-theme="gray-blue"] { --bg: #1a2230; --surface: #212c3d; --surface-2: #273347; --surface-3: #2a3850; --ink: #e6ecf5; --ink-soft: #bcc7d8; --ink-mute: #8b98ad; --ink-faint: #64718a; --line: #33415a; --line-soft: #2c384e; --line-strong: #415070; --hover: #2a3850; --field: #273347; --field-border: #394a66; --accent: #5ea6ff; --grid-dot: #364561; --canvas-label: #d5deea; --overlay: rgba(8, 14, 24, 0.60); --float-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.55); --primary-bg: #3f7fe6; --primary-bg-hover: #346fd2; --primary-fg: #ffffff; } /* ── Theme picker (top-bar popover) ───────────────────────────── */ .theme-switcher { position: relative; display: inline-flex; } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 192px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--float-shadow); } .theme-menu.hidden { display: none; } .theme-menu-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-mute); padding: 4px 8px 6px; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-soft); padding: 6px 8px; font-size: 12px; cursor: pointer; } .theme-option:hover { background: var(--hover); } .theme-option.active { border-color: var(--line); background: var(--hover); } .theme-option.active .theme-check { opacity: 1; } .theme-swatch { width: 26px; height: 18px; flex-shrink: 0; border-radius: 5px; border: 1px solid rgba(127, 127, 127, 0.35); position: relative; overflow: hidden; } /* split swatch: surface block + an accent dot, built from the theme it represents (set inline per option so it previews regardless of active theme) */ .theme-swatch::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--sw-accent, #0066ff); } .theme-option-label { flex: 1; } .theme-check { flex-shrink: 0; width: 14px; height: 14px; opacity: 0; color: var(--accent); } .theme-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }