/* ==========================================================================
   ARENA 27 — DESIGN TOKENS
   Campeonato presencial 2x2 de EA SPORTS FC 27
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Superfícies ------------------------------------------------------ */
  --bg-950: #040504;
  --bg-900: #070807;
  --bg-850: #0a0c0a;
  --surface-800: #101310;
  --surface-elevated: #121512;
  --surface-glass: rgba(10, 12, 10, 0.55);
  --surface-glass-strong: rgba(8, 10, 8, 0.82);

  /* --- Bordas ----------------------------------------------------------- */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-glass: rgba(255, 255, 255, 0.07);
  --inner-highlight: rgba(255, 255, 255, 0.035);

  /* --- Texto ------------------------------------------------------------ */
  --text-1: #f6f7f4;
  --text-2: #a6aaa3;
  --text-3: #747a72;

  /* --- Acento ----------------------------------------------------------- */
  --blue: #00a2ff;
  --blue-intense: #0090e6;
  --blue-light: #57bcff;
  --blue-glow: rgba(0, 162, 255, 0.18);
  --blue-dim: rgba(0, 162, 255, 0.08);

  /* --- Pódio ------------------------------------------------------------ */
  --gold: #e8c66a;
  --gold-deep: #a8873c;
  --silver: #cbd0d4;
  --silver-deep: #878d92;
  --bronze: #c98555;
  --bronze-deep: #8a5734;

  /* --- Estados ---------------------------------------------------------- */
  --danger: #ff5a4d;
  --danger-dim: rgba(255, 90, 77, 0.1);
  --success: var(--blue);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace;

  --fs-hero: clamp(64px, 8vw, 148px);
  --fs-display: clamp(48px, 6vw, 96px);
  --fs-h2: clamp(38px, 4.6vw, 72px);
  --fs-h3: clamp(26px, 2.6vw, 42px);
  --fs-h4: clamp(20px, 1.8vw, 26px);
  --fs-body-lg: clamp(17px, 1.25vw, 20px);
  --fs-body: clamp(15px, 1.05vw, 17px);
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-eyebrow: clamp(11px, 0.85vw, 13px);

  --lh-display: 0.86;
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --ls-display: -0.03em;
  --ls-eyebrow: 0.14em;

  /* --- Espaçamento ------------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-30: 120px; --s-40: 160px;

  --section-y: clamp(64px, 10vw, 160px);

  /* --- Grid ------------------------------------------------------------- */
  --max-w: 1440px;
  --content-w: 1320px;
  --gutter: 24px;
  --pad-x: clamp(20px, 4vw, 64px);

  /* --- Raios ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-hero: 32px;
  --r-pill: 999px;

  /* --- Sombras ---------------------------------------------------------- */
  --shadow-card: 0 20px 70px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 28px 90px rgba(0, 0, 0, 0.5);
  --shadow-cta: 0 12px 32px rgba(0, 162, 255, 0.18);

  /* --- Movimento -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 300ms;
  --t-reveal: 620ms;

  /* --- Layout ----------------------------------------------------------- */
  --header-h: 72px;
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;
    --gutter: 16px;
  }
}