/* ============================================================
   Sparra Design System — Foundations
   Color, type, spacing, radii, shadows, motion.

   FONT NOTE: We do not have access to a brand-specified type
   stack. The choices below are SUBSTITUTIONS via Google Fonts
   that match the "fight card / combat sports" energy of the
   logo. Flagged for confirmation:
     - Display: Anton  (heavy condensed)
     - Body:    Manrope (modern grotesk)
     - Mono:    JetBrains Mono (tabular timers)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* -------- Core neutrals (paper + ink) -------- */
  --ink-900: #0B0B0C;   /* near-black; primary text on light, primary surface on dark */
  --ink-800: #17181A;   /* card surface on dark */
  --ink-700: #232427;   /* secondary surface on dark / heavy borders */
  --ink-600: #3A3C40;   /* tertiary surface / dividers on dark */
  --ink-500: #5C5F66;   /* muted body on dark */
  --ink-400: #8A8E96;   /* placeholder / disabled */
  --ink-300: #B7BAC0;   /* subtle text on light */
  --ink-200: #DCDEE2;   /* hairline divider on light */
  --ink-100: #ECEDF0;   /* subtle fill on light */
  --paper-50: #F6F3EC;  /* warm off-white — primary light surface */
  --paper-0:  #FFFFFF;  /* hard white — cards on warm paper */

  /* -------- Brand accents -------- */
  --blood-600: #B91C1C;  /* press / deeper */
  --blood-500: #DC2626;  /* primary accent — LIVE, record, sparring */
  --blood-400: #EF4444;  /* hover / lighter */
  --blood-100: #FEE2E2;  /* tinted background */

  --gold-500:  #D4A24C;  /* belt / achievement — used sparingly */
  --gold-100:  #F5E9CF;

  --steel-500: #4F6B82;  /* informational, links in long-form */
  --steel-100: #DCE5EE;

  /* -------- Semantic state (mapped, not invented) -------- */
  --state-success: #2F7D4F;
  --state-warning: #B5811A;
  --state-danger:  var(--blood-500);
  --state-info:    var(--steel-500);
  --state-live:    var(--blood-500);

  /* -------- Belt colors (martial-arts specific scale) -------- */
  --belt-white:  #F1ECDF;
  --belt-blue:   #1E63B8;
  --belt-purple: #5B2D8C;
  --belt-brown:  #6B3F1E;
  --belt-black:  #0B0B0C;
  --belt-red:    #B91C1C;

  /* -------- Semantic surface tokens (light mode default) -------- */
  --bg-app:        var(--paper-50);
  --bg-surface:    var(--paper-0);
  --bg-elevated:   var(--paper-0);
  --bg-inverse:    var(--ink-900);
  --bg-sunken:     #EEEAE1;

  --fg-primary:    var(--ink-900);
  --fg-secondary:  #3A3C40;
  --fg-muted:      var(--ink-500);
  --fg-on-dark:    var(--paper-50);
  --fg-on-accent:  var(--paper-50);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-heavy:  var(--ink-900);

  /* -------- Type families -------- */
  --font-display:  'Anton', 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --font-body:     'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* -------- Type scale (mobile-app first; px values) -------- */
  --fs-display-2xl: 64px;  /* hero numbers (round timer) */
  --fs-display-xl:  44px;  /* screen titles in stadium-poster mode */
  --fs-display-lg:  32px;
  --fs-display-md:  24px;
  --fs-display-sm:  20px;

  --fs-body-lg:     17px;  /* primary read */
  --fs-body-md:     15px;  /* default body */
  --fs-body-sm:     13px;  /* secondary, list meta */
  --fs-body-xs:     11px;  /* eyebrow / overline */

  --fs-mono-lg:     32px;  /* live cronometer */
  --fs-mono-md:     14px;  /* stats / tabular */

  /* line-heights */
  --lh-tight:  1.05;   /* @kind font */   /* display */
  --lh-snug:   1.2;    /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-loose:  1.6;    /* @kind font */   /* long-form body */

  /* letter-spacing */
  --ls-stencil:  0.04em;  /* @kind font */  /* eyebrows / labels — Anton/all-caps */
  --ls-snug:     -0.01em; /* @kind font */  /* body display */
  --ls-tight:    -0.02em; /* @kind font */  /* big numbers */

  /* font weights (Manrope) */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:    700;   /* @kind font */
  --fw-heavy:   800;   /* @kind font */

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

  /* -------- Radii -------- */
  --radius-xs: 4px;     /* chips / pills tight */
  --radius-sm: 8px;     /* buttons, fields */
  --radius-md: 14px;    /* cards */
  --radius-lg: 20px;    /* sheets, modals */
  --radius-xl: 28px;    /* hero blocks */
  --radius-pill: 999px;

  /* -------- Borders -------- */
  --bw-hair: 1px;
  --bw-rule: 1.5px;
  --bw-bold: 2px;
  --bw-heavy: 3px;     /* fight-card frame */

  /* -------- Shadows (low-key, mostly flat — fight cards are FLAT) -------- */
  --shadow-card:    0 1px 0 rgba(11,11,12,0.04), 0 4px 14px rgba(11,11,12,0.06);
  --shadow-pop:     0 2px 0 rgba(11,11,12,0.06), 0 12px 28px rgba(11,11,12,0.12);
  --shadow-sheet:   0 -2px 24px rgba(11,11,12,0.18);
  --shadow-inset:   inset 0 0 0 1px var(--border-subtle);
  --shadow-inset-strong: inset 0 0 0 2px var(--ink-900);
  --shadow-press:   inset 0 2px 0 rgba(11,11,12,0.18);

  /* -------- Motion -------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */   /* default UI */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);       /* @kind other */
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */  /* button release */
  --dur-snap:    120ms;  /* @kind other */
  --dur-fast:    180ms;  /* @kind other */
  --dur-base:    240ms;  /* @kind other */
  --dur-slow:    420ms;  /* @kind other */

  /* -------- Z-index -------- */
  --z-base:       1;     /* @kind other */
  --z-sticky:     50;    /* @kind other */
  --z-overlay:    400;   /* @kind other */
  --z-sheet:      500;   /* @kind other */
  --z-toast:      900;   /* @kind other */
}

/* ============================================================
   Semantic typography classes — apply these to elements,
   not raw font tokens.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--ls-stencil);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-stencil);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-stencil);
  text-transform: uppercase;
}

.t-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-stencil);
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-body);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-primary);
}

.t-h2 {
  font-family: var(--font-body);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-primary);
}

.t-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  letter-spacing: 0.01em;
}

.t-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

.t-stat-sm {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--fg-primary);
}

/* ============================================================
   Base reset for hosts that include this file directly
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}