/* ==========================================================================
   Aracê Saúde | tokens.css
   Fonte da verdade do design system. Toda mudança de cor, tipografia ou
   espaçamento se faz aqui, nunca página a página.

   Cores extraídas dos SVGs oficiais da marca (assets/), não estimadas.
   Contrastes calculados, não presumidos. Ver bloco "Regra de acento".
   ========================================================================== */

:root {

  /* --- Cores da marca ---------------------------------------------------
     Petróleo profundo e teal vêm do símbolo. Dourados vêm do wordmark e dos
     ícones. Paleta quente vem dos ícones de serviço e do sol nascente.      */

  --petroleo:        #0c3443;  /* 13,23:1 sobre branco */
  --petroleo-claro:  #034455;
  --dourado:         #6e4f05;  /*  7,54:1 sobre branco | 1,75:1 sobre petróleo */
  --dourado-medio:   #946c0a;  /*  4,76:1 sobre branco | 2,78:1 sobre petróleo */
  --amarelo-sol:     #f2e27b;  /* 10,04:1 sobre petróleo */
  --amarelo-vivo:    #ffde59;
  --ambar:           #f9a10b;  /*  6,38:1 sobre petróleo */
  --turquesa:        #1698b6;
  --turquesa-verde:  #3ba297;
  --verde-profundo:  #093f3c;
  --terracota:       #bf4949;
  --terracota-esc:   #874336;
  --azul-cinza:      #648997;

  /* --- Regra de acento --------------------------------------------------
     O dourado da marca FALHA em contraste sobre o petróleo (1,75:1). Nunca
     use --dourado como texto em fundo escuro. Sobre fundo escuro o acento é
     o amarelo do sol nascente (10,04:1). Estes dois tokens existem para que
     essa troca seja automática e não dependa de memória de quem edita.
     A classe .section-dark redefine --acento sozinha.                       */

  --acento:          var(--dourado);        /* padrão: fundo claro */
  --acento-forte:    var(--dourado-medio);

  /* --- Neutros ---------------------------------------------------------- */

  --branco:          #ffffff;
  --quase-branco:    #fdfcfa;
  --areia:           #f5f2ec;
  --cinza-borda:     #e2ddd4;
  --cinza-texto:     #5a5751;
  --tinta:           #1c2b31;  /* texto de corpo, 12,9:1 sobre branco */

  /* --- Papéis semânticos ------------------------------------------------ */

  --fundo:           var(--branco);
  --fundo-alt:       var(--areia);
  --texto:           var(--tinta);
  --texto-suave:     var(--cinza-texto);
  --borda:           var(--cinza-borda);
  --titulo:          var(--petroleo);
  --link:            var(--petroleo);
  --link-hover:      var(--dourado);

  /* --- Tipografia -------------------------------------------------------
     Cormorant Garamond (serifada display) para títulos.
     Jost (sans geométrica) para corpo e interface. Par vindo do logo.       */

  --fonte-titulo: "Cormorant Garamond", "Georgia", serif;
  --fonte-corpo:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Escala tipográfica fluida. clamp evita media query para tamanho. */
  --t-xs:   0.8125rem;                                  /* 13px */
  --t-sm:   0.9375rem;                                  /* 15px */
  --t-base: 1.0625rem;                                  /* 17px */
  --t-md:   1.1875rem;                                  /* 19px */
  --t-lg:   clamp(1.375rem, 1.1rem + 1vw,  1.75rem);
  --t-xl:   clamp(1.75rem,  1.3rem + 1.9vw, 2.5rem);
  --t-2xl:  clamp(2.25rem,  1.6rem + 2.8vw, 3.375rem);
  --t-3xl:  clamp(2.75rem,  1.8rem + 4vw,   4.5rem);

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;

  --altura-titulo: 1.12;
  --altura-corpo:  1.65;
  --espaco-letra:  0.01em;
  --espaco-letra-caps: 0.14em;

  /* --- Espaçamento base-4 ------------------------------------------------ */

  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  20px;
  --e-6:  24px;
  --e-8:  32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-20: 80px;
  --e-24: 96px;
  --e-32: 128px;

  /* Respiro vertical de seção, fluido. */
  --secao-y: clamp(var(--e-16), 8vw, var(--e-32));

  /* --- Raios ------------------------------------------------------------- */

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 999px;

  /* --- Sombras ----------------------------------------------------------- */

  --s-1: 0 1px 2px rgba(12, 52, 67, 0.06);
  --s-2: 0 2px 8px rgba(12, 52, 67, 0.08);
  --s-3: 0 8px 24px rgba(12, 52, 67, 0.10);
  --s-4: 0 16px 48px rgba(12, 52, 67, 0.14);

  /* --- Layout ------------------------------------------------------------ */

  --largura-max:   1200px;
  --largura-texto: 68ch;   /* medida de leitura confortável */
  --gutter:        clamp(var(--e-5), 4vw, var(--e-10));

  /* --- Movimento --------------------------------------------------------- */

  --transicao: 200ms cubic-bezier(0.2, 0, 0.2, 1);
  --transicao-lenta: 400ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Inversão para fundo escuro.

   HISTÓRICO DE UM ERRO, para não se repetir: a primeira versão desta regra
   listava .section-dark, .page-header e .site-footer, mas esquecia .cta. O
   .cta tem fundo petróleo, então herdava --titulo (petróleo) e pintava o
   título de petróleo sobre petróleo. O bloco inteiro ficava invisível, e os
   botões junto.

   A lição: a lista de seletores não pode depender de memória. A classe
   utilitária .invertido existe agora justamente para isso. Qualquer bloco
   novo com fundo escuro deve receber .invertido, ou ser adicionado ao :is()
   abaixo. Se o fundo é escuro e os tokens não inverteram, o texto some.
   -------------------------------------------------------------------------- */

:is(.site-header, .section-dark, .site-footer, .cta, .invertido) {
  --fundo:        var(--petroleo);
  --fundo-alt:    var(--petroleo-claro);
  --texto:        #e8eef0;                 /* 12,1:1 sobre petróleo */
  --texto-suave:  #b3c3ca;                 /*  7,2:1 sobre petróleo */
  --titulo:       var(--branco);
  --borda:        rgba(255, 255, 255, 0.16);
  --link:         var(--branco);
  --link-hover:   var(--amarelo-sol);

  --acento:       var(--amarelo-sol);      /* 10,04:1 sobre petróleo */
  --acento-forte: var(--ambar);            /*  6,38:1 sobre petróleo */

  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Equilíbrio da paleta.

   A marca é liderada pelo dourado: o wordmark é dourado, o sol nascente é
   dourado. O petróleo vem do símbolo e é um contraponto, não o protagonista.

   Na primeira versão o petróleo ocupava o cabeçalho de TODA página interna,
   mais a faixa de método, mais o CTA, mais o rodapé. Somado, o site ficava
   mais azul do que dourado, o que não descreve a marca.

   Agora o petróleo se restringe a três momentos por página, no máximo: a
   faixa escura, o CTA e o rodapé. O cabeçalho interno virou claro e quente,
   com o sol nascente no gradiente, e é o dourado que assina.
   -------------------------------------------------------------------------- */

.page-header {
  --acento:       var(--dourado);          /* 6,75:1 sobre areia */
  --acento-forte: var(--dourado-medio);
  --titulo:       var(--petroleo);         /* 11,84:1 sobre areia */
  --texto:        var(--tinta);
  --texto-suave:  var(--cinza-texto);      /* 6,44:1 sobre areia */
  --borda:        var(--cinza-borda);
}

/* Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transicao: 0ms;
    --transicao-lenta: 0ms;
  }
}