/* ==========================================================================
   Figurinhas WC26 — Design Tokens
   Cores, tipografia e valores semânticos derivados do branding oficial
   FIFA World Cup 26 (Canada · Mexico · USA).
   ========================================================================== */

/* Google Fonts substitutes for the official tournament display type.
   OFFICIAL: "FIFA26 Display" (custom rounded geometric grotesque — Dalton Maag).
   SUBSTITUTE: Bagel Fat One (display headings) + Archivo (UI text).
   FLAG: these are placeholders; request official FIFA26 Display + Text files. */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&display=swap');

:root {
  /* ─── Brand Core (Tournament Palette) ───────────────────────────────── */
  --wc-indigo:     #1E2A8C;  /* deep cobalt — primary brand surface     */
  --wc-indigo-deep:#141C6A;  /* pressed / dark mode background          */
  --wc-red:        #E5231B;  /* vivid host red (Mexico-leaning)         */
  --wc-red-deep:   #B31510;  /* pressed red                             */
  --wc-cyan:       #29C6D1;  /* tournament teal / "WE ARE" type          */
  --wc-cyan-soft:  #8FE1E8;  /* tint                                     */
  --wc-magenta:    #EA1F5A;  /* host city pink / CTA accent              */
  --wc-lime:       #CBE74A;  /* chartreuse accent                        */
  --wc-purple:     #6A2BE2;  /* secondary brand purple                   */
  --wc-gold:       #D7A63C;  /* trophy gold                              */
  --wc-gold-deep:  #8A6515;  /* gold shadow                              */
  --wc-green:      #1F7A3D;  /* trophy base green                        */

  /* ─── Neutrals ──────────────────────────────────────────────────────── */
  --ink-0:   #0A0B1F;  /* near-black, with a hint of indigo              */
  --ink-1:   #1A1C33;
  --ink-2:   #2E3150;
  --ink-3:   #575A7A;
  --ink-4:   #9194B0;
  --paper-3: #C9CCE0;
  --paper-2: #E7E9F3;
  --paper-1: #F5F6FB;
  --paper-0: #FFFFFF;

  /* ─── Semantic Surface / Text ───────────────────────────────────────── */
  --fg-1: var(--ink-0);          /* default text on paper               */
  --fg-2: var(--ink-2);          /* secondary text                       */
  --fg-3: var(--ink-3);          /* muted / helper                       */
  --fg-inverse: var(--paper-0);  /* text on indigo / saturated surfaces  */
  --fg-accent:  var(--wc-red);   /* links, focus                          */

  --bg-app:     var(--paper-1);
  --bg-surface: var(--paper-0);
  --bg-sunken:  var(--paper-2);
  --bg-brand:   var(--wc-indigo);
  --bg-hot:     var(--wc-red);

  --border-1: #DADCEC;
  --border-2: #B5B8D0;
  --border-strong: var(--ink-0);  /* thick 2-3px ink outlines (sticker vibe) */

  /* ─── Status ────────────────────────────────────────────────────────── */
  --status-success: #1F9D55;
  --status-warn:    #F2A516;
  --status-error:   var(--wc-red);
  --status-info:    var(--wc-cyan);

  /* ─── Radii (rounded, sticker-forward) ──────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ─── Spacing (4-based) ─────────────────────────────────────────────── */
  --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;

  /* ─── Shadows (two flavors: soft float + hard sticker drop) ─────────── */
  --shadow-soft-1: 0 1px 2px rgba(10,11,31,.08), 0 1px 1px rgba(10,11,31,.04);
  --shadow-soft-2: 0 6px 16px rgba(10,11,31,.10), 0 2px 4px rgba(10,11,31,.06);
  --shadow-soft-3: 0 20px 40px rgba(10,11,31,.16), 0 6px 12px rgba(10,11,31,.08);
  /* Sticker-style offset drop: hard, no blur, ink-colored */
  --shadow-sticker-sm: 3px 3px 0 var(--ink-0);
  --shadow-sticker-md: 5px 5px 0 var(--ink-0);
  --shadow-sticker-lg: 8px 8px 0 var(--ink-0);
  /* Colored sticker variants */
  --shadow-sticker-red:     5px 5px 0 var(--wc-red);
  --shadow-sticker-cyan:    5px 5px 0 var(--wc-cyan);
  --shadow-sticker-magenta: 5px 5px 0 var(--wc-magenta);

  /* ─── Border widths ─────────────────────────────────────────────────── */
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;  /* sticker outlines */
  --stroke-4: 4px;

  /* ─── Motion ────────────────────────────────────────────────────────── */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ─── Typography Families ───────────────────────────────────────────── */
  --font-display: "Bagel Fat One", "Archivo Black", system-ui, sans-serif;  /* chunky rounded display */
  --font-ui:      "Archivo", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type Scale ────────────────────────────────────────────────────── */
  --fs-hero:  clamp(56px, 9vw, 136px);  /* marketing hero numerals */
  --fs-h1:    48px;
  --fs-h2:    36px;
  --fs-h3:    24px;
  --fs-h4:    20px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --tr-tight: -0.02em;
  --tr-base:  0;
  --tr-caps:  0.06em;
}

/* ==========================================================================
   Base element styles
   ========================================================================== */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;   /* Bagel Fat One ships a single weight */
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  color: inherit;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p  { font-size: var(--fs-body); line-height: var(--lh-base); }
small, .small { font-size: var(--fs-small); color: var(--fg-2); }
.micro  { font-size: var(--fs-micro); color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--wc-red);
}

.hero-numeral {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  letter-spacing: -0.04em;
  line-height: 0.85;
}

code, kbd, pre { font-family: var(--font-mono); font-size: 14px; }

a { color: var(--wc-red); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

::selection { background: var(--wc-lime); color: var(--ink-0); }