/* SC2Tree Tournaments — design tokens (ported from handoff/design/tokens.css)
 * Scoped to .t-artboard so they don't bleed into other pages.
 * Existing global tokens (--surface, --accent, --race-t/p/z/r) remain untouched.
 */

.t-artboard {
  /* Surfaces */
  --bg-0:        #0a0d12;     /* page */
  --bg-1:        #0f1218;     /* card */
  --bg-2:        #141820;     /* raised card */
  --bg-3:        #1a1e24;     /* hover / row */
  --bg-4:        #232830;     /* selected */
  --line:        #232830;
  --line-soft:   #1a1e24;
  --line-strong: #2a2f36;

  /* Text */
  --fg-0: #f4f6fa;
  --fg-1: #e6e9ef;
  --fg-2: #c3c8d1;
  --fg-3: #9ba3ae;
  --fg-4: #6b7280;
  --fg-5: #4b525d;

  /* Brand / accents */
  --accent:        #56c2ff;     /* primary blue */
  --accent-2:      #8b6cf0;     /* purple — tournaments / bracket */
  --accent-3:      #ffb547;     /* gold — winner / mvp */
  --accent-glow:   rgba(86,194,255,0.18);

  /* States */
  --good:    #4ade80;
  --good-bg: rgba(74,222,128,0.12);
  --warn:    #fbbf24;
  --warn-bg: rgba(251,191,36,0.12);
  --bad:     #ef4444;
  --bad-bg:  rgba(239,68,68,0.12);
  --info:    #56c2ff;
  --info-bg: rgba(86,194,255,0.12);

  /* Race colors */
  --terran:  #56c2ff;
  --zerg:    #b366ff;
  --protoss: #ffd24d;
  --random:  #9ba3ae;
  --terran-bg:  rgba(86,194,255,0.14);
  --zerg-bg:    rgba(179,102,255,0.14);
  --protoss-bg: rgba(255,210,77,0.14);

  /* Type */
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Radius / shadow */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px var(--accent-glow), 0 8px 28px rgba(86,194,255,0.18);
}

/* Reset for tournament artboard */
.t-artboard, .t-artboard * { box-sizing: border-box; }

.t-artboard {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100%;
}

.t-artboard h1, .t-artboard h2, .t-artboard h3, .t-artboard h4, .t-artboard h5 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}
.t-artboard p { margin: 0; }
.t-artboard button { font-family: inherit; cursor: pointer; }
.t-artboard a { color: var(--accent); text-decoration: none; }

/* === Top bar === */
.t-topbar {
  display: flex; align-items: center;
  height: 48px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  gap: 24px;
  position: relative;
}
.t-topbar-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-size: 15px;
}
.t-topbar-logo-mark {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  position: relative; flex: 0 0 auto;
}
.t-topbar-logo-mark::after {
  content:''; position:absolute; inset:4px;
  background: var(--bg-1); border-radius: 1px;
}
.t-topbar-nav { display: flex; gap: 4px; align-items: center; }
.t-topbar-nav-item {
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
}
.t-topbar-nav-item.active {
  color: var(--fg-0);
  background: var(--bg-3);
}
.t-topbar-spacer { flex: 1; }
.t-topbar-tools { display: flex; align-items: center; gap: 8px; }

/* Icon buttons */
.t-iconbtn {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  position: relative;
}
.t-iconbtn:hover { background: var(--bg-3); color: var(--fg-1); }
.t-iconbtn-badge {
  position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px;
  background: var(--bad);
  border-radius: 50%;
  border: 2px solid var(--bg-1);
}
.t-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #56c2ff);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #0a0d12;
}

/* === Buttons === */
.t-artboard .t-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.t-artboard .t-btn:hover { background: var(--bg-3); border-color: #313842; }
.t-artboard .t-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #07101a;
}
.t-artboard .t-btn-primary:hover { background: #6dcdff; border-color: #6dcdff; }
.t-artboard .t-btn-ghost {
  background: transparent; border-color: transparent;
  color: var(--fg-2);
}
.t-artboard .t-btn-ghost:hover { background: var(--bg-3); }
.t-artboard .t-btn-danger { color: var(--bad); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }
.t-artboard .t-btn-danger:hover { background: rgba(239,68,68,0.12); }
.t-artboard .t-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 5px; }
.t-artboard .t-btn-lg { height: 40px; padding: 0 18px; font-size: 14px; }

/* === Pills / tags === */
.t-pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-3);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.t-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-3);
}
.t-pill-good { background: var(--good-bg); color: var(--good); }
.t-pill-good .t-pill-dot { background: var(--good); }
.t-pill-info { background: var(--info-bg); color: var(--info); }
.t-pill-info .t-pill-dot { background: var(--info); }
.t-pill-warn { background: var(--warn-bg); color: var(--warn); }
.t-pill-warn .t-pill-dot { background: var(--warn); }
.t-pill-bad  { background: var(--bad-bg);  color: var(--bad);  }
.t-pill-bad  .t-pill-dot  { background: var(--bad); }
.t-pill-purple { background: rgba(139,108,240,0.14); color: var(--accent-2); }
.t-pill-purple .t-pill-dot { background: var(--accent-2); }
.t-pill-gold   { background: rgba(255,181,71,0.14); color: var(--accent-3); }

/* Race chips */
.t-race {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
}
.t-race-T { color: var(--terran);  background: var(--terran-bg);  }
.t-race-Z { color: var(--zerg);    background: var(--zerg-bg);    }
.t-race-P { color: var(--protoss); background: var(--protoss-bg); }
.t-race-R { color: var(--random);  background: rgba(155,163,174,0.14); }
.t-race-glyph {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  width: 11px; text-align: center;
}

/* Cards */
.t-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.t-card-pad { padding: 18px; }
.t-card-hd  { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.t-card-hd h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); }
.t-card-hd .t-spacer { flex: 1; }

/* Section header label */
.t-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--fg-3);
  margin-bottom: 10px;
}

/* Mono helpers */
.t-mono { font-family: var(--font-mono); }

/* Avatars (player) */
.t-pavatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: #0a0d12;
  flex: 0 0 auto;
}

/* MMR/league color map */
.t-rank-grand { color: #ff6f4d; }
.t-rank-master { color: #b366ff; }
.t-rank-diamond { color: #56c2ff; }
.t-rank-platinum { color: #9aa6b8; }
.t-rank-gold { color: #ffd24d; }
.t-rank-silver { color: #c3c8d1; }
.t-rank-bronze { color: #c89a4f; }

/* Scrollbar nicety */
.t-artboard ::-webkit-scrollbar { width: 8px; height: 8px; }
.t-artboard ::-webkit-scrollbar-track { background: transparent; }
.t-artboard ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
.t-artboard ::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* Stage subtitle / kicker */
.t-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-4);
}