/* ============================================================
   TOKENS.CSS — kaikki design-arvot
   Ei hardcodata arvoja muualle.
   UI/UX skill #49: Sports/Fitness — Barlow Condensed + Barlow
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');

:root {

  /* ---- Värit ---- */

  --color-accent:          #8EC6DC;   /* baby blue — pääaksentti */
  --color-accent-dark:     #6AAFC7;   /* hover-tilat */
  --color-accent-bg:       #eaf6fb;   /* erittäin vaalea sininen tausta */

  --color-playful:         #0b0041;   /* koralli — leikkisä lisäväri */
  --color-playful-bg:      #FFF4F0;   /* vaalea korallin tausta */
  --color-card-warm:       #FFF4F0;   /* info-kortti oikea puoli */

  --color-dark:            #0F1117;   /* syvä tumma — hero, footer */
  --color-dark-2:          #1a1f2e;   /* sekundaarinen tumma */

  --color-bg:              #ffffff;   /* sivun pääväri */
  --color-bg-light:        #f4fafd;   /* vaalea osio (sininen sävy) */
  --color-bg-off:          #f8f9fa;   /* neutraali hieman harmaa */

  --color-text:            #1a1f2e;   /* pääkopioteksti */
  --color-text-muted:      #6b7280;   /* haalea teksti */
  --color-text-on-dark:    #f4f8fa;   /* valkoinen teksti tummalla */
  --color-text-on-dark-muted: rgba(244, 248, 250, 0.68);

  --color-border:          rgba(26, 31, 46, 0.09);
  --color-border-strong:   rgba(26, 31, 46, 0.18);

  /* ---- Fontit — Sports/Fitness pairing ---- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  /* ---- Fonttikoot ---- */
  --fs-eyebrow:  0.78rem;
  --fs-small:    0.875rem;
  --fs-body:     1rem;
  --fs-h4:       1.1rem;
  --fs-h3:       1.45rem;
  --fs-h2:       2.6rem;
  --fs-h1:       3.6rem;
  --fs-nav:      0.78rem;
  --fs-logo:     1.5rem;

  /* ---- Spacing — 4/8pt scale ---- */
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2.5rem;
  --space-2xl:   4rem;
  --space-3xl:   6rem;

  /* ---- Layout ---- */
  --max-width:     1200px;
  --header-height: 64px;

  /* ---- Transitions ---- */
  --tr-fast: 150ms ease;
  --tr-base: 250ms ease;
  --tr-slow: 400ms ease;

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.01em;
  --ls-wide:    0.10em;
  --ls-widest:  0.18em;

  /* ---- Grid ---- */
  --grid-cols:      12;
  --grid-gap:       16px;
  --grid-col-width: calc(
    (var(--max-width) / var(--grid-cols)) -
    (var(--grid-gap) * (var(--grid-cols) - 1) / var(--grid-cols))
  );
}

@media (max-width: 1264px) {
  :root {
    --grid-col-width: calc(
      ((100vw - 5rem) / var(--grid-cols)) -
      (var(--grid-gap) * (var(--grid-cols) - 1) / var(--grid-cols))
    );
  }
}

@media (max-width: 680px) {
  :root {
    --grid-col-width: calc(
      ((100vw - 2rem) / 4) -
      (var(--grid-gap) * 3 / 4)
    );
  }
}