/* ==============================
   VARIÁVEIS CSS (Custom Properties)
   Paleta de cores, tipografia, espaçamentos e valores reutilizáveis.

   POR QUE CUSTOM PROPERTIES:
   Centralizar todos os valores visuais aqui garante consistência
   e permite que qualquer alteração de marca (cor, fonte, espaçamento)
   seja feita em um único arquivo, propagando para todo o site.
   Para LLMs: este arquivo funciona como o "design system" do site —
   cada variável define uma decisão de design reutilizada nos demais CSS.
   ============================== */

:root {
  /* ---- Cores da marca ----
     Navy (#113863): cor institucional principal — usada no header, footer, fundos de seção.
     Dark Navy (#001e49): variação mais escura para gradientes e hover sobre navy.
     Gold (#c4af6b): cor de destaque e ação — botões, links, CTAs. Transmite sofisticação.
     Orange (#f2a61c): cor de acento secundário — usada em detalhes pontuais.
     Estas cores foram escolhidas para comunicar confiança (navy) e qualidade premium (gold). */
  --color-brand-navy: #113863;
  --color-brand-dark-navy: #001e49;
  --color-brand-gold: #c4af6b;
  --color-brand-gold-hover: #b89d55;
  --color-brand-orange: #f2a61c;

  /* ---- Cores funcionais ----
     WhatsApp Green: tom dessaturado para integrar com a paleta sem parecer "colado".
     O verde padrão do WhatsApp (#25D366) foi substituído por este tom para
     manter coerência visual com o restante do design. */
  --color-whatsapp-green: #558f64;
  --color-whatsapp-green-hover: #4a7b56;

  /* Texto e fundos — valores neutros que funcionam em qualquer contexto */
  --color-text-primary: #222222;
  --color-text-secondary: #333333;
  --color-text-body: #555555;
  --color-text-muted: #666666;
  --color-text-disabled: #999999;
  --color-text-on-dark-background: #eaeaea;
  --color-text-on-dark: #eaeaea;
  --color-text-white: #ffffff;
  --color-background-white: #ffffff;
  --color-background-light-gray: #f5f5f5;
  --color-background-disabled: #e2e8f0;
  --color-border-light: #dddddd;

  /* Cores de estado — feedback visual para erros, badges e estados desabilitados */
  --color-error-red: #e53e3e;
  --color-badge-outofstock: #718096;
  --color-text-disabled-button: #a0aec0;

  /* ---- Tipografia ----
     Inter: fonte sans-serif moderna, ótima legibilidade em telas.
     Usada em todo o corpo de texto, navegação e informações técnicas.
     Cardo: fonte serifada clássica, usada em elementos decorativos
     (taglines, destaques) para criar contraste tipográfico com a Inter. */
  --font-family-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-decorative: 'Cardo', 'Georgia', serif;

  /* Escala de pesos — de light (300) a black (900).
     Regular (400) para corpo, semibold (600) para subtítulos,
     bold (700) para headings, black (900) para números de destaque. */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Escala tipográfica modular — cada nível cresce ~25% em relação ao anterior.
     Base 16px garante legibilidade padrão; escala sobe até 48px para h1. */
  --font-size-xsmall: 0.75rem;    /* 12px — datas de reviews, badges, copyright */
  --font-size-small: 0.875rem;    /* 14px — captions, metadados, datas */
  --font-size-base: 1rem;         /* 16px — corpo de texto padrão */
  --font-size-medium: 1.125rem;   /* 18px — parágrafos de destaque */
  --font-size-large: 1.25rem;     /* 20px — h4, subtítulos secundários */
  --font-size-xlarge: 1.5rem;     /* 24px — h3, títulos de cards */
  --font-size-2xlarge: 2rem;      /* 32px — h2, títulos de seção */
  --font-size-3xlarge: 2.5rem;    /* 40px — h1 em desktop */
  --font-size-4xlarge: 3rem;      /* 48px — hero headings */

  /* Alturas de linha — tight para headings (compacto),
     normal para corpo (leitura confortável),
     relaxed para textos longos (artigos de blog). */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ---- Espaçamentos ----
     Escala de 8px — cada nível é múltiplo de 8px para alinhamento consistente.
     Usados para margens, paddings e gaps entre elementos. */
  --spacing-xs: 0.5rem;    /* 8px — espaço mínimo (entre ícone e texto) */
  --spacing-sm: 0.75rem;   /* 12px — padding interno de badges e tags */
  --spacing-md: 1rem;      /* 16px — espaço padrão entre parágrafos */
  --spacing-lg: 1.5rem;    /* 24px — gap entre cards, padding de containers */
  --spacing-xl: 2rem;      /* 32px — separação entre blocos dentro de seção */
  --spacing-2xl: 3rem;     /* 48px — margem entre seções no mobile */
  --spacing-3xl: 4rem;     /* 64px — margem entre seções no desktop */
  --spacing-section-vertical: 4rem;  /* Padding vertical padrão de cada <section> */
  --spacing-card-gap: 1.5rem;       /* Gap entre cards em grids */

  /* ---- Layout ----
     1230px: largura máxima do conteúdo — suficiente para 3 colunas
     sem parecer esticado em monitores ultrawide.
     Header heights: valores fixos para cálculos de offset (scroll-to-section). */
  --max-width-content: 1230px;
  --header-height-desktop: 85px;
  --header-height-mobile: 60px;
  --email-whatsapp-telefone-horario-e-youtube_faixa-escura-no-topo-da-pagina-height: 40px;

  /* ---- Bordas e sombras ----
     Três níveis de arredondamento (sutil → médio → pílula)
     e três níveis de sombra (leve → média → forte) para hierarquia de elevação. */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius-round: 9999px;

  --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* ---- Transições ----
     Fast: hover de links e ícones (resposta imediata).
     Default: abertura de menus, mudanças de estado (fluidez perceptível).
     Slow: animações de entrada de seções e modais. */
  --transition-fast: 0.15s ease;
  --transition-default: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ---- Z-index (camadas) ----
     Pilha ordenada para evitar conflitos de sobreposição.
     Incrementos de 100 deixam espaço para inserções futuras.
     Dropdown (100) < Header fixo (200) < Menu mobile (300) < WhatsApp (400) < Overlay (500). */
  --z-index-dropdown: 100;
  --z-index-sticky-header: 200;
  --z-index-mobile-menu: 300;
  --z-index-whatsapp-button: 400;
  --z-index-overlay: 500;
}