/* ============================================================
   SoccerTraining.io — platform marketing site
   TOKENS + THEME

   Deliberately NOT one of the five trainer archetypes. Trainer
   sites are dark, sports-branded and photography-led. The platform
   site is light, precise and software-shaped, so a trainer reading
   it sees a technology company rather than a competitor.

   Brand values measured from the supplied logo:
     #001E5A  navy   (the entire mono lockup — 217,974px, exact)
     red      ESTIMATED — the uploaded asset is monochrome navy.
              Replace --p-red-600 with the official hex when supplied.
   ============================================================ */

:root {
  /* ---------- Brand primitives ---------- */
  --p-navy-900: #001133;
  --p-navy-800: #001E5A;   /* logo navy, measured */
  --p-navy-700: #0a2f7a;
  --p-navy-100: #dfe6f2;
  --p-navy-50:  #eef2f9;

  --p-red-700: #a6001a;
  --p-red-600: #d6001c;    /* ESTIMATED — confirm against brand kit */
  --p-red-100: #ffe5e8;

  --p-paper:   #fafaf7;
  --p-white:   #ffffff;
  --p-ink-900: #0d1420;
  --p-ink-600: #4a5666;
  --p-ink-400: #5e6879;
  --p-line:    #dfe1e0;

  /* ---------- Semantics ---------- */
  --surface-page:    var(--p-paper);
  --surface-raised:  var(--p-white);
  --surface-sunken:  #f2f2ee;
  --surface-invert:  var(--p-navy-800);
  --surface-deep:    var(--p-navy-900);

  --text-primary:    var(--p-ink-900);
  --text-secondary:  var(--p-ink-600);
  --text-muted:      var(--p-ink-400);
  --text-on-invert:  #eaf0fb;
  --text-on-accent:  var(--p-white);

  --accent:          var(--p-red-600);
  --accent-hover:    var(--p-red-700);
  --accent-subtle:   var(--p-red-100);
  --brand:           var(--p-navy-800);

  --border:          var(--p-line);
  --border-strong:   #c4c8c6;
  --border-invert:   rgba(234, 240, 251, 0.18);
  --border-focus:    var(--p-navy-700);

  /* ---------- Shape: spec-sheet precision ---------- */
  --radius-card: 4px;
  --radius-btn: 3px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13,20,32,.05), 0 8px 24px -12px rgba(13,20,32,.14);
  --shadow-lift: 0 2px 4px rgba(13,20,32,.06), 0 24px 60px -24px rgba(13,20,32,.28);

  /* ---------- Type ---------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --fs-display: clamp(2.6rem, 4.9vw, 4.5rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 2.7vw, 2.6rem);
  --fs-h3:      clamp(1.15rem, 1.4vw, 1.4rem);
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.0625rem, 1.15vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.6875rem;
  --fs-data:    clamp(1rem, 1.1vw, 1.125rem);

  /* ---------- Space ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px;
  --sp-11:96px; --sp-12:128px;
  --section-y: clamp(72px, 8vw, 132px);
  --gutter: clamp(20px, 4vw, 64px);
  --container: 1280px;
  --container-wide: 1480px;

  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 550ms;
  --ease-out: cubic-bezier(.2,0,0,1);
  --motion-scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  *, *::before, *::after {
    animation-duration:.01ms !important; transition-duration:.01ms !important;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; }
img,svg,video { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
a { color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd { margin:0; padding:0; }
ul,ol { list-style:none; }

:where(a,button,input,select,summary,[tabindex]):focus-visible {
  outline:2px solid var(--border-focus); outline-offset:3px; border-radius:2px;
}

/* Reveal is progressive enhancement only. Base state is visible. */
.js-motion [data-reveal] {
  opacity:0; transform:translateY(calc(12px * var(--motion-scale)));
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js-motion [data-reveal].is-revealed { opacity:1; transform:none; }