/* ============================================================
   DESIGN TOKENS — INSS de Obra Paulínia
   Estilo: Trust & Authority (navy + âmbar) | Tipografia: Lexend + Source Sans 3
   ============================================================ */
:root {
  /* Cores semânticas — modo claro (padrão) */
  --color-primary: #0F2A4A;          /* Navy profundo — autoridade */
  --color-primary-hover: #0A1F38;
  --color-on-primary: #FFFFFF;
  --color-secondary: #334155;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B45309;           /* Âmbar/dourado queimado — CTA secundário, destaques */
  --color-accent-hover: #92400E;
  --color-on-accent: #FFFFFF;
  --color-cta: #0369A1;              /* Azul de ação — CTA primário (Simular economia) */
  --color-cta-hover: #075985;
  --color-on-cta: #FFFFFF;
  --color-success: #15803D;          /* Verde — economia, números positivos */
  --color-success-bg: #F0FDF4;
  --color-on-success: #FFFFFF;
  --color-destructive: #B91C1C;      /* Vermelho — risco, multa, urgência */
  --color-destructive-bg: #FEF2F2;
  --color-on-destructive: #FFFFFF;

  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-foreground: #0F172A;
  --color-foreground-muted: #475569;
  --color-muted: #EEF2F6;
  --color-muted-foreground: #64748B;
  --color-border: #E2E8F0;
  --color-ring: #0369A1;

  /* WhatsApp brand (uso pontual, botão dedicado) */
  --color-whatsapp: #128C7E;
  --color-whatsapp-hover: #0E6B60;

  /* Glow menu — cor de destaque por item de navegação */
  --glow-blue: rgba(59, 130, 246, 0.18);
  --glow-amber: rgba(180, 83, 9, 0.16);
  --glow-green: rgba(21, 128, 61, 0.16);
  --glow-red: rgba(185, 28, 28, 0.16);
  --glow-purple: rgba(126, 34, 206, 0.16);

  /* Tipografia */
  --font-heading: 'Lexend', system-ui, -apple-system, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.25rem;    /* 36px */
  --fs-3xl: 2.75rem;    /* 44px */
  --fs-4xl: 3.5rem;     /* 56px */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Espaçamento — escala 4/8pt, densidade padrão (marketing/landing) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Raio, sombra, elevação */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(3, 105, 161, 0.35);

  --container-max: 1200px;
  --container-narrow: 800px;

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 100;
}