/* ============================================================
   Sportstech Design Tokens — Colors & Type
   ============================================================
   Font substitution note:
   - Söhne Breit (Klim Type Foundry, commercial) → Archivo (Google)
   - Söhne (Klim Type Foundry, commercial) → Inter (Google)
   When font licenses are supplied, swap the @font-face blocks
   at the top of this file; the rest of the system uses
   --font-display / --font-body and will pick them up.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100..125,400..900;1,100..125,400..900&family=Inter:ital,wght@0,300..700;1,300..700&display=swap');

:root {
  /* ---------- BRAND COLORS (spec) ---------- */
  --sportstech-dark: #25282A;     /* PANTONE 426C — primary text + wordmark */
  --sportstech-red:  #E4002B;     /* PANTONE 185C — accent + CTA only */
  --warm-grey:       #D1CCBD;     /* PANTONE 7534C — background, secondary surfaces */

  /* ---------- DERIVED / NEUTRAL SCALE ---------- */
  --dark-900: #25282A;            /* = sportstech dark */
  --dark-700: #3A3D40;
  --dark-500: #6B6E71;
  --dark-300: #9FA2A4;
  --dark-100: #D9DADB;
  --warm-300: #E7E3D8;            /* lighter warm grey — large surfaces */
  --warm-500: #D1CCBD;            /* = warm grey */
  --warm-700: #B0AB9C;            /* darker warm — hover on warm surfaces */
  --off-white: #F6F4EE;           /* paper — softer than pure white */
  --white:     #FFFFFF;
  --black:     #000000;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --fg-1: var(--sportstech-dark); /* primary text */
  --fg-2: #4A4D4F;                /* secondary text */
  --fg-3: #85888A;                /* tertiary / meta */
  --fg-inverse: #FFFFFF;
  --fg-accent: var(--sportstech-red);

  --bg-canvas: var(--off-white);  /* default page background */
  --bg-surface: #FFFFFF;          /* cards on canvas */
  --bg-muted: var(--warm-500);    /* secondary surface */
  --bg-muted-soft: var(--warm-300);
  --bg-inverse: var(--sportstech-dark);

  --border-subtle: rgba(37, 40, 42, 0.12);
  --border-strong: rgba(37, 40, 42, 0.32);
  --border-inverse: rgba(255, 255, 255, 0.18);

  /* ---------- STATUS (derived, WCAG-conscious) ---------- */
  --success: #1F7A4D;
  --warning: #C77A0A;
  --danger:  var(--sportstech-red);
  --info:    #1E5FB3;

  /* ---------- TYPE FAMILIES ---------- */
  /* Söhne Breit → Archivo (wide/expanded grotesque). Use condensed
     stretch off; Söhne Breit reads wider, so we slightly expand Archivo. */
  --font-display: 'Archivo', 'Söhne Breit', 'Helvetica Neue', Arial, sans-serif;
  /* Söhne → Inter. Söhne has a more humanist 'a' than Inter but Inter
     is the closest open metric match. */
  --font-body: 'Inter', 'Söhne', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (spec) ----------
     Display 48 · H1 30 · H2 24 · H3 20 · H4 18 · Body 16 · Small 14 · Caption 12
     Brand-spec display callouts (78 Halbfett · 42 Fett · 38 Fett Kursiv) kept
     as alt tokens for graphic / campaign use. */
  --text-display: 48px;  /* Display */
  --text-h1:      30px;  /* H1 */
  --text-h2:      24px;  /* H2 */
  --text-h3:      20px;  /* H3 */
  --text-h4:      18px;  /* H4 */
  --text-body:    16px;  /* Body */
  --text-small:   14px;  /* Small */
  --text-caption: 12px;  /* Caption */

  /* Aliases kept for existing consumers */
  --text-xl:   20px;
  --text-lg:   18px;
  --text-md:   16px;
  --text-sm:   14px;
  --text-xs:   12px;
  --text-xxs:  11px;

  /* Brand-graphic display callouts (campaign / print) */
  --display-hero:    clamp(56px, 8vw, 112px); /* ALL CAPS hero */
  --display-xl:      78px;                    /* Halbfett — 25 VA */
  --display-lg:      56px;
  --display-md:      42px;                    /* Fett — optional ALL CAPS */
  --display-sm:      32px;
  --display-accent:  38px;                    /* Fett Kursiv — 10 VA */

  /* ---------- TRACKING (Söhne Breit callouts) ---------- */
  /* 25 VA ≈ 25/1000 em ≈ 0.025em; 10 VA ≈ 0.01em */
  --tracking-breit-78: 0.025em;
  --tracking-breit-38: 0.010em;
  --tracking-body: 0;
  --tracking-caps-sm: 0.08em;

  /* ---------- LINE HEIGHT ---------- */
  --lh-tight: 1.00;
  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body: 1.5;
  --lh-compact: 1.3;

  /* ---------- WEIGHTS ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-halbfett: 600;  /* Söhne Breit Halbfett */
  --fw-fett: 700;      /* Söhne Breit Fett */
  --fw-black: 800;     /* for extra-emphatic caps */

  /* ---------- RADII ---------- */
  /* Sportstech reads as a product brand: moderate radii, not pill-y. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- SHADOW / ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(37, 40, 42, 0.06);
  --shadow-2: 0 4px 12px rgba(37, 40, 42, 0.08);
  --shadow-3: 0 14px 32px rgba(37, 40, 42, 0.12);
  --shadow-cta-red: 0 10px 24px rgba(228, 0, 43, 0.25);

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-narrow: 860px;
  --page-gutter: clamp(16px, 4vw, 40px);
}

/* ============================================================
   Base type (Söhne equivalent for body copy)
   ============================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic headline styles (Söhne Breit equivalents)
   ============================================================ */
