/* ============================================================
   FIGHTERSTATUS — Dark / Crimson token system
   Display: Oswald (condensed, athletic) · Body: Archivo · Label: Oswald
   ============================================================ */

/* Fonts load from base.html <link> tags (preconnected, non-blocking). */

:root {
  /* ---- Surfaces (near-black, layered) ---- */
  --bg-900: #08080a;
  --bg-850: #0c0c0f;
  --bg-800: #111114;
  --bg-750: #17171c;
  --bg-700: #1e1e24;
  --bg-elev: #1b1b21;

  /* ---- Lines ---- */
  --line:        rgba(255,255,255,0.07);
  --line-soft:   rgba(255,255,255,0.045);
  --line-strong: rgba(255,255,255,0.14);

  /* ---- Text ---- */
  --fg:    #f6f6f8;
  --fg-2:  #b7b7c0;
  --fg-3:  #9b9ba5;   /* 7.3:1 on bg-900 — was #7c7c86 (4.0:1), fine print failed AA */
  --fg-4:  #85858f;   /* 5.5:1 on bg-900 — was #54545d (2.5:1), well under AA */

  /* ---- Crimson (signature) ---- */
  --crimson:        #e1182b;
  --crimson-bright: #ff2b3d;
  --crimson-dark:   #9e0f1c;
  --crimson-deep:   #480910;
  --crimson-glow:   rgba(225,24,43,0.55);
  --crimson-tint:   rgba(225,24,43,0.12);

  /* ---- Tier colors ---- */
  --tier-goat:   #e8b53d;  /* gold      */
  --tier-goat-2: #b9881f;
  --tier-legend: #e1182b;  /* crimson   */
  --tier-great:  #c9ccd6;  /* platinum  */
  --tier-good:   #5b8def;  /* steel blue*/

  /* ---- Sport accents ---- */
  --sport-box: #e1182b;
  --sport-ufc: #d9402a;
  --sport-mma: #e88a1a;

  /* ---- Fonts ---- */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-label: 'Oswald', system-ui, sans-serif;
  --font-script: 'Archivo', system-ui, sans-serif; /* italic, used for nicknames */

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -24px rgba(0,0,0,0.9);
  --shadow-pop:  0 30px 70px -30px rgba(0,0,0,0.95), 0 0 0 1px var(--line-strong) inset;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-900);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The page never pans sideways — wide content (tables, media rows) must
     scroll inside its own overflow-x container instead. */
  overflow-x: hidden;
  max-width: 100vw;
}

::selection { background: var(--crimson); color: #fff; }

/* Type helpers */
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.0; }
.eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-900); }
::-webkit-scrollbar-thumb { background: #26262d; border-radius: 99px; border: 3px solid var(--bg-900); }
::-webkit-scrollbar-thumb:hover { background: #34343c; }

/* Reusable film-grain / glow utilities */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }