/* =============================================================================
   Darkhorse Fantasy Sports — Type system, PHASE 1: faces only
   Install at: static/css/typography.css
   Include FIRST, before any other stylesheet, in base.html.

   SAFETY CONTRACT
   This file changes WHICH font renders. It does not change size, spacing,
   weight, casing, or position. Every declaration below is font-family,
   a numeral setting, or a rendering hint. There is deliberately no
   font-size, margin, padding, width, display, position, or text-transform
   in this file, so dropping it in cannot move a button or reflow a layout.

   Two things shift by a hair and are worth knowing about:
     - Plex Sans has different letter widths than whatever renders now, so
       a line of text may end a few pixels short or long of where it did.
       Nothing repositions; text just measures slightly differently.
     - tabular-nums makes every digit the same width, which is what stops
       ranking columns from wobbling. Column widths may settle by a pixel
       or two the first time.

   Font size and rhythm live in type-scale.css, which is opt-in. Read the
   SKILL.md before adding it — that file DOES reflow.
   ========================================================================== */

/* 1. Faces ---------------------------------------------------------------- */

/* Display — Archivo Expanded (variable: wght 100-900, wdth 62-125) */
@font-face {
  font-family: "Archivo Expanded";
  src: url("../fonts/Archivo-Expanded-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}

/* Body / UI — IBM Plex Sans (variable: wght 100-700) */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Variable.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Data — IBM Plex Mono */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Inter (tables, data-dense UI) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fraunces (warm serif — card descriptions, rankings rows) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Accent serif — Lora (used for card labels/titles) */
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Space Grotesk (table headers) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Plus Jakarta Sans (CTA button) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Montserrat (CTA button) */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Raleway (CTA button) */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Satoshi (sign-in row) */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Rubik (body, UI) */
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Nunito (headline) */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Graduate (headline) */
@font-face {
  font-family: "Graduate";
  src: url("../fonts/Graduate-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Staatliches (headline) */
@font-face {
  font-family: "Staatliches";
  src: url("../fonts/Staatliches-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Chakra Petch (headline) */
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/ChakraPetch-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bungee (headline) */
@font-face {
  font-family: "Bungee";
  src: url("../fonts/Bungee-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Russo One (headline) */
@font-face {
  font-family: "Russo One";
  src: url("../fonts/RussoOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lilita One (headline) */
@font-face {
  font-family: "Lilita One";
  src: url("../fonts/LilitaOne-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Righteous (headline) */
@font-face {
  font-family: "Righteous";
  src: url("../fonts/Righteous-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Anton (headline) */
@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Passion One (headline) */
@font-face {
  font-family: "Passion One";
  src: url("../fonts/PassionOne-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Passion One";
  src: url("../fonts/PassionOne-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Rubik Distressed (headline) */
@font-face {
  font-family: "Rubik Distressed";
  src: url("../fonts/RubikDistressed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Rubik Dirt (headline) */
@font-face {
  font-family: "Rubik Dirt";
  src: url("../fonts/RubikDirt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Rubik Maps (nav) */
@font-face {
  font-family: "Rubik Maps";
  src: url("../fonts/RubikMaps-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Manrope (nav) */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fira Sans (nav) */
@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Barlow Semi Condensed (nav) */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback. Sits in front of the generic keywords so the
   swap period renders in a sans with roughly Plex's proportions instead of
   jumping. Tune the overrides against a real screenshot if text shifts. */
@font-face {
  font-family: "Darkhorse Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Segoe UI");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* 2. Tokens --------------------------------------------------------------- */

:root {
  /* Stacks — every one ends in sans-serif. Never `serif`. Never `Times`. */
  --font-display: "Archivo Expanded", "Archivo", "Darkhorse Fallback",
                  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Darkhorse Fallback",
                  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Mono",
                  Menlo, Consolas, monospace;
  --font-ui:      -apple-system, "SF Pro Display", "SF Pro Text", "Segoe UI",
                  system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-header:  "Space Grotesk", -apple-system, "SF Pro Display", "Segoe UI",
                  system-ui, sans-serif;

  /* Display width. 100% is the safe default: headlines occupy the same
     horizontal space they do today. Raise toward 118% for the broadcast
     look once you have confirmed no headline overflows its container. */
  --wd-display: 100%;

  /* Scale tokens live here so type-scale.css and one-off components can
     share them. Defining them applies nothing on its own. */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  clamp(1.125rem, 0.15vw + 1.09rem, 1.25rem);
  --step-2:  clamp(1.375rem, 0.45vw + 1.26rem, 1.625rem);
  --step-3:  clamp(1.7rem,  0.9vw + 1.48rem,  2.05rem);
  --step-4:  clamp(2.1rem,  1.7vw + 1.68rem,  2.6rem);
  --step-5:  clamp(2.6rem,  2.8vw + 1.9rem,   3.4rem);
  --step-6:  clamp(3.1rem,  5.4vw + 1.75rem,  5rem);

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  --lh-hero:  0.95;
  --lh-tight: 1.08;
  --lh-head:  1.2;
  --lh-ui:    1.35;
  --lh-body:  1.6;

  --tr-hero:    -0.03em;
  --tr-display: -0.02em;
  --tr-eyebrow: 0.14em;
  --tr-caps:    0.08em;

  --measure: 68ch;
}

/* 3. Applying the faces --------------------------------------------------- */

html {
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums;
}

/* Form controls do NOT inherit font-family. This block is the difference
   between a finished site and Times New Roman in your search box.
   font-size: inherit is intentionally omitted — it would resize your
   inputs. Leave their existing sizes alone. */
input,
select,
textarea,
button,
optgroup,
::placeholder,
::file-selector-button {
  font-family: var(--font-body);
}

code, pre, kbd, samp {
  font-family: var(--font-data);
}

/* Inline SVG text does not reliably inherit. */
svg text,
svg tspan {
  font-family: var(--font-body);
}

/* Headings take the display face at their existing sizes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-stretch: var(--wd-display);
}

/* 4. Numerals ------------------------------------------------------------- */
/* Rankings, draft board, comps. Tabular figures are the one change here
   that touches measurement, and it is the fix for wobbling columns:
   every digit becomes the same width, so 1s stop being narrower than 8s. */

table {
  font-variant-numeric: tabular-nums lining-nums;
}

.num,
.stat-value,
.tier, .pick-clock, .adp-delta, .draft-slot {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Data face for the machine-truth values. Opt in by adding the class;
   nothing is restyled until you do. */
.tier, .pick-clock, .adp-delta, .draft-slot {
  font-family: var(--font-data);
}

/* 5. Print ---------------------------------------------------------------- */
/* Print is a classic serif-default leak. Restate the family, nothing else. */

@media print {
  html, body, table, th, td, input, select, textarea, button {
    font-family: var(--font-body);
  }
  h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
}