/* ============================================ */
/* VARIABLES.CSS                                */
/* ============================================ */
/* Centro do design system da Mantik.           */
/* Todas as cores, fontes e espaçamentos        */
/* ficam aqui pra fácil manutenção.             */
/* Pra trocar a paleta inteira, edite só este   */
/* arquivo e o site todo muda.                  */
/* ============================================ */

:root {

  /* ============================================ */
  /* CORES PRINCIPAIS                             */
  /* ============================================ */

  /* Laranja Mantik (acento principal) */
  --cor-primaria:        #FF6B1A;
  --cor-primaria-hover:  #E55A0F;
  --cor-primaria-suave:  rgba(255, 107, 26, 0.12);

  /* Bases escuras (fundo de seções premium) */
  --cor-base-escura:     #0F1729;
  --cor-base-media:      #1E293B;

  /* Neutros */
  --cor-branco:          #FFFFFF;
  --cor-off-white:       #F8FAFC;
  --cor-bege-neutro:     #F1F0EC;
  --cor-cinza-claro:     #E2E8F0;
  --cor-cinza-medio:     #94A3B8;
  --cor-cinza-texto:     #64748B;
  --cor-texto-escuro:    #0F1729;

  /* Feedback (formulários, alertas) */
  --cor-sucesso:         #10B981;
  --cor-erro:            #EF4444;
  --cor-aviso:           #F59E0B;

  /* Cor do WhatsApp (oficial — não alterar) */
  --cor-whatsapp:        #25D366;
  --cor-whatsapp-hover:  #1DA851;


  /* ============================================ */
  /* TIPOGRAFIA                                   */
  /* ============================================ */

  --fonte-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tamanhos (escala modular) */
  --tamanho-xs:   0.75rem;   /* 12px - legendas */
  --tamanho-sm:   0.875rem;  /* 14px - botões */
  --tamanho-base: 1rem;      /* 16px - corpo */
  --tamanho-md:   1.125rem;  /* 18px - subtítulos */
  --tamanho-lg:   1.5rem;    /* 24px - h3 */
  --tamanho-xl:   1.75rem;   /* 28px - h2 */
  --tamanho-2xl:  2rem;      /* 32px - CTA */
  --tamanho-3xl:  2.75rem;   /* 44px - hero h1 */

  /* Pesos */
  --peso-regular:  400;
  --peso-medio:    500;
  --peso-semibold: 600;

  /* Altura de linha */
  --linha-altura-apertada: 1.1;
  --linha-altura-normal:   1.5;
  --linha-altura-confortavel: 1.7;

  /* Espaçamento entre letras (letter-spacing) */
  --letter-spacing-tight: -1px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 1.5px;


  /* ============================================ */
  /* ESPAÇAMENTOS (escala consistente)            */
  /* ============================================ */

  --espaco-xs:  0.25rem;   /* 4px */
  --espaco-sm:  0.5rem;    /* 8px */
  --espaco-md:  1rem;      /* 16px */
  --espaco-lg:  1.5rem;    /* 24px */
  --espaco-xl:  2rem;      /* 32px */
  --espaco-2xl: 3rem;      /* 48px */
  --espaco-3xl: 4rem;      /* 64px */
  --espaco-4xl: 5rem;      /* 80px */


  /* ============================================ */
  /* LAYOUT                                       */
  /* ============================================ */

  --container-max-width: 1200px;
  --container-narrow:    720px;
  --container-padding:   2rem;


  /* ============================================ */
  /* BORDAS E SOMBRAS                             */
  /* ============================================ */

  --borda-radius-sm: 6px;
  --borda-radius-md: 8px;
  --borda-radius-lg: 12px;
  --borda-radius-xl: 20px;
  --borda-radius-full: 9999px;

  --borda-fina: 0.5px solid var(--cor-cinza-claro);
  --borda-media: 1px solid var(--cor-cinza-claro);


  /* ============================================ */
  /* TRANSIÇÕES                                   */
  /* ============================================ */

  --transicao-rapida: 150ms ease;
  --transicao-normal: 250ms ease;
  --transicao-lenta:  400ms ease;


  /* ============================================ */
  /* Z-INDEX (camadas de profundidade)            */
  /* ============================================ */

  --z-base:     1;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-header:   500;
  --z-modal:    1000;
  --z-overlay:  9999;
}