/* ============================================================
   GAMECHANGER FOOTBALL & PERFORMANCE — Design Tokens (2026)
   Full colour, black ground, gold accent.
   General Sans (Fontshare, free commercial licence) for body copy;
   Satoshi Bold 700 (Fontshare, free commercial licence — same
   foundry as General Sans) for headlines — bumped from Medium 500
   the same day, after Regular 400, and before that Barlow Condensed
   then Inter (400, then 500), were each tried and replaced first.
   Both self-hosted, latin subset only.
   ============================================================ */

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Colour ---------- */
  --ink-900: #07070A;
  --ink-850: #0B0B0E;
  --ink-800: #101014;
  --ink-700: #17171C;
  --ink-600: #202027;
  --ink-500: #2C2C34;

  --paper:      #FFFFFF;
  --paper-soft: #F3F3F1;
  --paper-warm: #EDEDEA;

  --gold-300: #F1DEAE;
  --gold-400: #E3C173;
  --gold-500: #C9A24E;   /* primary accent */
  --gold-600: #A8843C;
  --gold-700: #6E5724;   /* clears AA on white */

  /* ---------- Semantic ---------- */
  --bg-dark:        var(--ink-900);
  --bg-dark-raised: var(--ink-800);
  --bg-light:       var(--paper);
  --bg-light-alt:   var(--paper-soft);

  --text-on-dark:        #FFFFFF;
  --text-on-dark-muted:  rgba(255,255,255,.66);
  --text-on-dark-faint:  rgba(255,255,255,.40);
  --text-on-light:       var(--ink-900);
  --text-on-light-muted: rgba(7,7,10,.60);
  --text-on-light-faint: rgba(7,7,10,.42);

  --line-on-dark:  rgba(255,255,255,.13);
  --line-on-dark-strong: rgba(255,255,255,.26);
  --line-on-light: rgba(7,7,10,.13);

  --accent:          var(--gold-500);
  --accent-bright:   var(--gold-400);
  --accent-on-light: var(--gold-700);
  --accent-contrast: var(--ink-900);   /* text on a gold fill is always dark */
  /* Form error state (1 Sep 2026). The palette had no error colour — the only
     semantic colour was the gold accent — so this is a new token rather than a
     hex buried in base.css. Warm enough to sit beside the gold. */
  --danger:          #e5675c;

  /* ---------- Type ---------- */
  --font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Headline face only (.display/.h1-.h4), weight 700 throughout —
     self-hosted woff2 is ~27KB, so the swap is quick. */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-display: clamp(2.9rem, 11.5vw, 9.5rem);
  --fs-h1:      clamp(2.1rem, 6.4vw, 5.25rem);
  --fs-h2:      clamp(1.75rem, 4.2vw, 3.5rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.85rem);
  --fs-h4:      clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.02vw, 1.1rem);
  --fs-small:   .875rem;
  --fs-eyebrow: .75rem;
  --fs-mono:    .75rem;

  --lh-display: .90;
  --lh-heading: 1.02;
  --lh-body:    1.62;

  --tr-display: -.035em;
  --tr-heading: -.025em;
  --tr-body:    -.005em;
  --tr-eyebrow: .2em;

  /* ---------- Space ---------- */
  --s-1:  .25rem;
  --s-2:  .5rem;
  --s-3:  .75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --section-y:  clamp(5.5rem, 11vw, 10.5rem);
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --maxw:       84rem;
  --maxw-text:  38rem;

  /* ---------- Motion ----------
     Entering/exiting UI uses a strong ease-out. Never ease-in: it delays
     the frames the eye is actually watching. Editorial reveals may run
     longer than the 300ms UI ceiling — they are content, not controls. */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);

  --dur-ui:      180ms;   /* buttons, links, small state */
  --dur-ui-slow: 240ms;
  --dur-nav:     380ms;   /* header hide/reveal slide */
  --dur-reveal:  520ms;   /* editorial reveal */
  --dur-media:    700ms;  /* image / clip-path reveal */
  --dur-lines:    620ms;  /* headline line rise — text should arrive sooner than imagery */
  --stagger:     70ms;

  --z-nav: 100;
  --z-menu: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-reveal: 220ms;
    --dur-media:  220ms;
    --dur-lines:  200ms;
    --stagger:    0ms;
  }
}