/* ============================================================================
   GSB GLOBAL CHROME — paper ground + editorial top nav, shared by every page.
   Loaded after style.css so it overrides the legacy "Flat Tech" chrome.
   This is GLOBAL on purpose (the nav + page background are shared shell), and
   is the first step of the site-wide rollout. Per-page interiors are themed by
   their own gsb-<page>.css. Consumes gsb-tokens.css variables only.
   ============================================================================ */

/* ---- TOKEN BRIDGE -------------------------------------------------------
   Repoint the legacy "Flat Tech" :root tokens (defined in style.css:6-47) at
   the GSB design system. Loaded after style.css so these win. This single block
   flips every variable-driven style across the whole app — chrome, shared
   buttons/selects/inputs, cards, badges — from emerald/slate/red to GSB.
   Hardcoded hex (charts, some inline styles) is NOT caught here and is handled
   per-screen. Luminance-matched so contrast never breaks (dark stays dark,
   light stays light).
   ------------------------------------------------------------------------- */
:root {
  --primary:        var(--gsb-shoot-green) !important;  /* #2F6B45 */
  --primary-hover:  #245539 !important;                 /* darker shoot green */
  --primary-bg:     rgba(47, 107, 69, 0.08) !important; /* soft green tint */
  --bg:             var(--gsb-paper) !important;         /* #F3EEE3 */
  --surface:        #FFFFFF !important;
  --text-main:      var(--gsb-soil-ink) !important;      /* #221E18 */
  --text-secondary: var(--gsb-soil-ink) !important;
  --text-muted:     var(--gsb-stone) !important;         /* #6F695B */
  --border:         var(--color-border) !important;      /* hairline ink */
  --border-dark:    var(--gsb-oat-dk) !important;        /* #D8CFBA */
  --danger:         var(--gsb-clay) !important;          /* #B5532E — never red */
  --success:        var(--gsb-shoot-green) !important;
  --warning:        var(--gsb-ochre) !important;         /* #B98B32 */
  --heading:        var(--gsb-soil-ink) !important;
}

/* ---- Page ground: paper everywhere ------------------------------------- */
html, body {
  background: var(--gsb-paper) !important;
  color: var(--gsb-soil-ink) !important;
}

/* ---- Top masthead / nav bar -------------------------------------------- */
header {
  background: var(--gsb-paper) !important;
  border-bottom: 1.5px solid var(--gsb-soil-ink) !important;   /* editorial masthead rule */
}

/* Tab strip container */
.switcher {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}
.switcher button {
  color: var(--gsb-stone) !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
}
.switcher button:hover {
  color: var(--gsb-soil-ink) !important;
  background: var(--gsb-oat) !important;
}
/* Active tab = the single shoot-green accent */
.switcher button.active {
  background: var(--color-surface) !important;
  color: var(--gsb-shoot-green) !important;
  border: 1px solid var(--gsb-shoot-green) !important;
  box-shadow: none !important;
}

/* "Other ▾" dropdown trigger + menu */
.nav-dropdown-trigger { color: var(--gsb-stone) !important; }
.nav-dropdown-trigger:hover { color: var(--gsb-soil-ink) !important; background: var(--gsb-oat) !important; }
.nav-dropdown-trigger.active {
  background: var(--color-surface) !important;
  color: var(--gsb-shoot-green) !important;
  border: 1px solid var(--gsb-shoot-green) !important;
  box-shadow: none !important;
}
.nav-dropdown-menu {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}
.nav-dropdown-menu button { color: var(--gsb-soil-ink) !important; }
.nav-dropdown-menu button:hover { background: var(--gsb-oat) !important; color: var(--gsb-shoot-green) !important; }
.nav-dropdown-menu button.active { background: var(--gsb-oat) !important; color: var(--gsb-shoot-green) !important; }

/* Mobile nav dropdown (select) */
.mobile-nav-dropdown,
#mobile-nav-select {
  background: var(--color-surface) !important;
  color: var(--gsb-soil-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
}