/* ───────────────── Front of Heroes · Base ─────────────────
   Fonts, reset, the page backdrop and the default look of plain elements. Uses tokens only. */

/* Self-hosted fonts (assets/fonts, SIL Open Font License). Latin + Latin Extended. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/inter-latin-wght-normal.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: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/inter-latin-ext-wght-normal.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: "Inter"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/inter-latin-wght-italic.woff2") format("woff2-variations"), url("../assets/fonts/inter-latin-wght-italic.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("../assets/fonts/barlow-condensed-latin-500-normal.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("../assets/fonts/barlow-condensed-latin-600-normal.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 700;
  src: url("../assets/fonts/barlow-condensed-latin-700-normal.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("../assets/fonts/barlow-condensed-latin-ext-500-normal.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("../assets/fonts/barlow-condensed-latin-ext-600-normal.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: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 700;
  src: url("../assets/fonts/barlow-condensed-latin-ext-700-normal.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; }

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    color: var(--text); background-color: var(--bg);
    font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-body); font-weight: var(--fw-regular);
    font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a off, open digits */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  }
  button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; border: 0; background: none; padding: 0; }
  button:disabled { cursor: not-allowed; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
  img, svg, video, canvas { display: block; }
  svg.icon { display: inline-block; flex: none; vertical-align: -0.2em; }
  small { font-size: var(--fs-sm); color: var(--text-2); }
  b, strong { font-weight: var(--fw-semibold); }
  hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-4) 0; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--brand-text); }
  ::selection { background: var(--brand-soft); color: var(--text); }
  table { border-collapse: collapse; border-spacing: 0; }

  /* Headings: Barlow Condensed for structure, Inter for card titles. */
  h1 { font: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
  h2 { font: var(--fw-semibold) var(--fs-h2) / var(--lh-snug) var(--font-display); letter-spacing: var(--ls-display); }
  h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-ui); letter-spacing: -.005em; }
  h4 { font: var(--fw-semibold) var(--fs-md) / var(--lh-snug) var(--font-ui); }

  /* Keyboard focus: one visible ring everywhere. Mouse clicks do not show it. */
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }

  /* Thin scrollbars that take the theme. */
  * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-track { background: transparent; }

  body { background-image: radial-gradient(1200px 800px at 50% -10%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 70%); background-attachment: fixed; }
  [data-theme="light"] body { background-image: none; }

  /* Reduced motion: no shimmer, instant transitions. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* ── Text styles: use these classes instead of ad-hoc font sizes. ── */
@layer components {
  .t-display { font: var(--fw-bold) var(--fs-display) / 1 var(--font-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
  .t-h1 { font: var(--fw-bold) var(--fs-h1) / var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
  .t-h2 { font: var(--fw-semibold) var(--fs-h2) / var(--lh-snug) var(--font-display); letter-spacing: var(--ls-display); }
  .t-h3 { font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-ui); }
  .t-lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-2); }
  .t-body { font-size: var(--fs-md); line-height: var(--lh-body); }
  .t-read { font-size: var(--fs-lg); line-height: var(--lh-read); }
  .t-small { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
  .t-caption { font-size: var(--fs-xs); line-height: 1.4; color: var(--text-3); }
  .t-overline, .eyebrow { display: block; font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
  .t-stat { font: var(--fw-semibold) var(--fs-stat) / 1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
  .t-num, .num { font-variant-numeric: tabular-nums; }
  .muted { color: var(--text-2); }
  .t-faint { color: var(--text-3); }
  .t-ok { color: var(--green-text); } .t-bad { color: var(--red-text); } .t-warn { color: var(--amber-text); }
  .t-gold { color: var(--gold-text); } .t-energy { color: var(--lime-text); }
  .t-right { text-align: right; }
  .t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}