:root {
  --bg: #0f0f12;
  --bg2: #161619;
  --bg3: #1c1c21;
  --bg4: #222228;
  --surface: #26262d;

  --border: rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.12);

  --red: #c0392b;
  --red-bright: #e74c3c;
  --red-glow: rgba(192, 57, 43, 0.18);
  --red-muted: rgba(192, 57, 43, 0.12);
  --red-text: #ff6b6b;

  --text: #e8e8ec;
  --text2: #9191a0;
  --text3: #5a5a6e;

  --gold: #f0a500;
  --gold-bg: rgba(240, 165, 0, 0.12);
  --silver: #a0aab8;
  --bronze: #cd7f32;

  --ok: #7be2a8;

  /* — Tier palette — */
  --ht1: #f0a500;
  --ht2: #d4850f;
  --ht3: #b86c1a;
  --ht4: #9a5520;
  --ht5: #7d4426;
  --lt1: #4fc3f7;
  --lt2: #29b6f6;
  --lt3: #0288d1;
  --lt4: #7986cb;
  --lt5: #5a60a0;
}

/* — Reset — */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

/* — Base body — */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.5;
}

/* — Scrollbar global — */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg4);
  border-radius: 3px;
}