/**
 * Juninho Los Hermanos — Deputado Federal 7050
 * Design Tokens (tokens.css) — v2 Inspirada no Brandbook & Layout de Referência
 * Cores profundas (Navy #0A1C36), arcos energéticos, blocos sólidos de contraste,
 * mosaicos modulares e tipografia de impacto com botões pill sem quebra.
 */

:root {
  /* ==========================================================================
     Colors — Paleta Oficial v2 (Inspirada no Layout de Referência)
     ========================================================================== */
  /* Fundos Principais e Seções Escuras */
  --color-navy-deep: #0A1C36;              /* Fundo principal escuro e hero */
  --color-navy-surface: #0F2648;           /* Superfície de cartões escuros e história */
  --color-navy-petrol: #0D2D44;            /* Azul petróleo clássico de campanha */
  
  /* Cores de Ação, Energia e Contraste */
  --color-orange-avante: #FF6B00;          /* Laranja vibrante de ação */
  --color-orange-dark: #E05E00;            /* Laranja hover */
  --color-cyan-electric: #0084D6;          /* Ciano / Azul elétrico institucional */
  --color-cyan-teal: #00A896;              /* Turquesa / Verde-água dos arcos */
  --color-amber-solar: #FFAA00;            /* Dourado solar / Minas Gerais */
  
  /* Seções de Contraste Elegante (Claras) */
  --color-bg-light: #F4F7FB;               /* Off-white / Gelo para seções contrastantes */
  --color-bg-sand: #FDFBF7;                /* Areia suave do brandbook */
  --color-white: #FFFFFF;                  /* Branco puro para cards e destaques */
  
  /* WhatsApp e Engajamento */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5D;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.45);
  
  /* Textos */
  --color-text-white: #FFFFFF;
  --color-text-light-secondary: #CBD5E1;
  --color-text-light-muted: #94A3B8;
  --color-text-dark: #0A1C36;
  --color-text-dark-secondary: #334155;
  --color-text-dark-muted: #64748B;
  
  /* Bordas */
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-border-light: #E2E8F0;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-hero: clamp(2.25rem, 4.8vw, 3.6rem);
  --text-h1: clamp(1.9rem, 3.6vw, 2.6rem);
  --text-h2: clamp(1.6rem, 2.8vw, 2.2rem);
  --text-h3: clamp(1.2rem, 2vw, 1.5rem);
  --text-h4: clamp(1.05rem, 1.6vw, 1.25rem);
  --text-body-lead: 1.15rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-badge: 0.75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.6;

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-section-sm: 3.5rem;
  --space-section-lg: 5.5rem;

  /* ==========================================================================
     Border Radius
     ========================================================================== */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;

  /* ==========================================================================
     Shadows & Glows
     ========================================================================== */
  --shadow-card: 0 8px 30px rgba(10, 28, 54, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(10, 28, 54, 0.16);
  --shadow-dark-card: 0 12px 35px rgba(0, 0, 0, 0.45);
  --shadow-nav: 0 4px 25px rgba(0, 0, 0, 0.35);
  --shadow-orange-glow: 0 6px 24px rgba(255, 107, 0, 0.45);
  --shadow-cyan-glow: 0 6px 24px rgba(0, 132, 214, 0.45);

  /* ==========================================================================
     Layout & Dimensions
     ========================================================================== */
  --header-height-desktop: 4.75rem;
  --header-height-mobile: 4.25rem;
  --container-max-width: 1240px;
  --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}