/* =========================================================================
   MY GM HUB — design tokens
   Broadcast control room. Density-first. Mono numerics. Crimson hot key.
   ========================================================================= */

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

:root {
  /* ── surfaces ─────────────────────────────────────────────────────── */
  --bg:           #0A0D11;       /* page base */
  --bg-2:         #0f1117;       /* raised */
  --panel:        #141823;       /* card / panel */
  --panel-2:      #1a1f2e;       /* hover / row alt */
  --panel-3:      #232a3a;       /* input bg */
  --line:         #21262d;       /* hairline */
  --line-2:       #2a3142;       /* mid line */
  --line-3:       #364056;       /* hover line */
  --scrim:        rgba(5, 7, 10, 0.66);

  /* ── ink ──────────────────────────────────────────────────────────── */
  --ink:          #E8ECF4;       /* primary text */
  --ink-2:        #B6BECC;       /* secondary */
  --ink-3:        #7A8499;       /* muted */
  --ink-4:        #535C70;       /* hint */
  --ink-5:        #353C4B;       /* placeholder */

  /* ── brand & action ───────────────────────────────────────────────── */
  --crimson:      #C8102E;       /* live / go / primary */
  --crimson-2:    #E11D48;       /* hot variant */
  --crimson-ink:  #FFE4E8;
  --crimson-soft: rgba(200, 16, 46, 0.14);
  --crimson-line: rgba(200, 16, 46, 0.45);

  /* ── role IDENTITY — form, not status. Both use neutral ink. ────── */
  /* Differentiated by fill weight (outline vs solid) + the word + a    */
  /* glyph (◇ vs ◆). Red/amber/green are reserved for STATUS only.      */
  --role-ink:     var(--ink);    /* identity color — same for both     */
  --role-line:    var(--line-3); /* outline for FACE (◇)               */
  --role-fill:    var(--ink);    /* fill for HEEL (◆)                  */
  --role-fill-ink: var(--bg);    /* on-fill ink for HEEL chip          */

  /* ── status semantics (reserved — never for role) ───────────────── */
  --gold:         #E8A23A;       /* champion */
  --gold-soft:    rgba(232, 162, 58, 0.16);
  --gold-line:    rgba(232, 162, 58, 0.45);

  --cyan:         #35C5C7;       /* scan / sync / photo */
  --cyan-soft:    rgba(53, 197, 199, 0.14);
  --cyan-line:    rgba(53, 197, 199, 0.45);

  --money:        #4ADE80;       /* money positive */
  --money-soft:   rgba(74, 222, 128, 0.14);

  --warn:         #F59E0B;       /* warning amber */
  --warn-soft:    rgba(245, 158, 11, 0.12);
  --warn-line:    rgba(245, 158, 11, 0.45);

  --danger:       #EF4444;
  --danger-soft:  rgba(239, 68, 68, 0.12);

  /* ── classes (5 deliberate hues — kept OUT of status palette) ─────── */
  /* No status-red, no warn-amber, no money-green. Hues only. */
  --cls-fighter:    #5B8FF9;     /* cobalt */
  --cls-bruiser:    #D97757;     /* copper (was amber → collided w/ warn) */
  --cls-cruiser:    #0EA5A9;     /* jade (was emerald → collided w/ money) */
  --cls-giant:      #DB2777;     /* magenta (was red → collided w/ heel/danger/lv4/sta-bad) */
  --cls-specialist: #A78BFA;     /* violet */

  /* ── wrestler tiers (6) ───────────────────────────────────────────── */
  --tier-immortal:  #F0D27A;
  --tier-legend:    #E8A23A;
  --tier-icon:      #A78BFA;
  --tier-renostar:  #58A6FF;
  --tier-estab:     #B6BECC;
  --tier-rookie:    #7A8499;

  /* ── rivalry tints (8 hues, all outside the status palette) ──────── */
  --riv-m1: #6366F1;             /* indigo (was status-red) */
  --riv-m2: #EA580C;             /* orange (was warn-amber) */
  --riv-m3: #3B82F6;             /* blue */
  --riv-w1: #EC4899;             /* pink */
  --riv-w2: #C084FC;             /* lavender */
  --riv-w3: #06B6D4;             /* cyan-teal (was money-green) */
  --riv-mtag: #FB923C;           /* light orange */
  --riv-wtag: #F472B6;           /* hot pink */

  /* ── rivalry levels L0..L4 (escalation scale) ─────────────────────── */
  --lv0: #535C70;
  --lv1: #58A6FF;
  --lv2: #34D399;
  --lv3: #F59E0B;
  --lv4: #E11D48;

  /* ── match grade scale ────────────────────────────────────────────── */
  --grade-elite:    #F0D27A;
  --grade-good:     #34D399;
  --grade-passable: #58A6FF;
  --grade-offelite: #F59E0B;
  --grade-mirror:   #7A8499;

  /* ── stamina scale ────────────────────────────────────────────────── */
  --sta-ok:    #2EA043;          /* >= 60 */
  --sta-warn:  #F59E0B;          /* 40-59 */
  --sta-bad:   #E11D48;          /* < 40   (40 = danger line) */

  /* ── typography ───────────────────────────────────────────────────── */
  --f-display: 'Oswald', 'Impact', 'Bebas Neue', sans-serif;
  --f-ui:      'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --t-display-xl: 28px;          /* zone headers, scope numerics */
  --t-display-l:  20px;
  --t-display-m:  16px;
  --t-display-s:  13px;          /* mini-caps */

  --t-body:     13px;
  --t-body-s:   12px;
  --t-mono:     12px;
  --t-mono-s:   11px;
  --t-cap:      10px;            /* eyebrow / mini-caps */

  --lh-tight: 1.1;
  --lh-ui:    1.35;
  --lh-body:  1.5;

  --ls-cap:    0.14em;
  --ls-disp:   0.04em;

  /* ── spacing — tight base ─────────────────────────────────────────── */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-7: 16px;
  --s-8: 20px;
  --s-9: 24px;
  --s-10: 32px;
  --s-11: 40px;
  --s-12: 56px;

  /* ── radii (software, not soft) ───────────────────────────────────── */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 5px;
  --r-4: 8px;
  --r-pill: 999px;

  /* ── elevation ────────────────────────────────────────────────────── */
  --el-1: 0 1px 0 rgba(0,0,0,.4);
  --el-2: 0 4px 12px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.02) inset;
  --el-3: 0 12px 36px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.03) inset;
  --el-4: 0 24px 60px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;

  /* ── motion ───────────────────────────────────────────────────────── */
  --ease:   cubic-bezier(.4, .14, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 320ms;

  /* the signature: cascade tick — any downstream value flashes briefly */
  --tick-color: var(--cyan);
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: var(--lh-ui);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
::selection { background: var(--crimson-soft); color: var(--ink); }

/* mono numerics everywhere */
.num, .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* mini-caps eyebrow */
.cap {
  font: 600 var(--t-cap)/1 var(--f-ui);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* display headings */
.h-display {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: var(--ls-disp);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* ── primitives — chips, pills, badges ────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 22px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--panel-2);
  font: 500 var(--t-mono-s)/1 var(--f-mono);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.sm { height: 18px; padding: 0 5px; font-size: 10px; }
.chip.lg { height: 26px; padding: 0 var(--s-4); }
.chip.active { background: var(--crimson-soft); border-color: var(--crimson-line); color: var(--crimson-ink); }
.chip.gold   { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }
.chip.cyan   { background: var(--cyan-soft); border-color: var(--cyan-line); color: var(--cyan); }
.chip.warn   { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
/* .chip.face/.heel removed — role is form, not hue. Use .role-pill. */
.chip.money  { color: var(--money); border-color: rgba(74,222,128,.35); background: var(--money-soft); }
.chip.muted  { color: var(--ink-3); background: transparent; border-color: var(--line); }

/* inline editable numeric — appears overridden when user-modified */
.num-input {
  font-family: var(--f-mono);
  background: var(--panel-3);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: var(--r-2);
  padding: 2px 6px;
  height: 22px;
  width: 64px;
}
.num-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-soft); }
.num-input.overridden { border-color: var(--warn-line); background: rgba(245,158,11,.06); color: var(--warn); }

/* "engine chose this" vs "you overrode this" — the signature pattern */
.overridden-mark {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--warn);
  font: 600 var(--t-cap)/1 var(--f-ui);
  letter-spacing: var(--ls-cap);
}
.overridden-mark::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 6px var(--warn);
}
.engine-mark {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-4);
  font: 500 var(--t-cap)/1 var(--f-ui);
  letter-spacing: var(--ls-cap);
}
.engine-mark::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--ink-4);
}

