/* ============================================================
   FightIQ Design System — global entry point
   Consumers link THIS file. Keep it as @import lines only.
   ============================================================ */

/* ---- inlined from _design_system/tokens/colors.css ---- */
/* ============================================================
   FightIQ — Color system
   Broadcast fight-night: deep blue-black canvas, fight-red accent,
   red-corner / blue-corner matchup motif, green/red result semantics.
   ============================================================ */

:root {
  /* --- Ink scale (backgrounds & surfaces) --- */
  --ink-1000: #05070a; /* deepest — page gutters, footer */
  --ink-900:  #07090d; /* below-app void */
  --ink-850:  #0b0e13; /* app background (brand canvas) */
  --ink-800:  #11151c; /* raised surface / sticky bars */
  --ink-700:  #161b23; /* card surface */
  --ink-600:  #1d2530; /* card hover / inset */
  --ink-500:  #28323f; /* strong fill / track */
  --ink-400:  #3a4656; /* disabled fill */

  /* --- Hairlines & borders (on dark) --- */
  --line-soft:   rgba(255,255,255,0.06);
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.16);

  /* --- Foreground / text --- */
  --fg-1: #f4f6f8;  /* primary text, big numbers */
  --fg-2: #aeb8c4;  /* secondary text, labels */
  /* THE TWO MUTED STEPS, RAISED TO AA (2026-09-08).
     Measured with the WCAG 2.x relative-luminance formula against the real
     composited grounds these two are drawn on, not eyeballed:

                        ink-850   ink-800   ink-700   ink-600
         --fg-3 was      4.62      4.37      4.13      3.69   <- AA needs 4.50
         --fg-4 was      2.56      2.42      2.29      2.04
         --fg-3 now      7.37      6.97      6.59      5.89
         --fg-4 now      5.80      5.49      5.19      4.64

     --fg-4 is what the provenance lines and the record sublines are drawn in
     ('Rankings as of ...', 'UFC 18-1 / Pro 29-1', the metric column labels, the
     search filter labels, the stamp under every stat and record hub) — the
     sentences the site's credibility rests on were the least readable type on
     it, at 2.3:1. Both steps clear 4.5:1 on every surface in the ink scale now,
     and the four-step hierarchy is kept: fg-2 7.69 > fg-3 5.89 > fg-4 4.64 on
     the lightest ground. fg-1 and fg-2, the brand reds and the ink scale are
     untouched — this is the muted end of the ramp only.
     Proof: scratchpad/qaB_contrast.py, re-run by the QA-B self-test. */
  --fg-3: #96a1ae;  /* muted, meta, captions   — AA on every ink surface */
  --fg-4: #828e9d;  /* faint, secondary labels — AA on every ink surface */
  --fg-on-red: #ffffff;

  /* --- Fight red (signature brand accent) --- */
  --red-400: #ff3b46;
  --red-500: #e6262f;  /* primary brand red */
  --red-600: #c4151d;  /* hover / pressed */
  --red-700: #960f15;
  --red-tint:  rgba(230,38,47,0.14); /* wash behind red elements */
  --red-glow:  rgba(230,38,47,0.40);

  /* --- Corner colors (matchup motif) --- */
  --corner-red:  #e63329;  /* red corner fighter */
  --corner-red-bg:  rgba(230,51,41,0.16);
  --corner-blue: #2e7df6;  /* blue corner fighter */
  --corner-blue-bg: rgba(46,125,246,0.16);

  /* --- Result / value semantics --- */
  --win:  #2fbf71;  /* correct pick, positive ROI, hit */
  --win-bg:  rgba(47,191,113,0.14);
  --loss: #ef4444;  /* incorrect pick, negative ROI, miss */
  --loss-bg: rgba(239,68,68,0.14);
  --gold: #f5b32b;  /* underdog value, championship, highlight */
  --gold-bg: rgba(245,179,43,0.14);

  /* --- Live / status --- */
  --live: #ff3b46;
  --upcoming: #2e7df6;
  --past: #717d8c;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --bg-app:        var(--ink-850);
  --bg-raised:     var(--ink-800);
  --surface-card:  var(--ink-700);
  --surface-hover: var(--ink-600);
  --surface-inset: var(--ink-600);
  --track:         var(--ink-500);

  --border:        var(--line);
  --border-strong: var(--line-strong);

  --text-strong:   var(--fg-1);
  --text-body:     var(--fg-2);
  --text-muted:    var(--fg-3);
  --text-faint:    var(--fg-4);

  --accent:        var(--red-500);
  --accent-hover:  var(--red-600);
  --accent-text:   var(--fg-on-red);

  --focus-ring:    var(--red-400);
}
/* ---- inlined from _design_system/tokens/typography.css ---- */
/* ============================================================
   FightIQ — Typography
   Display: Saira Condensed (tall athletic broadcast face — names, numbers, headlines)
   Body/UI: Hanken Grotesk (clean neutral grotesk)
   Mono:    JetBrains Mono (odds, percentages, tabular stats)
   Icons:   Material Symbols Rounded, subsetted to the nine glyphs we draw

   SELF-HOSTED (2026-09-03). This file used to @import the Google Fonts CSS API and
   gen_site.head() linked the Material Symbols stylesheet on top of it. Both sent
   every visitor's IP address to Google before a single pixel painted — the exact
   arrangement a German court found against a site operator over in 2022, and a
   processor we would otherwise have had to name in /privacy for no benefit at all.
   Self-hosting removes the transfer, so the privacy notice can say "no third party
   sees you here except the CDN that serves the bytes" and have that be TRUE.

   It is also the fix for the teardown's F2-22. The chain was:
       page HTML -> DS styles.css -> tokens/typography.css -> @import Google's
                                                     CSS API -> Google's font CDN
   four sequential round-trips to two other origins before any text could paint,
   plus a SECOND Google stylesheet in <head> for the icon font whose payload was
   a 370,888-byte UNSUBSETTED variable font carrying every Material Symbol Google
   ships, to draw nine of them. Subsetted with `&icon_names=`, that same font is
   2,892 bytes. Every face below is served from our own origin with font-display and
   a unicode-range, and gen_site.FONT_LINKS preloads the two that paint first.

   The files are STATIC ARTEFACTS in site/assets/fonts/, downloaded once. They are
   not fetched by the build; nothing in the estate talks to Google any more, which
   is checked by the fonts-are-local proof in package_dist.
   ============================================================ */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-400-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-400-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/saira-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/material-symbols-rounded-400-icons.woff2') format('woff2');
}

