/* ═══════════════════════════════════════════════════════════════════
   verisq-hub-chrome.css — CP 7H.8

   Design tokens, brand fonts, and shared utility classes for the
   brand-correct hub chrome introduced in CP 7H.8. Consumers:
     • SwitchboardPage   — the multi-hub picker shown after login
     • HubLayout         — the chrome around every hub-rooted page

   Brand contract:
     • Gold (#FED33C) is the primary brand accent. Used sparingly as a
       hover/active highlight, never as a fill on hover-y surfaces.
     • Silver (#ACACAC) is the wordmark color and body-text-mid.
     • Chakra Petch is the closest free substitute to the wordmark's
       Supermolot-family geometry. Used for titles, hub names, button
       labels — not body copy.
     • JetBrains Mono is the technical voice — keyboard shortcuts,
       labels, timestamps, count badges.
     • Sora is the body font — geometric humanist sans.

   Light is the default surface. Dark mode is opt-in via
   `html.dark-mode`, which is exactly the same contract the legacy
   NavMenu uses (`localStorage['verisq-nav-theme']`). Toggling the
   switchboard theme propagates to the legacy dashboard and vice-versa.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Brand — invariant across modes ── */
    --vsq-gold:              #FED33C;
    --vsq-gold-warm:         #F5A623;
    --vsq-gold-deep:         #E8B62E;
    --vsq-gold-soft:         rgba(254, 211, 60, 0.10);
    --vsq-gold-glow:         rgba(254, 211, 60, 0.22);
    --vsq-silver:            #ACACAC;

    /* ── LIGHT MODE surfaces (default) ── */
    --vsq-bg-base:           #FAFAF9;
    --vsq-bg-soft:           #F4F4F2;
    --vsq-surface:           #FFFFFF;
    --vsq-surface-raised:    #FFFFFF;
    --vsq-surface-sunken:    #F4F4F2;
    --vsq-rail-bg:           #FBFBF9;
    --vsq-border:            #E7E5E0;
    --vsq-border-soft:       #F1EFEB;
    --vsq-border-strong:     #D4D2CC;

    --vsq-text:              #0A0A0B;
    --vsq-text-mid:          #4A4A52;
    --vsq-text-muted:        #8A8A92;
    --vsq-text-faint:        #C8C8D0;

    --vsq-bg-glow-1:         rgba(254, 211, 60, 0.06);
    --vsq-bg-glow-2:         rgba(245, 166, 35, 0.04);

    /* Shadows — blue-tinted greys for premium depth */
    --vsq-shadow-sm:         0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --vsq-shadow-md:         0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --vsq-shadow-lg:         0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --vsq-shadow-xl:         0 24px 48px -12px rgba(15, 23, 42, 0.18);
    --vsq-shadow-gold:       0 0 24px -6px var(--vsq-gold-glow);

    --vsq-radius-sm:         6px;
    --vsq-radius:            10px;
    --vsq-radius-lg:         14px;
    --vsq-radius-xl:         20px;

    --vsq-rail-width:        232px;
    --vsq-rail-width-collapsed: 60px;
    --vsq-topbar-h:          56px;
}

/* ── DARK MODE — same html.dark-mode contract as legacy NavMenu ── */
html.dark-mode {
    --vsq-bg-base:           #000000;
    --vsq-bg-soft:           #0A0A0B;
    --vsq-surface:           #131316;
    --vsq-surface-raised:    #1C1C20;
    --vsq-surface-sunken:    #0A0A0B;
    --vsq-rail-bg:           #0C0C0E;
    --vsq-border:            #26262B;
    --vsq-border-soft:       #1C1C20;
    --vsq-border-strong:     #3A3A42;

    --vsq-text:              #F5F5F7;
    --vsq-text-mid:          #ACACAC;
    --vsq-text-muted:        #6B6B6B;
    --vsq-text-faint:        #3A3A42;

    --vsq-bg-glow-1:         rgba(254, 211, 60, 0.10);
    --vsq-bg-glow-2:         rgba(245, 166, 35, 0.06);

    --vsq-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.4);
    --vsq-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
    --vsq-shadow-lg:         0 20px 48px -12px rgba(0, 0, 0, 0.6);
    --vsq-shadow-gold:       0 0 32px -6px var(--vsq-gold-glow);
}

/* ── Shared utility: kbd badge ── */
.vsq-kbd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--vsq-surface-sunken);
    border: 1px solid var(--vsq-border);
    color: var(--vsq-text-mid);
    box-shadow: 0 1px 0 var(--vsq-border);
    font-weight: 500;
}

/* ── Shared utility: theme toggle ── */
.vsq-theme-toggle {
    display: inline-flex; align-items: center;
    padding: 3px;
    background: var(--vsq-surface-sunken);
    border: 1px solid var(--vsq-border);
    border-radius: 100px;
    height: 30px;
    transition: background 0.3s, border-color 0.3s;
}
.vsq-theme-segment {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--vsq-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: background 0.18s, color 0.18s;
}
.vsq-theme-segment.is-active {
    background: var(--vsq-gold);
    color: #0A0A0B;
    box-shadow: 0 0 10px -2px var(--vsq-gold-glow);
}
.vsq-theme-segment:hover:not(.is-active) { color: var(--vsq-text); }
.vsq-theme-segment svg { width: 13px; height: 13px; }