/* ============================================================
   BRASA DELIVERY · Copa 2026 — Design Tokens
   Foodtech / delivery brasileiro. Energia, vermelho, pop-art.
   Tipografia chunky redonda. NADA editorial, NADA serifa.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Archivo+Black&family=Sora:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Cores Brasa oficiais ---------- */
  --brasa:         #DC1F26;   /* vermelho pimenta — primária */
  --fire:          #F73F1E;   /* fogo vibrante — energia */
  --crimson:       #A8141A;   /* vermelho escuro pra sombras */
  --mustard:       #FFC73D;   /* amarelo mostarda — acento */
  --orange:        #FF8C32;   /* laranja queimado */

  /* ---------- Neutros ---------- */
  --coal:          #1A1A1A;
  --soot:          #2C2C2C;
  --smoke:         #4A4A4A;
  --cream:         #FFF6E5;   /* creme — papel da brasa */
  --paper:         #FFFAF0;
  --bone:          #F5EDD8;
  --white:         #ffffff;
  --ink:           #1A1A1A;
  --ink-70:        #1A1A1Ab3;
  --ink-50:        #1A1A1A80;

  /* ---------- Funcionais ---------- */
  --success:       #2D9B4A;

  /* ---------- Tipografia — chunky e divertida ---------- */
  --font-display:  'Bowlby One', 'Archivo Black', Impact, sans-serif;
  --font-medium:   'Archivo Black', Impact, sans-serif;
  --font-body:     'Sora', system-ui, sans-serif;
  --font-mono:     'Space Mono', ui-monospace, monospace;

  /* ---------- Raios — generosos, divertidos ---------- */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-full: 999px;

  /* ---------- Sombras chunky 3D ---------- */
  --shadow-chunky:  6px 6px 0 var(--coal);
  --shadow-chunky-r: 6px 6px 0 var(--brasa);
  --shadow-pop:     0 8px 0 var(--crimson), 0 16px 32px rgba(168,20,26,0.3);
  --shadow-card:    0 6px 0 rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.18);

  --sticker-aspect: 3 / 4;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* Halftone pattern — pontos pop */
.halftone {
  background-image: radial-gradient(circle, var(--coal) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.halftone-light {
  background-image: radial-gradient(circle, rgba(0,0,0,0.08) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
}