/* Tokens de design.
 *
 * Este e o UNICO arquivo onde valor bruto pode aparecer. Todo o resto do CSS
 * consome var(). O teste tests/test_css.php barra px solto de espacamento fora
 * daqui, que e o que garante a escala unica.
 */

:root {
  /* ---------------------------------------------------------------- cores
   * Amostradas do kit global do Elementor e da frequencia real de uso no CSS
   * da pagina. O site e ESCURO: os fundos dominantes sao #254939 e #131D18.
   */
  --c-forest-900: #131d18;  /* quase preto esverdeado, secoes de respiro  */
  --c-forest-800: #12241c;
  --c-forest-700: #1e3d2f;  /* primaria do kit                            */
  --c-forest-600: #254939;  /* fundo de secao mais usado                  */
  --c-gold:       #c39e65;  /* acento do kit, a cor da marca              */
  --c-gold-dim:   #a8864f;
  /* O MESMO dourado do kit (matiz 0.101, saturacao 0.439), so escurecido ate
   * ficar legivel sobre o creme: 4.61:1, contra 2.31:1 do dourado cheio. E o
   * acento das dobras claras: 5.04:1 sobre o creme e 4.57:1 ainda por cima do
   * cartao, que e levemente mais escuro que a dobra. Branco sobre ele da
   * 5.45:1, entao o botao primario continua funcionando no hover. */
  --c-gold-deep:  #846433;
  --c-cream:      #f7f6f2;
  --c-white:      #ffffff;
  --c-brown:      #3a2a1b;  /* secundaria do kit                          */

  /* Papeis semanticos: o CSS usa ESTES, nunca as cores cruas acima.
   * Trocar a marca vira trocar as 4 linhas de cima. */
  --c-bg:            var(--c-forest-700);
  --c-surface:       var(--c-forest-600);
  --c-surface-deep:  var(--c-forest-900);
  --c-surface-light: var(--c-cream);

  --c-ink:           var(--c-cream);
  --c-ink-strong:    var(--c-white);
  /* ⚠️ SOLIDO, nao rgba. E a mesma cor que o alfa produzia sobre o verde
   * (#bac2bb, 6.53:1), mas sem composicao de transparencia: texto com alfa
   * sobre fundo claro sai com as bordas das letras tingidas pelo subpixel do
   * Windows, e o cliente leu isso como "quebra de cor" no meio da frase. */
  --c-ink-muted:     #bac2bb;
  --c-ink-on-light:  var(--c-forest-900);
  --c-ink-on-light-muted: #4e665a;   /* 5.76:1 no creme, ja solido */

  --c-accent:        var(--c-gold);
  --c-on-accent:     var(--c-forest-900);
  --c-border:        rgba(195, 158, 101, 0.28);

  /* Veu de superficie do cartao dentro de uma dobra. E token, e nao um
   * color-mix repetido em cada componente, porque dentro de .section--light
   * ele precisa VIRAR escuro: cartao creme sobre fundo creme desaparece. */
  --c-wash:          color-mix(in srgb, var(--c-cream) 5%, transparent);

  /* Painel embutido numa dobra (o cartao do passo, a faixa de credenciais) e
   * fundo de campo de formulario. Sao tokens pelo mesmo motivo do --c-wash:
   * dentro de .section--light um veu ESCURO sobre creme vira cinza sujo, e um
   * campo escuro fica com texto escuro dentro. */
  --c-inset:         color-mix(in srgb, var(--c-forest-900) 40%, transparent);
  --c-field:         color-mix(in srgb, var(--c-forest-900) 60%, transparent);
  --c-border-light:  rgba(19, 29, 24, 0.12);

  /* Veu escuro por cima de foto. O zoom e o badge da lupa precisam de fundo
   * proprio: em foto clara um icone sem veu some. */
  --c-scrim:        rgba(19, 29, 24, 0.82);
  --c-scrim-strong: rgba(19, 29, 24, 0.93);

  /* Foco visivel: nao herda a cor do texto, senao some em fundo dourado. */
  --c-focus: #ffd58a;

  /* ----------------------------------------------------------- espacamento
   * Escala unica, base 4px, razao aproximada 1.5. E a resposta ao pedido de
   * "corrigir os espacamentos": no original cada bloco tem um valor escolhido
   * a mao no Elementor, sem relacao entre si.
   */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 10rem;     /* 160px */
  --space-12: 12rem;     /* 192px */

  /* Ritmo vertical entre secoes: fluido, sem media query.
   *
   * ⚡ UMA curva so. Os degraus menores sao derivados dela por fator, nao
   * desenhados a parte. Antes cada um tinha a sua propria inclinacao e o seu
   * proprio teto (9vw ate 8rem, 6vw ate 4rem, 3.5vw ate 3rem), entao a razao
   * entre eles mudava com a largura da janela: aos 1067px a dobra "tight" ja
   * estava congelada em 64px enquanto a dobra cheia ainda crescia ate 128px, e
   * a proporcao caia sozinha de 0.66 para 0.50. Era isso que fazia "umas
   * dobras maiores que outras" sem ninguem ter editado nada.
   * Agora a razao 1 : 0.625 : 0.375 vale em QUALQUER largura.
   */
  --section-y: clamp(var(--space-8), 9vw, var(--space-10));  /*  64 -> 128 */
  --section-y-tight: calc(var(--section-y) * 0.625);         /*  40 ->  80 */
  /* Usado quando a dobra seguinte precisa encostar nesta. O vao morto que o
   * cliente apontou era padding cheio embaixo somado a padding cheio em cima. */
  --section-y-hair: calc(var(--section-y) * 0.375);          /*  24 ->  48 */

  /* ----------------------------------------------------------- tipografia
   * Escala fluida: o tamanho interpola com a largura da viewport, entao nao
   * existe degrau feio no breakpoint.
   */
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.90vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.81rem + 1.32vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.11rem + 1.90vw, 3.43rem);
  /* Passo 6 existe so para o titulo do hero. O teto de 4.5rem (72px) fica bem
   * abaixo do limite de 6rem: acima disso a pagina grita em vez de desenhar. */
  --step-6:  clamp(2.99rem, 2.40rem + 2.90vw, 4.50rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.65;

  --tracking-wide: 0.08em;   /* rotulos em caixa alta */

  /* ---------------------------------------------------------------- forma */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------ iconografia
   * TRES tamanhos, so. Antes havia 34px, 44px, 48px e 56px escolhidos caso a
   * caso, que e o mesmo vicio do Elementor que a escala de espacamento ja
   * tinha resolvido para margem e vao.
   *
   * O criterio nao e a secao, e QUANTO TEXTO o icone responde por:
   *   sm -> rotulo curto de uma linha. O icone e o marcador da lista.
   *   md -> uma frase inteira, ou um titulo com descricao curta.
   *   lg -> abre um bloco de varios paragrafos. O icone e o brasao dele.
   *
   * Os valores sao os mesmos de --space-6, --space-7 e --space-8 (32, 48, 64),
   * entao icone e vao crescem na mesma escala em vez de brigarem.
   */
  /* Em rem, nao em px: --space-6/7/8 sao 2rem/3rem/4rem e a escala tipografica
   * inteira e clamp() em rem. Com px, quem aumenta a fonte padrao do navegador
   * ve a legenda crescer e o icone ficar parado, que e a mesma briga de
   * 34/44/56 com outro nome. Em 16px de raiz o resultado e pixel identico. */
  --icon-sm: 2rem;   /* 32px */
  --icon-md: 3rem;   /* 48px */
  --icon-lg: 4rem;   /* 64px */

  --measure: 65ch;          /* largura confortavel de leitura */
  --page-max: 1280px;
  --gutter: clamp(var(--space-4), 5vw, var(--space-7));

  /* Altura do header grudento. Mora aqui, e nao no components.css, porque o
   * scroll-padding-top das ancoras (base.css) precisa do MESMO numero: se os
   * dois andarem separados, o titulo da secao para escondido atras do header.
   * O +1px e a borda de baixo. */
  --header-pad-y:  var(--space-4);
  /* O piso e 44px e nao 40px porque o logo tambem e o link para o topo:
   * no celular ele e alvo de DEDO. Sai daqui, e nao de um min-height no
   * link, senao --header-h passaria a mentir 4px e a ancora pararia com o
   * titulo escondido atras do header. */
  --header-logo-h: clamp(44px, 5vw, 56px);
  --header-h: calc(var(--header-logo-h) + (var(--header-pad-y) * 2) + 1px);

  /* Teto de corte da moldura de foto que acompanha a altura do texto ao lado.
   * 160cqw = a moldura nunca fica mais estreita que 5:8 em relacao a si mesma.
   * Sem esse teto, entre 900px e 1200px a coluna da foto tem ~400px de largura
   * contra ~900px de texto: o object-fit come 29% de cada lateral e a foto do
   * hero vira uma fatia sem sofa, sem planta e com o braco cortado. */
  --media-frame-cap: 160cqw;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}