/* base.css — reset, design tokens, and typography for ROSTER.
   No layout here; select.css and profile.css own their pages. */

/* ---- Reset ---- */

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

img,
video,
canvas {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ---- Tokens ---- */

:root {
  /* Palette — the shell stays disciplined; accents come from JSON per fighter */
  --ink: #101014;          /* near-black charcoal base */
  --paper: #f2efe8;        /* warm off-white type */
  --hairline: #3a3a42;     /* steel gray UI hairlines */
  --ink-raised: #16161c;   /* panels sitting just above the base */
  --ink-sunken: #0b0b0e;   /* locked slots, recessed wells */

  /* Per-fighter accent, overridden inline from characters.json */
  --accent: #6b6b76;

  /* Type stacks */
  --font-display: "Anybody", "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-utility: "IBM Plex Mono", "Menlo", monospace;

  /* Type scale */
  --text-name: clamp(2.6rem, 6vw, 5.2rem);
  --text-header: clamp(1.1rem, 2.2vw, 1.8rem);
  --text-body: clamp(0.95rem, 1.4vw, 1.125rem);
  --text-utility: clamp(0.65rem, 1vw, 0.78rem);

  --tracking-utility: 0.18em;
}

/* ---- Base typography ---- */

html {
  background: var(--ink);
  color: var(--paper);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 75%; /* Anybody is variable-width; condense it */
  text-transform: uppercase;
  line-height: 0.95;
}

.utility {
  font-family: var(--font-utility);
  font-size: var(--text-utility);
  text-transform: uppercase;
  letter-spacing: var(--tracking-utility);
}

/* ---- Focus visibility (keyboard is first-class) ---- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Footer small print ----
   Ownership and studio credit, on every page that has a footer. Sits below
   the in-world "File ends" line and stays quieter than it, so the legal
   text never competes with the page's own voice. */
/* The footers are flex rows without wrapping, so a full-width third child
   squeezes "File ends" and the return link instead of dropping below them.
   :has() lets one rule fix every page's footer without touching seven files. */
footer .wrap:has(.site-legal) { flex-wrap: wrap; }

.site-legal {
  margin-top: 1.1rem;
  flex-basis: 100%;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-transform: none;
  color: color-mix(in srgb, var(--paper) 24%, var(--ink));
}

.site-legal a {
  color: color-mix(in srgb, var(--paper) 42%, var(--ink));
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, var(--ink));
  transition: color 0.15s ease, border-color 0.15s ease;
}

.site-legal a:hover,
.site-legal a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}