/* ============================================================
   FASTBOOST — base.css
   Reset, CSS Custom Properties, Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,800;1,900&family=Unbounded:wght@700;800;900&family=Rajdhani:wght@500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── Custom Properties (theme-switchable) ── */
:root {
  /* Trainer 1: Artem — Fire/Power */
  --accent:       #FF3B1F;
  --accent-2:     #FFB800;
  --bg:           #0D0D0D;
  --bg-section:   #111111;

  /* Neutral globals */
  --white:        #F5F5F5;
  --gray-1:       #1A1A1A;
  --gray-2:       #2A2A2A;
  --gray-3:       #555555;
  --gray-4:       #888888;
  --text:         #F5F5F5;

  /* Spacing scale */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 8rem;

  /* Typography scale */
  --fs-display: clamp(4rem, 12vw, 10rem);
  --fs-h1:      clamp(2.5rem, 7vw, 6rem);
  --fs-h2:      clamp(2rem, 5vw, 4rem);
  --fs-h3:      clamp(1.4rem, 3vw, 2.2rem);
  --fs-body:    clamp(0.95rem, 1.5vw, 1.1rem);
  --fs-label:   clamp(0.75rem, 1.2vw, 0.9rem);
  --fs-stat:    clamp(3rem, 8vw, 7rem);

  /* Transitions */
  --t-fast:   0.2s ease;
  --t-mid:    0.4s ease;
  --t-slow:   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-theme:  0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: default;
}

a, button, .btn,
.accent-text, .accent-bg,
.nav-trainer, .hero-tag,
.stat-number, .program-card,
.section-label {
  transition:
    color var(--t-theme),
    background-color var(--t-theme),
    border-color var(--t-theme),
    box-shadow var(--t-theme);
}

h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(245,245,245,0.75);
  max-width: 65ch;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 6rem);
}

.accent-text { color: var(--accent); }
.accent-text-2 { color: var(--accent-2); }

.section-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 2em;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); }
::selection { background: var(--accent); color: #000; }