:root {
  /* --- Families --- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Weights --- */
  --w-regular: 400; /* @kind font */
  --w-medium: 500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold: 700; /* @kind font */
  --w-extrabold: 800; /* @kind font */
  --w-black: 900; /* @kind font */

  /* --- Type scale (px) --- */
  --t-micro: 11px;   /* eyebrow caps, table meta */
  --t-caption: 12px; /* captions, badges */
  --t-small: 13px;   /* dense UI, secondary */
  --t-body: 15px;    /* default body */
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-4xl: 48px;
  --t-5xl: 64px;
  --t-6xl: 88px;     /* hero stat / scoreboard number */

  /* --- Line heights --- */
  --lh-tight: 1.02; /* @kind font */
  --lh-snug: 1.15; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* --- Tracking --- */
  --track-tighter: -0.02em; /* @kind font */
  --track-tight: -0.01em; /* @kind font */
  --track-normal: 0; /* @kind font */
  --track-wide: 0.04em; /* @kind font */
  --track-caps: 0.10em; /* @kind font */
  --track-caps-lg: 0.16em; /* @kind font */

  /* --- Semantic roles --- */
  --text-eyebrow-size: var(--t-micro); /* @kind font */
  --text-eyebrow-weight: var(--w-bold); /* @kind font */
}

