/* ============================================================
   FIFA WORLD CUP — DESIGN TOKENS
   Colors + Type foundations and semantic variables.
   Fonts: Bebas Neue (headline) + Montserrat (body) via Google Fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND PALETTE (raw) ---------- */
  --wc-navy:   #0B1D3A;  /* primary dark — backgrounds, headlines */
  --wc-blue:   #0057FF;  /* electric blue — accents, links, energy */
  --wc-red:    #E60023;  /* signal red — alerts, CTAs, highlights */
  --wc-gold:   #D4AF37;  /* trophy gold — premium accents on dark */
  --wc-white:  #FFFFFF;  /* paper / reversed text */
  --wc-ink:    #111111;  /* near-black — body text on light */

  /* ---------- TINTS & SHADES (derived, oklch-harmonized) ---------- */
  --wc-navy-900: #060f1f;
  --wc-navy-800: #0B1D3A;
  --wc-navy-700: #16294b;
  --wc-navy-600: #233a63;
  --wc-blue-600: #0047cf;
  --wc-blue-400: #3d82ff;
  --wc-red-600:  #c5001d;
  --wc-gold-600: #b9942b;
  --wc-gold-200: #ecd9a0;

  /* ---------- NEUTRALS ---------- */
  --wc-paper:    #F7F6F2;  /* off-white field background */
  --wc-gray-100: #ECEBE6;
  --wc-gray-200: #D9D7D0;
  --wc-gray-300: #BFBDB4;
  --wc-gray-500: #6E6C66;
  --wc-gray-700: #3A3A36;

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg:           var(--wc-paper);
  --bg-inverse:   var(--wc-navy-800);
  --surface:      var(--wc-white);
  --surface-2:    var(--wc-gray-100);
  --surface-dark: var(--wc-navy-700);

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg1:        var(--wc-ink);     /* primary text on light */
  --fg2:        var(--wc-gray-500);/* secondary / muted text */
  --fg-inverse: var(--wc-white);   /* text on dark */
  --fg-accent:  var(--wc-blue);    /* links / interactive */
  --fg-gold:    var(--wc-gold);    /* premium accent on dark */
  --fg-danger:  var(--wc-red);

  /* ---------- SEMANTIC: LINES & BORDERS ---------- */
  --border:        var(--wc-gray-200);
  --border-strong: var(--wc-navy-800);
  --border-gold:   var(--wc-gold);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; /* condensed all-caps */
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (desktop, px/line-height) ---------- */
  --h1-size: 64px;  --h1-lh: 72px;
  --h2-size: 48px;  --h2-lh: 56px;
  --h3-size: 32px;  --h3-lh: 40px;
  --h4-size: 24px;  --h4-lh: 32px;
  --body-size: 16px; --body-lh: 24px;
  --small-size: 14px; --small-lh: 20px;

  /* ---------- WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* ---------- RADII ---------- */
  --r-none: 0px;     /* sharp — preferred, athletic/editorial */
  --r-sm:   4px;     /* subtle softening on inputs/buttons */
  --r-md:   8px;
  --r-pill: 999px;   /* chips, tags */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-sm: 0 1px 2px rgba(11,29,58,.08);
  --shadow-md: 0 6px 18px rgba(11,29,58,.14);
  --shadow-lg: 0 18px 48px rgba(11,29,58,.22);
  --shadow-cta: 0 8px 24px rgba(11,29,58,.35); /* dark button lift */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.6,0,.2,1);
  --dur-fast: 140ms;
  --dur: 240ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Headlines use the condensed display face in ALL CAPS.
   Body copy uses Montserrat with a normal case.
   ============================================================ */

.wc-h1, .wc-h2, .wc-h3, .wc-h4 {
  font-family: var(--font-display);
  font-weight: 400;            /* Bebas Neue ships one weight; size = emphasis */
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--fg1);
  margin: 0;
}
.wc-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); }
.wc-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); }
.wc-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
.wc-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }

/* Eyebrow / kicker — small bold Montserrat, tracked-out caps */
.wc-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Tagline / quote — condensed caps in red, italic energy */
.wc-tagline {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--fg-danger);
  font-style: italic;
}

.wc-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg1);
}
.wc-lead {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: 18px;
  line-height: 28px;
  color: var(--fg1);
}
.wc-small {
  font-family: var(--font-body);
  font-size: var(--small-size);
  line-height: var(--small-lh);
  color: var(--fg2);
}
.wc-label {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* ============================================================
   BUTTONS (from brand sheet)
   ============================================================ */
.wc-btn {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: space-between;
  padding: 14px 22px;
  white-space: nowrap;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.wc-btn--primary {
  background: var(--wc-navy-800);
  color: var(--wc-gold);
  box-shadow: var(--shadow-cta);
}
.wc-btn--primary:hover { background: var(--wc-navy-700); }
.wc-btn--primary:active { transform: scale(.98); }
.wc-btn--secondary {
  background: transparent;
  color: var(--wc-navy-800);
  border-color: var(--wc-navy-800);
}
.wc-btn--secondary:hover { background: var(--wc-navy-800); color: var(--wc-white); }
.wc-btn--secondary:active { transform: scale(.98); }
.wc-link {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wc-red);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--wc-red);
  padding-bottom: 2px;
}
.wc-link:hover { color: var(--wc-red-600); }