/* =========================================================
   REPS 2 RISE — COLORS & TYPE
   Drop this file at the root of any prototype and reference
   tokens via var(--token). All values are intentional —
   pick from the system, don't introduce new colors.
   ========================================================= */

/* ---------- TYPEFACES ----------
   Display + body fonts. The Reps 2 Rise wordmark is a
   custom chunky italic; we approximate it with Saira
   Condensed Black Italic + Bebas Neue for stat blocks.
   Inter handles body and UI.
   --------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Saira+Condensed:wght@600;700;800;900&family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ============ TYPE FAMILIES ============ */
  --font-headline: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* PRIMARY headline face: bold, upright, Title Case — see hero-reference */
  --font-display:  "Saira Condensed", "Arial Narrow", system-ui, sans-serif;       /* HYPE face: condensed italic uppercase — wordmark echo, used for moments */
  --font-stat:     "Bebas Neue", "Arial Narrow", sans-serif;                       /* numerical readouts: reps, levels, scores */
  --font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;      /* UI & body copy */
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ BRAND COLORS ============ */
  /* Official brand palette */
  --r2r-red:        #E4092E;   /* brand red */
  --r2r-graphite:   #333333;   /* primary dark / text */
  --r2r-charcoal:   #5A5E66;   /* secondary / muted text */
  --r2r-slate:      #5A5E66;   /* legacy alias for charcoal — do not introduce new uses */
  --r2r-amber:      #FFC100;   /* amber gold — XP, achievements, highlights */

  /* Derived red variants (tonally matched to brand red) */
  --r2r-red-deep:   #B7071F;   /* hover/pressed on red surfaces */
  --r2r-red-bright: #FF1F44;   /* hot accent, glow, focus */
  --r2r-red-soft:   #FCE4E8;   /* red-tinted backgrounds */

  /* Graphite scale (light → dark neutrals built around #333) */
  --r2r-ink:        #1A1B1E;   /* deepest surface (full-bleed dark sections) */
  --r2r-steel:      #4A4D52;   /* secondary dark surface */
  --r2r-fog:        #9CA0A8;   /* placeholder, disabled text */
  --r2r-line:       #E4E5E8;   /* dividers, hairline borders */
  --r2r-mist:       #F3F4F6;   /* hover background on light */
  --r2r-paper:      #FAFAFA;   /* page background */
  --r2r-white:      #FFFFFF;

  /* Flame & energy accents (from the flame inside the phoenix) */
  --r2r-flame:      #FF6A1A;   /* streaks, "on fire" indicators */
  --r2r-ember:      #FFA63D;   /* secondary warm accent */

  /* Gamification semantic */
  --r2r-xp-gold:    var(--r2r-amber); /* alias — XP uses brand amber */
  --r2r-level-up:   #1FB85C;   /* level-up, success, "good rep" */
  --r2r-court:      #1B6FE0;   /* informational / coach feedback */
  --r2r-miss:       #C8324A;   /* "missed rep", error */

  /* Court / sport surfaces — used sparingly for context */
  --r2r-court-tan:  #C98A5B;   /* indoor court wood */
  --r2r-net-white:  #F7F7F4;   /* net / court lines */

  /* ============ FOREGROUND / BACKGROUND SEMANTIC ============ */
  --fg1: var(--r2r-graphite);  /* primary text — brand graphite, not pure black */
  --fg2: var(--r2r-charcoal);  /* secondary text */
  --fg3: var(--r2r-fog);       /* tertiary / placeholder */
  --fg-inverse: var(--r2r-white);

  --bg1: var(--r2r-white);     /* primary surface */
  --bg2: var(--r2r-paper);     /* page background */
  --bg3: var(--r2r-mist);      /* hover / muted surface */
  --bg-inverse: var(--r2r-graphite); /* full-bleed dark sections use graphite, not ink */

  --accent:        var(--r2r-red);
  --accent-hover:  var(--r2r-red-deep);
  --accent-fg:     var(--r2r-white);

  /* ============ BORDERS, RADII, SHADOWS ============ */
  --border:     1px solid var(--r2r-line);
  --border-dark:1px solid var(--r2r-steel);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(17,18,20,.06), 0 1px 1px rgba(17,18,20,.04);
  --shadow-2: 0 4px 14px rgba(17,18,20,.08), 0 1px 2px rgba(17,18,20,.05);
  --shadow-3: 0 12px 32px rgba(17,18,20,.14), 0 2px 6px rgba(17,18,20,.06);
  --shadow-red: 0 8px 24px rgba(224,16,48,.32);
  --shadow-inset: inset 0 -2px 0 rgba(0,0,0,.08);

  /* ============ SPACING (4px scale) ============ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);  /* punchy: rep-completed */
  --dur-fast:   120ms;
  --dur:        220ms;
  --dur-slow:   380ms;
}

/* ============ SEMANTIC TYPE STYLES ============ */
/*
  Two display modes:
  - .r2r-hero / .r2r-h1 / .r2r-h2  → BOLD UPRIGHT TITLE CASE
      The PRIMARY headline style (see hero-reference.png). Used
      everywhere a clean, confident statement is needed.
  - .r2r-hype                       → UPPERCASE ITALIC
      The energy style — used for moments, banners, stat call-outs,
      celebration sheets, and direct echoes of the wordmark.
      Sparingly. Reads as "hype" not "voice".
*/

.r2r-hero,
h1.r2r {
  font-family: var(--font-headline);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;     /* Title Case — keep manual capitalization */
  color: var(--fg1);
}

.r2r-h1, h1 {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--fg1);
}

.r2r-h2, h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--fg1);
}

.r2r-hype {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg1);
}

.r2r-h3, h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--fg1);
}

.r2r-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r2r-red);
}

.r2r-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg1);
}

.r2r-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg2);
}

.r2r-meta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg2);
}

.r2r-stat {
  font-family: var(--font-stat);
  font-weight: 400;       /* Bebas only ships one weight */
  font-size: clamp(56px, 8vw, 120px);
  line-height: .85;
  letter-spacing: .01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

.r2r-stat-sm {
  font-family: var(--font-stat);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.r2r-code, code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--r2r-mist);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg1);
}