/*
 * ============================================================
 * FACE OF THE WORLD CUP 2026 — Global Design System
 * Luxury Gold × Pitch Black × Editorial Sports
 * ============================================================
 */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,900;1,9..40,300&family=Space+Mono:wght@400;700&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #000000;
  --bg-2:         #050505;
  --bg-card:      #0A0A0A;
  --bg-card-hover:#111111;
  --bg-input:     #111111;

  /* Gold Triad */
  --gold:         #F7C948;
  --gold-hi:      #FFE89A;
  --gold-dk:      #C98210;
  --gold-border:  rgba(247,201,72,0.25);
  --gold-glow:    rgba(247,201,72,0.18);
  --gold-ambient: rgba(247,201,72,0.08);

  /* Typography */
  --text:         #FFFFFF;
  --text-2:       #BBBBBB;
  --text-3:       #888888;

  /* Status */
  --success:      #22C55E;
  --warn:         #F59E0B;
  --danger:       #EF4444;

  /* Borders */
  --border:       rgba(247,201,72,0.25);
  --border-dim:   rgba(247,201,72,0.12);
  --border-white: rgba(255,255,255,0.08);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Geometry */
  --radius-card:  24px;
  --radius-btn:   14px;
  --radius-input: 12px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-ambient: 0 0 60px rgba(247,201,72,0.08);
  --shadow-glow:    0 0 25px rgba(247,201,72,0.18);
  --shadow-gold-btn:0 4px 20px rgba(201,130,16,0.3);
  --shadow-lg:      0 24px 64px rgba(0,0,0,0.8);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   0.15s;
  --t-base:   0.25s;
  --t-slow:   0.4s;
}

/* ── Light Mode Overrides ─────────────────────────────────── */
[data-theme="light"] {
  --bg:           #F4F0E8;
  --bg-2:         #EDE8DC;
  --bg-card:      #FFFFFF;
  --bg-card-hover:#FAFAF7;
  --bg-input:     #F7F4ED;
  --text:         #0D0C08;
  --text-2:       #3A3830;
  --text-3:       #7A7060;
  --border-white: rgba(0,0,0,0.08);
  --shadow-lg:    0 24px 64px rgba(0,0,0,0.12);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font-body); cursor: pointer; }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 2px; }

/* ── Typography Scale ─────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.body-copy {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.65;
}

/* ── Button System ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all var(--t-base) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn-lg { padding: 17px 42px; font-size: 14px; }
.btn-sm { padding: 9px 20px; font-size: 11px; }

/* Metallic Gold Fill */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-dk) 100%);
  color: #000;
  box-shadow: var(--shadow-gold-btn);
}
.btn-gold:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,130,16,0.45);
}
.btn-gold:active { transform: translateY(0); }

/* Stealth Dark */
.btn-stealth {
  background: #1a1a1a;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-stealth:hover {
  background: #222;
  border-color: var(--gold-border);
  transform: translateY(-1px);
}

/* Ghost/Outline */
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-white);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--gold-border);
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient);
  transition: all var(--t-base) var(--ease);
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(247,201,72,0.4);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px) scale(1.005);
}

/* ── Form Elements ────────────────────────────────────────── */
.input, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"],
select, textarea {
  background: var(--bg-input);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 18px;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  -webkit-appearance: none;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(247,201,72,0.5);
  box-shadow: 0 0 0 1px rgba(247,201,72,0.25);
}
.input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--text-3);
}

/* ── Gold Gradient Text ───────────────────────────────────── */
.text-gold {
  background: linear-gradient(90deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-dk) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gold-v {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold-dk) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dividers / Separators ────────────────────────────────── */
.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-border) 30%, var(--gold-border) 70%, transparent 100%);
}
.gold-line-full { background: var(--gold-border); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-gold   { background: rgba(247,201,72,0.1);  border: 1px solid var(--gold-border); color: var(--gold); }
.badge-green  { background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.25); color: var(--success); }
.badge-red    { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.2); color: var(--danger); }
.badge-dim    { background: rgba(255,255,255,0.05); border: 1px solid var(--border-white); color: var(--text-3); }

/* ── Utility ──────────────────────────────────────────────── */
.max-w       { max-width: 1440px; margin: 0 auto; }
.px          { padding-left: 40px; padding-right: 40px; }
.section-gap { padding-top: 96px; padding-bottom: 96px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Page Transitions ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.anim-fade-up { animation: fadeUp var(--t-slow) var(--ease) both; }
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.35s; }
.anim-delay-4 { animation-delay: 0.5s; }
.anim-delay-5 { animation-delay: 0.65s; }

/* ── Responsive Breakpoints ───────────────────────────────── */
@media (max-width: 1024px) {
  .px { padding-left: 24px; padding-right: 24px; }
  .section-gap { padding-top: 72px; padding-bottom: 72px; }
}
@media (max-width: 640px) {
  .px { padding-left: 20px; padding-right: 20px; }
  .section-gap { padding-top: 56px; padding-bottom: 56px; }
  .btn-lg { padding: 14px 28px; font-size: 13px; }
}