/* ==========================================================================
   OxiChemical — Design Tokens
   Camada única de decisão visual. Trocar a marca do projeto = trocar
   os tokens do bloco "Marca" e as escalas derivadas acompanham.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Marca — cores oficiais extraídas da logo
     ------------------------------------------------------------------ */
  --brand-navy: #042550;
  --brand-green: #509022;

  /* Escala navy — derivada da primária */
  --navy-950: #010e21;
  --navy-900: #021831;
  --navy-800: #032042;
  --brand-navy-700: #042550; /* âncora da marca */
  --navy-600: #073464;
  --navy-500: #0d4a8a;
  --navy-400: #2c6bb0;
  --navy-300: #6d9bcf;
  --navy-200: #aec8e6;
  --navy-100: #d9e6f5;
  --navy-050: #eef4fb;

  /* Escala verde — acento, usado com parcimônia */
  --green-800: #2f560d; /* texto pequeno sobre foto — atinge 4.5:1 */
  --green-700: #3f731a;
  --green-600: #509022; /* âncora da marca */
  --green-500: #63ab2d;
  --green-400: #7cc247;
  --green-200: #c5e6a8;
  --green-100: #e0f2d1;
  --green-050: #f1f9e9;

  /* ------------------------------------------------------------------
     Neutros — light mode (única aparência do projeto)
     ------------------------------------------------------------------ */
  --white: #ffffff;
  --snow: #fbfcfe;
  --mist: #f3f6fa;
  --fog: #e8eef6;

  /* Texto — tinta com viés navy, nunca preto puro (padrão Apple) */
  --ink: #08182f;
  --ink-2: #445570;
  --ink-3: #74839a;
  --ink-inverse: #ffffff;

  /* Linhas e separadores */
  --line: rgba(4, 37, 80, 0.09);
  --line-strong: rgba(4, 37, 80, 0.16);

  /* ------------------------------------------------------------------
     Superfícies — chapadas, sem vidro. O filete de 1px é o elemento
     estrutural do layout (padrão editorial), não a sombra.
     ------------------------------------------------------------------ */
  --surface: #ffffff;
  --surface-alt: #fbfcfe;
  --surface-panel: #ffffff;

  /* ------------------------------------------------------------------
     Sombras — só onde há sobreposição real (menu suspenso).
     Nenhum elemento do fluxo normal recebe sombra.
     ------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(4, 37, 80, 0.05);
  --shadow-panel: 0 12px 32px rgba(4, 37, 80, 0.1), 0 2px 6px rgba(4, 37, 80, 0.05);

  /* ------------------------------------------------------------------
     Superfície escura — painéis sobre navy (mapa e rodapé)
     ------------------------------------------------------------------ */
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --on-dark-ink: rgba(255, 255, 255, 0.7);
  --on-dark-ink-strong: #ffffff;

  /* ------------------------------------------------------------------
     Tipografia
     Stack de sistema: entrega SF Pro em Apple, Segoe UI em Windows e
     Roboto em Android — cara nativa, zero requisição de webfont.
     ------------------------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida — clamp(mínimo mobile, preferido, máximo desktop) */
  --fs-display: clamp(2.5rem, 1.45rem + 4.4vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-normal: 1.5;
  --lh-relaxed: 1.62;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking — títulos grandes fecham, textos pequenos abrem (padrão Apple) */
  --ls-display: -0.035em;
  --ls-title: -0.024em;
  --ls-body: -0.011em;
  --ls-eyebrow: 0.14em;

  /* ------------------------------------------------------------------
     Espaçamento — base 4px
     ------------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Respiro vertical de seção — fluido */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  /* Altura total ocupada pelo header fixo (padding + pílula).
     Usada por scroll-padding e pelo respiro superior do hero. */
  --header-h: 72px;

  /* ------------------------------------------------------------------
     Raios
     ------------------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-pill: 999px;

  /* ------------------------------------------------------------------
     Movimento — curvas do ecossistema Apple
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);   /* saída suave, a curva assinatura */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* leve overshoot */

  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-slower: 900ms;

  /* ------------------------------------------------------------------
     Camadas
     ------------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 100;
  /* O painel mobile fica ABAIXO do header: o botão de fechar (X) vive no
     header e precisa continuar visível e clicável com o menu aberto. */
  --z-overlay: 300;
  --z-header: 400;
  --z-dropdown: 450;
  --z-modal: 500;

  /* ------------------------------------------------------------------
     Breakpoints — referência de documentação.
     Custom properties não são avaliadas dentro de @media, portanto os
     valores literais correspondentes são usados nas media queries.
     mobile 320 · tablet 768 · desktop 1024 · large 1440 · xlarge 1920
     ------------------------------------------------------------------ */
  --bp-mobile: 320px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-large: 1440px;
  --bp-xlarge: 1920px;
}

/* No desktop a pílula do header é mais alta — mantém as âncoras corretas */
@media (min-width: 1024px) {
  :root {
    --header-h: 80px;
  }
}