.s-display-hero,
h1.s-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-size: var(--display-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-breit-78);
  text-transform: uppercase;
  font-stretch: 112%;
}

/* 78px Halbfett — supporting headline, mandatory ALL CAPS, 25 VA */
.s-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-halbfett);
  font-size: var(--display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-breit-78);
  text-transform: uppercase;
  font-stretch: 112%;
}

/* 42px Fett — body headline, optional ALL CAPS */
.s-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-size: var(--display-md);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}
.s-display-md.is-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-breit-78);
}

/* 38px Fett Kursiv — bubbles / tags / accents, 10 VA — sentence case italic */
.s-display-accent {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-style: italic;
  font-size: var(--display-accent);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-breit-38);
  font-stretch: 112%;
}

/* Editorial italic — sentence case */
.s-editorial {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-style: italic;
  font-size: var(--display-md);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}

/* ------------------------------------------------------------
   Semantic scale (matches design-tokens spec)
   Display 48 · H1 30 · H2 24 · H3 20 · H4 18 · Body 16 · Small 14 · Caption 12
   ------------------------------------------------------------ */
.s-display {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  font-stretch: 112%;
}
.s-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-fett);
  font-size: var(--text-h1);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}
.s-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-halbfett);
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}
.s-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-halbfett);
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}
.s-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-halbfett);
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  font-stretch: 112%;
}

/* Body copy tiers */
.s-body-xl { font-size: var(--text-xl); line-height: var(--lh-body); }
.s-body-lg { font-size: var(--text-lg); line-height: var(--lh-body); }
.s-body     { font-size: var(--text-body); line-height: var(--lh-body); }
.s-body-sm { font-size: var(--text-small); line-height: var(--lh-body); }
.s-small   { font-size: var(--text-small); line-height: var(--lh-body); }
.s-caption { font-size: var(--text-caption); line-height: var(--lh-compact); color: var(--fg-2); }

/* Eyebrow / overline — small ALL CAPS label */
.s-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-halbfett);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps-sm);
  text-transform: uppercase;
  color: var(--fg-2);
  font-stretch: 112%;
}