/* ---- Reusable role classes (optional helpers for cards/kits) ---- */
.fiq-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.fiq-display {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--text-strong);
}
.fiq-num {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.fiq-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.fiq-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
}
/* ---- inlined from _design_system/tokens/spacing.css ---- */
/* ============================================================
   FightIQ — Spacing, radii, sizing, layout
   4px base grid. Broadcast UI runs dense with sharp-ish corners.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --sp-0: 0; /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 112px;

  /* --- Radii — sharp, athletic (not pill-soft) --- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;    /* default card / button */
  --r-lg: 12px;   /* large card / modal */
  --r-xl: 16px;
  --r-pill: 999px; /* badges, chips, avatars */

  /* --- Border widths --- */
  --bw-hair: 1px; /* @kind spacing */
  --bw: 1.5px; /* @kind spacing */
  --bw-accent: 3px; /* @kind spacing */

  /* --- Container widths --- */
  --container-sm: 640px; /* @kind spacing */
  --container-md: 880px; /* @kind spacing */
  --container-lg: 1120px; /* @kind spacing */
  --container-xl: 1280px; /* @kind spacing */

  /* --- Control sizing --- */
  --control-sm: 32px; /* @kind spacing */
  --control-md: 40px; /* @kind spacing */
  --control-lg: 48px; /* @kind spacing */

  /* --- Z-index --- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-nav: 200; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
}
/* ---- inlined from _design_system/tokens/effects.css ---- */
/* ============================================================
   FightIQ — Effects: elevation, glows, gradients, motion
   On a dark canvas, depth comes from surface lift + hairline borders,
   not big soft shadows. Red glow is reserved for primary actions & live.
   ============================================================ */

:root {
  /* --- Elevation (dark UI: subtle, border-led) --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.65);

  /* --- Glows (accent emphasis) --- */
  --glow-red: 0 0 0 1px rgba(230,38,47,0.50), 0 6px 22px rgba(230,38,47,0.32);
  --glow-red-soft: 0 6px 22px rgba(230,38,47,0.22);
  --glow-blue: 0 0 0 1px rgba(46,125,246,0.45), 0 6px 22px rgba(46,125,246,0.28);
  --glow-win: 0 0 18px rgba(47,191,113,0.30);

  /* --- Inset / inner --- */
  --inset-top: inset 0 1px 0 rgba(255,255,255,0.05);
  --inset-press: inset 0 2px 6px rgba(0,0,0,0.50);

  /* --- Focus ring --- */
  --ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--focus-ring);

  /* --- Signature gradients --- */
  /* Tale-of-the-tape: red corner fading into blue corner */
  --grad-corners: linear-gradient(90deg, rgba(230,51,41,0.18) 0%, transparent 42%, transparent 58%, rgba(46,125,246,0.18) 100%); /* @kind color */
  /* Hero canvas vignette */
  --grad-hero: radial-gradient(120% 90% at 50% -10%, rgba(230,38,47,0.16) 0%, transparent 55%), linear-gradient(180deg, var(--ink-800) 0%, var(--ink-850) 100%);
  /* Top-edge bleed on bars */
  --grad-topfade: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%); /* @kind color */
  /* Image protection scrim (over fighter photos) */
  --scrim-bottom: linear-gradient(180deg, transparent 30%, rgba(5,7,10,0.85) 100%); /* @kind color */

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* --- Backdrop blur --- */
  --blur-nav: saturate(140%) blur(14px); /* @kind other */
  --blur-modal: blur(6px); /* @kind other */
}

/* Animated live dot used across the brand */
@keyframes fiq-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
/* ---- inlined from _design_system/tokens/base.css ---- */
/* ============================================================
   FightIQ — Base resets & primitives
   Minimal, opt-in. Sets the dark canvas + default type.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--red-tint); color: var(--fg-1); }

a { color: inherit; text-decoration: none; }

/* Headings default to the condensed display face */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  margin: 0;
}

/* Tabular numerals everywhere figures matter */
.tnum { font-variant-numeric: tabular-nums; }

/* Custom scrollbar to match the dark canvas */
* {
  scrollbar-color: var(--ink-500) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-500);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* Material Symbols base (icon font the brand uses) */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}