/* ── SBF Design System ────────────────────────────────────────────────────
   Tokens + 8 button variants. Load first on every page.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* colours */
  --bg:         #FBF6EF;
  --surface:    #FCFAF5;
  --paper:      #FFFFFF;
  --ink:        #2B2B33;
  --muted:      #7C7563;
  --line:       #E7DFCF;
  --gold:       #C9A227;
  --gold-hover: #B8931F;
  --gold-text:  #A8851F;
  --up:         #2E8B6F;
  --down:       #C0504D;

  /* radii */
  --r-sm:      6px;
  --r-control: 8px;
  --r-card:    12px;
  --r-pill:    999px;

  /* padding */
  --pad-btn:  9px 16px;
  --pad-chip: 7px 14px;
  --pad-tf:   6px 11px;
  --gap:      8px;

  /* motion */
  --dur:  120ms;
  --ease: ease;

  /* typography */
  --font-sans: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── 1. btn-primary ───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-btn);
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover  { background: var(--gold-hover); text-decoration: none; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 2. btn-secondary ─────────────────────────────────────────────────── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-btn);
  background: var(--paper);
  color: var(--ink);
  border: .5px solid var(--line);
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-secondary:hover  { border-color: var(--gold); text-decoration: none; }
.btn-secondary:active { transform: scale(.98); }
.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 3. seg (segment group) ───────────────────────────────────────────── */
/* Container */
.seg {
  display: inline-flex;
  gap: 0;
  border: .5px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  align-items: stretch;
}
.seg button {
  flex: 1;
  padding: 7px 14px;
  border: none;
  border-right: .5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--ink); }
.seg button.on,
.seg button.active { background: var(--ink); color: var(--bg); }
.seg button.coming { color: var(--line); cursor: default; }
.seg button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(201,162,39,.35); }

/* ── 4. chip (filter pill, multi-select) ──────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-chip);
  border: .5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--ink); text-decoration: none; }
.chip.on,
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 5. tf (timeframe button, single-select) ──────────────────────────── */
.tf {
  padding: var(--pad-tf);
  border: .5px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.tf:hover { color: var(--ink); }
.tf.on { color: var(--gold-text); border-color: var(--gold-text); background: var(--surface); }
.tf:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 6. icon-btn ──────────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: .5px solid var(--line);
  border-radius: var(--r-control);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 7. nav-item ──────────────────────────────────────────────────────── */
.nav-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: none;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-item:hover { color: var(--ink); text-decoration: none; }
.nav-item.on,
.nav-item.active { color: var(--ink); font-weight: 500; }
.nav-item.on::after,
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}
.nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,162,39,.35); }

/* ── 8. tag (label — not a button) ───────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border: .5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.4;
}
.tag.verify { color: var(--up);        border-color: var(--up);        background: rgba(46,139,111,.06); }
.tag.signal { color: var(--gold-text); border-color: var(--gold-text); background: rgba(168,133,31,.06); }
.tag.pro    { color: var(--gold-text); border-color: var(--gold-text); }

/* ── Compat aliases (existing class names → same visual) ──────────────── */

/* seg-btn = .seg button */
.seg-btn, .mseg-btn {
  padding: 7px 14px;
  border: .5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.seg-btn:hover, .mseg-btn:hover { color: var(--ink); }
.seg-btn.on, .seg-btn.active,
.mseg-btn.on, .mseg-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* tab filter pills = .chip */
.tab {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-chip);
  border: .5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.tab:hover { border-color: var(--gold); color: var(--ink); }
.tab.on, .tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* drng-btn (calendar date range) = .chip */
.drng-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--pad-chip);
  border: .5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.drng-btn:hover { border-color: var(--gold); color: var(--ink); }
.drng-btn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* greplay = .btn-secondary */
.greplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  background: var(--paper);
  color: var(--ink);
  border: .5px solid var(--line);
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--dur) var(--ease);
}
.greplay:hover { border-color: var(--gold); }

/* ev-gloss-btn = .btn-secondary (small) */
.ev-gloss-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--paper);
  color: var(--ink);
  border: .5px solid var(--line);
  border-radius: var(--r-control);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.ev-gloss-btn:hover { border-color: var(--gold); text-decoration: none; }

/* ── Mobile touch targets ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .btn-primary, .btn-secondary { min-height: 44px; padding: 11px 18px; }
  .icon-btn  { width: 44px; height: 44px; }
  .chip, .tab, .drng-btn { min-height: 36px; }
  .tf        { min-height: 36px; padding: 8px 11px; }
  .seg button, .seg-btn, .mseg-btn { min-height: 36px; }
}