/* ─────────────────────────────────────────────────────────────────────────
   bs_type.css — shared typography + colour discipline
   Loaded after each page's own <style>, so it has the final say.

   Two rules drive everything here:
     1. Caps are for *labels only*. Names, titles and prose stay sentence case.
     2. Cyan means "you can act on this". Everything else is a tint of white.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bs-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One accent, used sparingly. */
  --bs-accent:      #22e0f2;
  --bs-accent-soft: rgba(34,224,242,.12);

  /* Text ramp — hierarchy comes from these, not from colour. */
  --bs-text:      #ffffff;
  --bs-text-2:    rgba(255,255,255,.68);
  --bs-text-3:    rgba(255,255,255,.42);
  --bs-text-4:    rgba(255,255,255,.26);

  /* 4px spacing scale. */
  --bs-1: 4px;  --bs-2: 8px;   --bs-3: 12px; --bs-4: 16px;
  --bs-5: 24px; --bs-6: 32px;  --bs-7: 48px;
}

html, body {
  font-family: var(--bs-font);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Headings ─────────────────────────────────────────────────────────────
   Big, heavy, tight. Uppercase only on the page title — below that,
   sentence case reads faster and looks less like a terminal demo.        */

h1, .page-title {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.hero-title {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .02em;
  line-height: 1.15;
  text-transform: none;   /* project names keep their real casing */
}

h2 { font-weight: 700; font-size: 22px; letter-spacing: .02em; text-transform: none; }
h3 { font-weight: 700; font-size: 17px; letter-spacing: .01em; text-transform: none; }

/* ── Labels ───────────────────────────────────────────────────────────────
   The only place caps + wide tracking belong. Dim, not cyan — these are
   signposts, not actions.                                                */

.sec-label,
.live-head-lbl,
.hero-eyebrow,
.eyebrow,
.rail-lbl,
.preview-lbl,
.section-lbl,
.hero-stat-lbl,
.stat-lbl,
.card-stat-lbl,
.field-lbl,
.ps-lbl,
.mstat-lbl,
.modal-stat-lbl,
.preview-stat-lbl,
.top-lbl,
.top-entries-lbl,
.table-hdr,
.live-panel-title {
  font-size: 10px !important;
  letter-spacing: .16em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--bs-text-3) !important;
}

/* ── Body copy ────────────────────────────────────────────────────────── */

p, .page-sub, .live-sub {
  font-size: 13.5px;
  line-height: 1.75;
  letter-spacing: .01em;
  color: var(--bs-text-3);
  text-transform: none;
}

/* ── Names and titles — sentence case, weight carries them ────────────── */

.card-title,
.win-name,
.nft-name,
.preview-title,
.preview-name,
.live-row-name {
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--bs-text);
}

.card-title    { font-size: 14px; }
.nft-name      { font-size: 13px; }
.live-row-name { font-size: 13px; font-weight: 500; }

/* ── Numbers — plain white. Cyan on a stat is noise, not signal ───────── */

.hero-stat-val,
.stat-val,
.card-stat-val,
.stat-num,
.mstat-val {
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bs-text) !important;
}

.card-stat-val, .stat-num { font-size: 20px; }

/* ── Actions — this is what cyan is for ───────────────────────────────── */

.hero-btn,
.card-btn,
.nft-link,
.submit-btn,
.mbtn,
.modal-confirm,
.live-view-all,
.live-row-bid {
  font-family: var(--bs-font);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.hero-btn      { font-size: 12.5px; }
.nft-link      { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.live-row-bid  { font-size: 12px; color: var(--bs-text-2) !important; }
.live-row-bid:hover { color: var(--bs-accent) !important; }
.live-view-all { font-size: 12px; color: var(--bs-text-3) !important; }
.live-view-all:hover { color: var(--bs-accent) !important; }

/* Tabs — the active one earns the accent, the rest stay quiet. */
.tab {
  font-family: var(--bs-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-text-3);
}
.tab:hover        { color: var(--bs-text); }
.tab.active       { color: var(--bs-accent); }

/* ── Timers and costs — informational, not clickable ──────────────────── */

.live-row-time,
.live-row-cost,
.nft-time,
.win-date,
.card-timer {
  color: var(--bs-text-3) !important;
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: none;
}

/* Only a genuinely urgent timer gets colour. Add .is-urgent from PHP when
   there's under an hour left. */
.live-row-time.is-urgent,
.card-timer.is-urgent { color: #ffb347 !important; }

/* ── Tables and rows ──────────────────────────────────────────────────── */

.table-row,
.live-row,
.top-entry-row,
.top-row,
.bid-row,
.recent-row {
  font-size: 12.5px;
  letter-spacing: .01em;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

input, textarea, select, button {
  font-family: var(--bs-font);
  letter-spacing: .01em;
  font-size: 13px;
}
input::placeholder, textarea::placeholder { color: var(--bs-text-4); }
input:focus, textarea:focus { border-color: rgba(255,255,255,.35) !important; }

/* ── Selection ────────────────────────────────────────────────────────── */

::selection { background: var(--bs-accent-soft); color: #fff; }

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  h1, .page-title { font-size: 26px; }
  .hero-title     { font-size: 22px; }
  html, body      { font-size: 13px; }
}