/* ==========================================================================
   JM Godinho · Black Friday 2026 — Design tokens
   Fonte: Manual de Identidade Visual v2 (paleta, Nunito, curvas, ícones).
   O "black" da campanha é derivado do Azul Profundo (#0F165A) — nunca #000.
   ========================================================================== */

:root {
  /* ---- Paleta oficial ---------------------------------------------------- */
  --azul-institucional: #00167E;
  --azul-profundo: #0F165A;
  --verde: #264707;
  --vermelho-escuro: #97231A;
  --vermelho: #EA3628;
  --branco: #FFFFFF;

  /* ---- Derivações aprovadas (manual/posts) ------------------------------- */
  --azul-vivo: #0414AF;          /* curvas da capa do manual */
  --azul-luz: #2A4DCF;           /* gradiente dos posts — só brilho/curva */
  --verde-luz: #3E7A0E;          /* realce do verde em fundo escuro (selos) */
  --vermelho-hover: #F04A3D;

  /* ---- Escala "black" (Azul Profundo → quase preto) ---------------------- */
  --ink-1000: #03051A;
  --ink-950: #05081F;            /* fundo da página */
  --ink-900: #080C2E;            /* seção alternada */
  --ink-850: #0B1040;            /* card */
  --ink-800: #0F165A;            /* card elevado = Azul Profundo */

  /* ---- Texto sobre escuro ----------------------------------------------- */
  --text: #FFFFFF;
  --text-2: rgba(226, 231, 255, 0.80);   /* corpo  (≈ 11:1 sobre ink-950) */
  --text-3: rgba(226, 231, 255, 0.60);   /* apoio  (≈ 6.5:1) */
  --text-4: rgba(226, 231, 255, 0.56);   /* legal/rodapé, ≥ 14px (≈ 5.3:1 sobre ink-1000) */

  /* ---- Linhas e superfícies --------------------------------------------- */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);

  /* ---- Gradientes de marca ---------------------------------------------- */
  --grad-vermelho: linear-gradient(135deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
  --grad-azul: linear-gradient(135deg, var(--azul-luz) 0%, var(--azul-institucional) 55%, var(--azul-profundo) 100%);
  --grad-ink: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  --grad-card: linear-gradient(160deg, rgba(15, 22, 90, 0.85) 0%, rgba(8, 12, 46, 0.92) 100%);
  --glow-azul: radial-gradient(closest-side, rgba(42, 77, 207, 0.55), rgba(4, 20, 175, 0.18) 55%, transparent 100%);
  --glow-vermelho: radial-gradient(closest-side, rgba(234, 54, 40, 0.45), rgba(151, 35, 26, 0.15) 55%, transparent 100%);

  /* ---- Tipografia -------------------------------------------------------- */
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-body: 400;
  --fw-sub: 700;
  --fw-strong: 800;
  --fw-title: 900;

  /* Escala fluida (360px → 1440px) */
  --fs-display: clamp(3.25rem, 1.6rem + 8.2vw, 9.5rem);   /* BLACK FRIDAY */
  --fs-h1: clamp(2.25rem, 1.35rem + 4.2vw, 5rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 2.8vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-title: 0.95;
  --lh-sub: 1.25;
  --lh-body: 1.6;
  --tracking-title: -0.01em;
  --tracking-eyebrow: 0.22em;

  /* ---- Espaço / layout -------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section-y: clamp(4rem, 2.75rem + 5vw, 7rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Raios (cantos arredondados ecoam o símbolo) ---------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Sombras / elevação no escuro ------------------------------------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  --shadow-cta: 0 10px 30px -8px rgba(234, 54, 40, 0.65), 0 2px 0 rgba(255, 255, 255, 0.18) inset;

  /* ---- Movimento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 640ms;

  /* ---- Camadas ---------------------------------------------------------- */
  --z-header: 50;
  --z-sticky: 60;

  color-scheme: dark;
}

/* ==========================================================================
   [LP BUILD] Tokens adicionados pela página (não alteram os valores acima)
   ========================================================================== */
:root {
  /* Vermelho intermediário (derivado: Vermelho ↔ Vermelho Escuro).
     Garante texto branco AA (≈ 5.7:1) em faixas finas como o ticker. */
  --vermelho-600: #C42A1F;
  --erro: var(--vermelho-hover);                 /* ≈ 5.2:1 sobre ink-850 */

  --ticker-h: 44px;
  --header-h: 72px;

  --ring-vermelho: 0 0 0 4px rgba(234, 54, 40, 0.25);
  --focus-ring: 2px solid var(--branco);

  /* Grão (feTurbulence) — usado a ≤ 0.06 de opacidade */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}