/* ============================================================
   Sportimizer Design System — colors_and_type.css  v2
   Indigo / minimalist palette. Cool grays, single brand accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     BRAND — Indigo primary
     ============================================================ */
  --brand:            #4F46E5;
  --brand-deep:       #4338CA;
  --brand-strong:     #3730A3;
  --brand-soft:       #EEF2FF;
  --brand-softer:     #F5F7FF;
  --brand-line:       #C7D2FE;

  --logo-red:         #E03127;
  --logo-yellow:      #F4C81E;

  /* ============================================================
     NEUTRALS
     ============================================================ */
  --bg:               #FFFFFF;
  --bg-soft:          #F8FAFC;
  --bg-tint:          #F1F5F9;
  --surface:          #FFFFFF;
  --surface-elev:     #FFFFFF;

  --ink:              #0F172A;
  --ink-2:            #334155;
  --ink-3:            #64748B;
  --ink-4:            #94A3B8;
  --line:             #E2E8F0;
  --line-strong:      #CBD5E1;

  /* ============================================================
     SEMANTIC
     ============================================================ */
  --success:          #10B981;
  --success-soft:     #ECFDF5;
  --warning:          #F59E0B;
  --warning-soft:     #FFFBEB;
  --danger:           #EF4444;
  --danger-soft:      #FEF2F2;
  --info:             var(--brand);
  --info-soft:        var(--brand-soft);

  --fg-1:             var(--ink);
  --fg-2:             var(--ink-2);
  --fg-3:             var(--ink-3);
  --fg-on-brand:      #FFFFFF;
  --fg-on-ink:        #FFFFFF;

  --bg-1:             var(--bg);
  --bg-2:             var(--bg-soft);
  --bg-3:             var(--bg-tint);
  --bg-card:          var(--surface);
  --bg-ink:           var(--ink);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display:     'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fs-display:       clamp(48px, 6vw, 80px);
  --fs-h1:            clamp(36px, 4vw, 56px);
  --fs-h2:            clamp(26px, 2.6vw, 36px);
  --fs-h3:            20px;
  --fs-h4:            16px;
  --fs-body-lg:       17px;
  --fs-body:          15px;
  --fs-body-sm:       13px;
  --fs-caption:       12px;
  --fs-overline:      11px;

  --lh-tight:         1.08;
  --lh-snug:          1.2;
  --lh-normal:        1.5;
  --lh-loose:         1.7;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.12em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;
  --s-32: 128px;

  /* ============================================================
     RADIUS
     ============================================================ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-btn:  10px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-3xl:  28px;
  --r-pill: 999px;

  /* ============================================================
     SHADOW
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.03);
  --shadow-lg: 0 10px 30px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-xl: 0 24px 48px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.05);
  --shadow-brand: 0 8px 30px rgba(79,70,229,0.18);

  --ring-brand: 0 0 0 3px rgba(79,70,229,0.18);

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 0.45, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slower:  520ms;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: 'cv11', 'ss01';
}

.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 400; color: var(--ink); }
.t-display em { font-style: italic; }
.t-h1 { font-family: var(--font-body); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 800; color: var(--ink); }
.t-h2 { font-family: var(--font-body); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: 700; color: var(--ink); }
.t-h3 { font-family: var(--font-body); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; color: var(--ink); }
.t-h4 { font-family: var(--font-body); font-size: var(--fs-h4); line-height: var(--lh-normal); font-weight: 600; color: var(--ink); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--ink-2); }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-2); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--ink-3); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--ink-3); }
.t-overline { font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.t-mono { font-family: var(--font-mono); font-size: 13px; }

.serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.ink-brand { color: var(--brand); }