/* ═══════════════════════════════════════════════════════════════════════
   0-root.css – AVCB Serviços
   DESIGN SYSTEM v5.0 – Paleta, Tipografia, Espaçamentos, Sombras, Gradientes
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────
     PALETA PRIMÁRIA – AZUL (Confiança, Autoridade)
     ───────────────────────────────────────────────────────── */
  --azul-950: #010C1A;
  --azul-900: #01172E;
  --azul-800: #02203D;
  --azul-700: #032C4D;
  --azul-600: #0A3D62;
  --azul-500: #1a3a6d;
  --azul-400: #05507F;
  --azul-300: #4A8AB2;
  --azul-200: #B3D4E5;
  --azul-100: #D6E8F5;
  --azul-50:  #E6F2FF;

  /* ─────────────────────────────────────────────────────────
     PALETA FOGO (CTA, Urgência)
     ───────────────────────────────────────────────────────── */
  --fogo-700: #CC2200;
  --fogo-600: #CC3D00;
  --fogo-500: #FF4D00;
  --fogo-400: #FF6B1A;
  --fogo-300: #FF8C47;
  --fogo-200: #FFB899;
  --fogo-100: #FFE4D6;
  --fogo-50:  #FFF4EF;

  /* ─────────────────────────────────────────────────────────
     PALETA ÂMBAR (Destaque, Badges)
     ───────────────────────────────────────────────────────── */
  --ambar-700: #E65100;
  --ambar-600: #F59E0B;
  --ambar-500: #D97706;
  --ambar-400: #FFB300;
  --ambar-300: #FFCE00;
  --ambar-200: #FFE082;
  --ambar-100: #FFF8DC;
  --ambar-50:  #FFFBEB;

  /* ─────────────────────────────────────────────────────────
     PALETA VERDE (WhatsApp, Sucesso, Conversão)
     ───────────────────────────────────────────────────────── */
  --verde-800: #065f46;
  --verde-700: #1B8A40;
  --verde-600: #16a34a;
  --verde-500: #25D366;
  --verde-400: #34D399;
  --verde-300: #A5F9C4;
  --verde-200: #D4EDDA;
  --verde-100: #E8F5E9;
  --verde-50:  #ECFDF5;

  /* ─────────────────────────────────────────────────────────
     PALETA VERMELHA (Alertas, Erros)
     ───────────────────────────────────────────────────────── */
  --red-700: #B71C1C;
  --red-600: #DC2626;
  --red-500: #EF4444;
  --red-400: #F87171;
  --red-300: #FCA5A5;
  --red-200: #FECACA;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  /* ─────────────────────────────────────────────────────────
     PALETA ROXA / CIAN (Diferenciação de serviços)
     ───────────────────────────────────────────────────────── */
  --roxo-600: #7E22CE;
  --roxo-500: #8B5CF6;
  --roxo-400: #A78BFA;
  --roxo-100: #EDE9FE;
  --roxo-50:  #F5F3FF;

  --cian-600: #0891B2;
  --cian-500: #06B6D4;
  --cian-400: #22D3EE;
  --cian-100: #CFFAFE;
  --cian-50:  #ECFEFF;

  /* ─────────────────────────────────────────────────────────
     PALETA NEUTRA (Cinzas, Brancos)
     ───────────────────────────────────────────────────────── */
  --cinza-900: #0F172A;
  --cinza-800: #1E293B;
  --cinza-700: #334155;
  --cinza-600: #475569;
  --cinza-500: #64748B;
  --cinza-400: #94A3B8;
  --cinza-300: #CBD5E1;
  --cinza-200: #E2E8F0;
  --cinza-100: #F1F5F9;
  --cinza-50:  #F8FAFC;

  --branco:     #FFFFFF;
  --branco-90:  rgba(255,255,255,0.90);
  --branco-80:  rgba(255,255,255,0.80);
  --branco-70:  rgba(255,255,255,0.70);
  --branco-60:  rgba(255,255,255,0.60);
  --branco-50:  rgba(255,255,255,0.50);
  --branco-40:  rgba(255,255,255,0.40);
  --branco-30:  rgba(255,255,255,0.30);
  --branco-20:  rgba(255,255,255,0.20);
  --branco-10:  rgba(255,255,255,0.10);
  --branco-5:   rgba(255,255,255,0.05);

  /* ─────────────────────────────────────────────────────────
     GRADIENTES
     ───────────────────────────────────────────────────────── */
  --grad-fogo:          linear-gradient(135deg, var(--fogo-600), var(--fogo-500), var(--fogo-400));
  --grad-fogo-alt:      linear-gradient(135deg, var(--fogo-700), var(--fogo-500));
  --grad-cta-anim:      linear-gradient(90deg, #CC2200, #FF4D00, #FFB300, #FF4D00, #CC2200);
  --grad-whatsapp:      linear-gradient(135deg, #128C7E, #25D366, #00e676);
  --grad-whatsapp-anim: linear-gradient(90deg, #128C7E, #25D366, #00e676, #25D366, #128C7E);
  --grad-azul:          linear-gradient(135deg, var(--azul-800), var(--azul-600), var(--azul-500));
  --grad-azul-escuro:   linear-gradient(135deg, var(--azul-950), var(--azul-900), #03060a);
  --grad-ambar:         linear-gradient(135deg, var(--ambar-600), var(--ambar-500), var(--ambar-400));
  --grad-verde:         linear-gradient(135deg, var(--verde-700), var(--verde-600), var(--verde-500));
  --grad-footer-dark:   radial-gradient(circle at 20% 20%, #0a1420, #03060a);

  /* ─────────────────────────────────────────────────────────
     TIPOGRAFIA
     ───────────────────────────────────────────────────────── */
  --fonte-corpo:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo:   'Barlow Condensed', 'Inter', sans-serif;
  --fonte-destaque: 'Barlow Condensed', 'Inter', sans-serif;

  /* Tamanhos */
  --t-xs:    0.75rem;   /* 12px */
  --t-sm:    0.875rem;  /* 14px */
  --t-base:  1rem;      /* 16px */
  --t-lg:    1.125rem;  /* 18px */
  --t-xl:    1.25rem;   /* 20px */
  --t-2xl:   1.5rem;    /* 24px */
  --t-3xl:   1.875rem;  /* 30px */
  --t-4xl:   2.25rem;   /* 36px */
  --t-5xl:   3rem;      /* 48px */

  /* ─────────────────────────────────────────────────────────
     ESPAÇAMENTO & LAYOUT
     ───────────────────────────────────────────────────────── */
  --container-padding: 1.25rem;
  --container-max:     1280px;
  --esp-1:   0.25rem;
  --esp-2:   0.5rem;
  --esp-3:   0.75rem;
  --esp-4:   1rem;
  --esp-5:   1.25rem;
  --esp-6:   1.5rem;
  --esp-8:   2rem;
  --esp-10:  2.5rem;
  --esp-12:  3rem;
  --esp-16:  4rem;
  --esp-20:  5rem;

  /* ─────────────────────────────────────────────────────────
     BORDAS
     ───────────────────────────────────────────────────────── */
  --raio-sm:    0.25rem;
  --raio-md:    0.5rem;
  --raio-lg:    0.75rem;
  --raio-xl:    1rem;
  --raio-2xl:   1.5rem;
  --raio-full:  9999px;

  /* ─────────────────────────────────────────────────────────
     SOMBRAS
     ───────────────────────────────────────────────────────── */
  --sombra-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
  --sombra-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --sombra-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --sombra-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --sombra-2xl:     0 25px 50px -12px rgba(0,0,0,0.25);
  --sombra-card:    0 10px 20px -5px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02);
  --sombra-card-hover: 0 20px 30px -10px rgba(0,0,0,0.15);
  --glow-fogo:      0 0 12px rgba(255,77,0,0.5);
  --glow-fogo-forte:0 0 24px rgba(255,77,0,0.7);
  --glow-verde:     0 0 12px rgba(37,211,102,0.4);
  --glow-verde-forte:0 0 20px rgba(37,211,102,0.6);
  --glow-ambar:     0 0 12px rgba(245,158,11,0.4);
  --glow-azul:      0 0 12px rgba(26,58,109,0.4);

  /* ─────────────────────────────────────────────────────────
     TRANSIÇÕES
     ───────────────────────────────────────────────────────── */
  --trans-rapida:  150ms ease;
  --trans-media:   250ms ease;
  --trans-mola:    350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-saida:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ─────────────────────────────────────────────────────────
     CAMADAS (Z-INDEX)
     ───────────────────────────────────────────────────────── */
  --camada-header-root:  9000;
  --camada-header-drop:  9100;
  --camada-wpp-float:    9999;
  --camada-cookie:       10000;

  /* ─────────────────────────────────────────────────────────
     HEADER TOKENS (usados em main.css)
     ───────────────────────────────────────────────────────── */
  --header-azul:         var(--azul-800);
  --header-azul-escuro:  var(--azul-950);
  --header-azul-medio:   var(--azul-700);
  --header-azul-claro:   var(--azul-400);
  --header-laranja:      var(--fogo-500);
  --header-laranja-hover:var(--fogo-400);
  --header-verde:        var(--verde-500);
  --header-verde-hover:  var(--verde-600);
  --header-branco:       var(--branco);
  --header-branco-dim:   var(--branco-80);
  --header-container:    1280px;
  --header-topo-alt:     40px;
  --header-principal-alt:72px;
  --header-trans-rapida: 150ms ease;
  --header-trans-media:  250ms ease;

  /* ─────────────────────────────────────────────────────────
     DADOS DE CONTATO (usados pelo sistema Hoot)
     ═══════════════════════════════════════════════════════════ */
  --contact-whatsapp-link:   "https://wa.me/553193691563";
  --contact-whatsapp-number: "(31) 9369-1563";
  --contact-phone-link:      "tel:+553193691563";
  --contact-phone-number:    "(31) 9369-1563";
  --hoot-email:              "mailto:avcbservicostreinamento@gmail.com";
  --hoot-email-text:         "avcbservicostreinamento@gmail.com";
  --facebook-link:           "https://facebook.com/avcbservicos";
  --instagram-link:          "https://instagram.com/avcbservicos";

  /* ─────────────────────────────────────────────────────────
     CORES POR SERVIÇO (snippets)
     ───────────────────────────────────────────────────────── */
  --snip-ppcip:     var(--fogo-500);
  --snip-renovacao: var(--azul-600);
  --snip-dispensa:  var(--verde-600);
  --snip-inspecao:  var(--roxo-500);
  --snip-instalacao:var(--ambar-600);
  --snip-extintores:var(--red-600);
}

/* ═══════════════════════════════════════════════════════════
   TEMAS POR PÁGINA (sobrescrevem variáveis contextuais)
   ═══════════════════════════════════════════════════════════ */
body.page-home      { --page-accent: var(--fogo-500); --page-bg: var(--cinza-50); }
body.page-sobre     { --page-accent: var(--azul-600); --page-bg: var(--cinza-100); }
body.page-contato   { --page-accent: var(--verde-500); --page-bg: var(--branco); }
body.page-ppcip,
body.page-avcb,
body.page-renovacao { --page-accent: var(--fogo-500); --page-bg: var(--cinza-50); }
body.page-ddl       { --page-accent: var(--verde-600); --page-bg: var(--cinza-50); }
body.page-laudos    { --page-accent: var(--roxo-500); --page-bg: var(--cinza-50); }
body.page-sst,
body.page-ltcat     { --page-accent: var(--verde-600); --page-bg: var(--cinza-50); }