/* reset-to-suggested affordance */
.reset-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-3); cursor: pointer;
  font: 700 10px/1 var(--f-ui);
}
.reset-x:hover { color: var(--warn); border-color: var(--warn-line); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 30px; padding: 0 var(--s-6);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: var(--r-3);
  font: 500 var(--t-body-s)/1 var(--f-ui);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.btn:hover { border-color: var(--line-3); background: var(--panel-3); }
.btn.sm { height: 24px; padding: 0 var(--s-4); font-size: 11px; }
.btn.lg { height: 36px; padding: 0 var(--s-7); font-size: 13px; }
.btn.primary {
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cap);
  box-shadow: 0 0 0 1px rgba(200,16,46,.3), 0 6px 16px rgba(200,16,46,.18);
}
.btn.primary:hover { background: var(--crimson-2); border-color: var(--crimson-2); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06); }
.btn.cyan { color: var(--cyan); border-color: var(--cyan-line); background: var(--cyan-soft); }
.btn.gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); }

/* the broadcast dashed accent line — sparing use only */
.broadcast-rule {
  height: 0; border: none;
  border-top: 1px dashed var(--crimson-line);
  margin: 0;
}

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes tick-flash {
  0%   { color: var(--tick-color); text-shadow: 0 0 8px var(--cyan-soft); }
  100% { color: inherit; text-shadow: none; }
}
.tick { animation: tick-flash 700ms var(--ease-out); }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--crimson-line); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
.pulse { animation: pulse-ring 900ms var(--ease-out); }

/* small scrollbar in dark UI */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }