/* ═══════════════════════════════════════════════════════════════════
   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; }

/* ow111d-1bc8 — Readiness pages render their own root elements and never adopted the shared
   .page-content wrapper other hubs use, so their content sat flush against the rail while every
   other hub had breathing room. Scope the same 24px gutter to the readiness hub only, via the
   shell's data-hub attribute, so no other hub's spacing shifts. Pages that DO bring their own
   .page-content keep it and opt out, avoiding doubled padding. */
.hl-shell[data-hub="readiness"] .hl-content-wrapper { padding: 24px; }
.hl-shell[data-hub="readiness"] .hl-content-wrapper > .page-content { padding: 0; }