/* ============================================================
   SoccerTraining.io — LAYER 1: TOKENS
   Theme-agnostic. Identical across every trainer site.
   Defines the *contract* components rely on. No brand values here.
   ============================================================ */

:root {
  /* ---------- Spacing (4px base, 8px rhythm) ---------- */
  --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;
  --sp-13: 160px;

  /* ---------- Containers ---------- */
  --container-narrow: 760px;
  --container:        1320px;
  --container-wide:   1560px;
  --container-full:   1840px;
  --gutter: clamp(20px, 4vw, 72px);

  /* ---------- Section rhythm (density set by theme) ---------- */
  --density: 1;
  --section-y-base: clamp(72px, 8vw, 136px);
  --section-y: calc(var(--section-y-base) * var(--density));
  --stack-gap: calc(var(--sp-6) * var(--density));

  /* ---------- Fluid type scale ----------
     Steps are declared here; the *ratio*, faces, case and tracking
     come from the theme layer. Swap the theme, the voice changes. */
  --fs-display-xl: clamp(3.25rem, 11vw, 10.5rem);
  --fs-display-l:  clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-h1:         clamp(2.25rem, 4.4vw, 4rem);
  --fs-h2:         clamp(1.75rem, 2.9vw, 2.9rem);
  --fs-h3:         clamp(1.25rem, 1.5vw, 1.6rem);
  --fs-h4:         clamp(1.05rem, 1.1vw, 1.2rem);
  --fs-body-l:     clamp(1.0625rem, 1.05vw, 1.2rem);
  --fs-body:       clamp(1rem, 0.9vw, 1.0625rem);
  --fs-body-s:     0.9375rem;
  --fs-label:      0.6875rem;
  --fs-micro:      0.625rem;
  --fs-data:       clamp(1rem, 1.1vw, 1.15rem);

  /* ---------- Motion ---------- */
  --motion-scale: 1;
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.6, 0, 0.2, 1);

  /* ---------- Z ---------- */
  --z-nav: 100;
  --z-drawer: 200;
  --z-bookbar: 150;
  --z-modal: 300;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
/* <picture> is a wrapper, not a layout box: keep the inner <img> laid out as a
   direct child of its media container (preserves height:100% / object-fit). */
picture { display: contents; }
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, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* ---------- Layout utilities ---------- */
.u-container       { width: 100%; max-width: var(--container);       margin-inline: auto; padding-inline: var(--gutter); }
.u-container--narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.u-container--wide { width: 100%; max-width: var(--container-wide);  margin-inline: auto; padding-inline: var(--gutter); }
.u-container--full { width: 100%; max-width: var(--container-full);  margin-inline: auto; padding-inline: var(--gutter); }

/* Section padding lives ONLY here. Never on a component. */
.l-section { padding-block: var(--section-y); position: relative; }
.l-section--tight { padding-block: calc(var(--section-y) * 0.6); }
.l-section--flush-top { padding-block-start: 0; }
.l-section + .l-section[data-surface-match] { padding-block-start: calc(var(--section-y) * 0.4); }

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

/* ---------- Accessibility floor ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.u-skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 999;
  background: var(--accent); color: var(--text-on-accent);
  padding: var(--sp-3) var(--sp-5); font-weight: 700;
}
.u-skip:focus { top: var(--sp-4); }

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Scroll reveal ----------
   CRITICAL: content is visible by default. Reveal styles apply only
   once motion.js has confirmed it loaded and added .js-motion to <html>.
   If the script never runs, the page is complete. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(calc(14px * 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; }