/* ============================================================
   DESIGN TOKENS — single source of truth for the whole site.
   Change a value here and it updates everywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Color palette ---- */
  --color-primary:    #0047ab;  /* cobalt blue   */
  --color-secondary:  #bfd1e5;  /* pale ice blue */
  --color-tertiary:   #0066ff;  /* bright blue   */
  --color-quaternary: #002f6c;  /* deep navy     */
  --color-accent:     #ffd700;  /* gold */

  /* Neutrals derived for text/surfaces */
  --color-ink:        #0a0f1a;  /* near-black for body text   */
  --color-surface:    #ffffff;  /* page background            */
  --color-surface-2:  #f3f6fb;  /* subtle section background  */
  --color-line:       #d7e0ee;  /* hairline borders           */

  /* ---- Typography ---- */
  --font-heading: 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Archivo Narrow', system-ui, sans-serif;

  /* Fluid type scale (clamps from mobile → desktop) */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-2xl:  clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-3xl:  clamp(3rem, 2rem + 4.5vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  /* ---- Spacing scale (consistent margins/padding everywhere) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ---- Layout ---- */
  --container-max: 1200px;   /* max content width            */
  --gutter: clamp(1rem, 4vw, 2.5rem); /* page side padding   */
  --radius: 4px;
  --radius-lg: 10px;

  /* ---- Effects ---- */
  --shadow-sm: 0 1px 2px rgba(0, 47, 108, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 47, 108, 0.12);
  --transition: 180ms ease;
}

/* ============================================================
   RESET / NORMALIZE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;   /* Archivo Black, all caps */
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--color-quaternary);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { max-width: 65ch; }
p + p { margin-top: var(--space-4); }

.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--color-tertiary);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--alt { background: var(--color-surface-2); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-quaternary); }

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover { background: var(--color-secondary); }

.btn--accent { background: var(--color-accent); color: var(--color-quaternary); }

/* Solid blue CTA with gold label (used on the leagues cards) */
.btn--cta { background: var(--color-primary); color: #fff; }
.btn--cta:hover { background: var(--color-quaternary); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--cta { font-size: var(--fs-xs); padding-inline: var(--space-4); }



/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Visible keyboard focus on every interactive element */
:focus-visible {
  outline: 3px solid var(--color-tertiary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link for keyboard/screen-reader users */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  background: var(--color-quaternary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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