/* ============================================================
   Design tokens - "Onde eu tô na fila"
   Paleta inspirada na Espanha: vermelho profundo, dourado,
   branco quente e cinza claro. Refinada, nao a bandeira crua.
   ============================================================ */

:root {
  /* ---- Cor: vermelho profundo ---- */
  --red-900: #5e0b0e;
  --red-800: #7d1416;
  --red-700: #a4161a;   /* primaria */
  --red-600: #bb2d2b;
  --red-500: #c94b46;
  --red-100: #f8e6e3;
  --red-50:  #fdf3f1;

  /* ---- Cor: amarelo dourado ---- */
  --gold-700: #a9781a;
  --gold-600: #c08a1e;
  --gold-500: #dda63a;  /* acento */
  --gold-400: #eab94f;
  --gold-300: #eccb84;
  --gold-100: #f6e7c3;
  --gold-50:  #fbf3e0;

  /* Bandeira: vermelho e ouro "de verdade" (usados no marcador da fila) */
  --flag-red: #c60b1e;
  --flag-gold: #ffc400;

  /* ---- Neutros quentes ---- */
  --cream:    #fbf6ee;  /* fundo branco quente */
  --cream-2:  #f4ecdf;  /* fundo alternado */
  --paper:    #fffdf9;
  --ink:      #241d19;  /* texto quase-preto quente */
  --ink-2:    #655b52;  /* texto secundario */
  --ink-3:    #938779;  /* texto terciario */
  --line:     #ece2d2;  /* fio de cabelo */
  --line-2:   #ddd0bc;

  /* ---- Semanticas ---- */
  --bg:        var(--cream);
  --bg-alt:    var(--cream-2);
  --surface:   var(--paper);
  --text:      var(--ink);
  --text-soft: var(--ink-2);
  --brand:     var(--red-700);
  --brand-ink: var(--red-800);
  --accent:    var(--gold-500);
  --accent-ink:var(--gold-700);
  --ok:        #3f8f5f;
  --ok-bg:     #e8f3ea;

  /* ---- Tipografia (inovadora, nada de Inter/Fraunces) ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala fluida maior e mais confortavel (clamp: min, ideal, max) */
  --fs-hero:   clamp(3rem, 8.5vw, 5.5rem);
  --fs-h1:     clamp(2.3rem, 5vw, 3.4rem);
  --fs-h2:     clamp(2rem, 4.4vw, 2.75rem);
  --fs-h3:     clamp(1.45rem, 2.4vw, 1.8rem);
  --fs-lead:   clamp(1.2rem, 2.4vw, 1.5rem);
  --fs-body:   1.1875rem;   /* ~19px */
  --fs-sm:     1.0625rem;   /* ~17px */
  --fs-xs:     0.9375rem;   /* ~15px */
  --fs-stat:   clamp(2.6rem, 6vw, 3.8rem);

  /* ---- Espacamento (base 4px) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---- Raio ---- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- Sombras (discretas, quentes) ---- */
  --sh-1: 0 1px 2px rgba(60, 42, 28, 0.05), 0 3px 10px rgba(60, 42, 28, 0.05);
  --sh-2: 0 3px 8px rgba(60, 42, 28, 0.06), 0 16px 36px rgba(60, 42, 28, 0.08);
  --sh-3: 0 10px 28px rgba(60, 42, 28, 0.10), 0 28px 70px rgba(60, 42, 28, 0.10);
  --sh-red: 0 12px 30px rgba(164, 22, 26, 0.24);
  --sh-gold: 0 10px 24px rgba(221, 166, 58, 0.30);

  /* ---- Vidro (glassmorphism - usar com parcimonia) ---- */
  --glass-bg: rgba(255, 253, 249, 0.72);
  --glass-line: rgba(255, 255, 255, 0.7);
  --glass-blur: saturate(150%) blur(16px);

  /* ---- Layout ---- */
  --maxw: 1140px;
  --maxw-narrow: 780px;
  --nav-h: 70px;

  /* ---- Transicoes ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;
}