/* =====================================================================
   Sportistry — Core Design Tokens
   colors_and_type.css
   ---------------------------------------------------------------------
   This file is the single source of truth for color, typography,
   spacing, radii, shadows and motion tokens used across every
   Sportistry surface (mobile app, web app, marketing, decks).
   ===================================================================== */

/* ---------- Font faces (Google Fonts substitutions — see README) ----- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =====================================================
     COLOR — Primary (Sport Blue)
     A confident, electric blue. Familiar (Meta-adjacent)
     but a hair deeper + more saturated for distinctiveness.
     ===================================================== */
  --sb-blue-50:  #EEF3FF;
  --sb-blue-100: #DCE6FF;
  --sb-blue-200: #B6C8FF;
  --sb-blue-300: #88A4FF;
  --sb-blue-400: #5479FF;
  --sb-blue-500: #1652F0;   /* PRIMARY */
  --sb-blue-600: #0E40CC;
  --sb-blue-700: #0A33A6;
  --sb-blue-800: #082880;
  --sb-blue-900: #051A55;
  --sb-blue-950: #030F33;

  /* =====================================================
     COLOR — Accent (Pitch Lime)
     A high-energy accent reserved for "go" moments:
     primary CTAs on dark, live-status pulses, scoring,
     win states. Used sparingly.
     ===================================================== */
  --sb-lime-50:  #F7FFE0;
  --sb-lime-100: #ECFFB8;
  --sb-lime-200: #DAFE7A;
  --sb-lime-300: #C6F73C;   /* ACCENT */
  --sb-lime-400: #A8DD1F;
  --sb-lime-500: #84B30C;
  --sb-lime-600: #5C7E04;

  /* =====================================================
     COLOR — Neutrals (Cool gray w/ slight blue undertone)
     ===================================================== */
  --sb-ink-50:  #F6F8FB;
  --sb-ink-100: #ECEFF5;
  --sb-ink-200: #DDE2EC;
  --sb-ink-300: #C2CAD8;
  --sb-ink-400: #95A0B5;
  --sb-ink-500: #6B7691;
  --sb-ink-600: #4B556E;
  --sb-ink-700: #333C52;
  --sb-ink-800: #1F2638;
  --sb-ink-900: #121726;
  --sb-ink-950: #0A0E1C;

  /* =====================================================
     COLOR — Semantic
     ===================================================== */
  --sb-success: #10B26B;
  --sb-success-bg: #E2F7EC;
  --sb-warning: #F59E0B;
  --sb-warning-bg: #FEF3DC;
  --sb-danger:  #E5354B;
  --sb-danger-bg: #FDE3E6;
  --sb-info:    var(--sb-blue-500);
  --sb-info-bg: var(--sb-blue-50);

  /* =====================================================
     COLOR — Sport category tints
     Light-tinted backgrounds for sport tags / category cards.
     ===================================================== */
  --sport-soccer:    #2EB85C;
  --sport-basket:    #E27A2B;
  --sport-tennis:    #C6F73C;
  --sport-running:   #6A3FF0;
  --sport-cycling:   #0DB1C9;
  --sport-volley:    #F0498D;
  --sport-climbing:  #8B5E2C;
  --sport-padel:     #00C2A8;

  /* =====================================================
     SEMANTIC — Surface / foreground (light mode default)
     ===================================================== */
  --bg:         #FFFFFF;
  --bg-soft:    var(--sb-ink-50);
  --bg-muted:   var(--sb-ink-100);
  --bg-inverse: var(--sb-ink-900);

  --surface:           #FFFFFF;
  --surface-raised:    #FFFFFF;
  --surface-overlay:   rgba(10, 14, 28, 0.55);

  --fg:         var(--sb-ink-900);
  --fg-muted:   var(--sb-ink-600);
  --fg-subtle:  var(--sb-ink-500);
  --fg-faint:   var(--sb-ink-400);
  --fg-inverse: #FFFFFF;
  --fg-onPrimary: #FFFFFF;
  --fg-onAccent:  var(--sb-ink-900);

  --border:        var(--sb-ink-200);
  --border-strong: var(--sb-ink-300);
  --border-focus:  var(--sb-blue-500);

  /* Brand semantic shorthand */
  --primary:        var(--sb-blue-500);
  --primary-hover:  var(--sb-blue-600);
  --primary-press:  var(--sb-blue-700);
  --primary-soft:   var(--sb-blue-50);
  --accent:         var(--sb-lime-300);
  --accent-hover:   var(--sb-lime-400);

  /* =====================================================
     TYPOGRAPHY — Families
     Display: Archivo (sporty, geometric, condensed weights)
     Body:    Manrope (modern, friendly humanist sans)
     Mono:    JetBrains Mono (codes, IDs, scoreboards)
     ===================================================== */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type ramp (base 16px) */
  --text-xs:    12px;   --lh-xs:   16px;
  --text-sm:    14px;   --lh-sm:   20px;
  --text-base:  16px;   --lh-base: 24px;
  --text-md:    18px;   --lh-md:   26px;
  --text-lg:    20px;   --lh-lg:   28px;
  --text-xl:    24px;   --lh-xl:   32px;
  --text-2xl:   30px;   --lh-2xl:  38px;
  --text-3xl:   36px;   --lh-3xl:  44px;
  --text-4xl:   48px;   --lh-4xl:  56px;
  --text-5xl:   64px;   --lh-5xl:  68px;
  --text-6xl:   88px;   --lh-6xl:  92px;

  /* Weights */
  --fw-regular:  400;   /* @kind font */
  --fw-medium:   500;   /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold:     700;   /* @kind font */
  --fw-black:    800;   /* @kind font */

  /* Tracking */
  --tracking-tight:  -0.02em;  /* @kind font */
  --tracking-snug:   -0.01em;  /* @kind font */
  --tracking-normal:  0em;     /* @kind font */
  --tracking-wide:    0.02em;  /* @kind font */
  --tracking-caps:    0.08em;  /* @kind font */

  /* =====================================================
     SPACING — 4pt grid
     ===================================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;

  /* =====================================================
     RADII — Soft, modern; pills on chips/buttons
     ===================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default cards */
  --radius-lg:   16px;   /* hero cards / sheets */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* =====================================================
     SHADOWS — Subtle, layered, slight cool tint
     ===================================================== */
  --shadow-xs:  0 1px 2px rgba(18, 23, 38, 0.06);
  --shadow-sm:  0 2px 4px rgba(18, 23, 38, 0.06), 0 1px 2px rgba(18, 23, 38, 0.04);
  --shadow-md:  0 6px 14px rgba(18, 23, 38, 0.08), 0 2px 4px rgba(18, 23, 38, 0.04);
  --shadow-lg:  0 18px 32px rgba(18, 23, 38, 0.10), 0 4px 8px rgba(18, 23, 38, 0.04);
  --shadow-xl:  0 28px 60px rgba(18, 23, 38, 0.16);
  --shadow-focus: 0 0 0 3px rgba(22, 82, 240, 0.28);
  --shadow-focus-danger: 0 0 0 3px rgba(229, 53, 75, 0.28);

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in:     cubic-bezier(0.55, 0, 0.55, 0.2);  /* @kind other */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    200ms;  /* @kind other */
  --dur-slow:    320ms;  /* @kind other */

  /* =====================================================
     LAYOUT
     ===================================================== */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --z-base:      0;     /* @kind other */
  --z-raised:    1;     /* @kind other */
  --z-sticky:    10;    /* @kind other */
  --z-overlay:   100;   /* @kind other */
  --z-modal:     200;   /* @kind other */
  --z-toast:     300;   /* @kind other */
}

/* =====================================================================
   SEMANTIC HTML-level defaults
   ===================================================================== */
html, body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--lh-base);
  color:       var(--fg);
  background:  var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* Display / Headings — Archivo, tight tracking, black weights */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size:   var(--text-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size:   var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size:   var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size:   var(--text-lg);
  line-height: var(--lh-lg);
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size:   var(--text-md);
  line-height: var(--lh-md);
}
h6, .eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size:   var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p, .body {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg);
}
.body-lg {
  font-size:   var(--text-md);
  line-height: var(--lh-md);
}
.body-sm {
  font-size:   var(--text-sm);
  line-height: var(--lh-sm);
}
.caption {
  font-size:   var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size:   0.92em;
}

/* Display class for big stat / score numbers */
.score {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}