/* =============================================================
   Tokens — ismailepereira.com.br
   Estrutura visual do site da Conexão (topo escuro, faixas que se
   fundem, cartões na cor de cada serviço) com a marca do Ismaile:
   terra, mato e papel. Paleta-mãe no manual de marca em
   pessoal/comercial/apresentacao-servicos/manual-marca/.
   ============================================================= */
:root {
  /* Papel */
  --canvas:    #FBF9F2;
  --surface:   #FFFFFF;
  --surface-2: #F4F0E6;
  --line:      #E7E2D6;
  --line-2:    #D9D2BF;

  /* Floresta e musgo */
  --ink:    #2E3A2F;
  --ink-2:  #3A4A3B;
  --escuro:   #243026;   /* fundo dos momentos escuros */
  --escuro-2: #1A231C;   /* rodapé e sombra do escuro */
  --body:   #4A5A45;
  --subtle: #66734F;     /* sálvia escura: rótulo pequeno (4,8:1) */
  --salvia: #8B9A75;     /* só decoração */

  /* As três cores da marca. *-ink é texto no creme, *-light é texto no escuro */
  --mato:        #3F7050;
  --mato-ink:    #2F5A3E;
  --mato-deep:   #244A32;
  --mato-light:  #9CCBA6;
  --terra:       #BF5A30;
  --terra-ink:   #A24A26;
  --terra-light: #E89370;
  --sol:         #E0A044;
  --sol-ink:     #8A5A12;
  --sol-light:   #F3C77F;

  /* Cores exatas do símbolo (sol em pixel) */
  --marca-raio:   #3F6B4C;
  --marca-disco:  #BF5A30;
  --marca-brilho: #E8A77A;
  --marca-agua:   #D4774F;

  /* Sobre fundo escuro */
  --on-dark:   #F4F0E6;
  --on-dark-2: rgba(244, 240, 230, .82);
  --on-dark-3: rgba(244, 240, 230, .64);
  --line-dark: rgba(244, 240, 230, .14);

  /* Tipografia */
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Ritmo */
  --wrap:  1200px;
  --gut:   clamp(20px, 5vw, 64px);
  --secao: clamp(72px, 10vw, 116px);
  --nav-h: 68px;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  /* Elevação: uma luz só, de cima e da esquerda */
  --luz-topo: inset 0 1px 0 rgba(255, 255, 255, .9);
  --sombra-1: 0 1px 1px rgba(46, 58, 47, .04), 0 3px 6px -2px rgba(46, 58, 47, .06), 0 12px 24px -10px rgba(46, 58, 47, .10);
  --sombra-2: 0 2px 3px rgba(46, 58, 47, .05), 0 8px 16px -4px rgba(46, 58, 47, .09), 0 26px 48px -16px rgba(46, 58, 47, .20);
  --sombra-3: 0 30px 60px -24px rgba(26, 35, 28, .5);

  --curva: cubic-bezier(.2, .8, .2, 1);
  --saida: cubic-bezier(.16, 1, .3, 1);
}

/* Papel de cor: o componente lê --cor / --cor-ink / --cor-light.
   --cor-alto/--cor-baixo: degradê das peças sólidas; --cor-sobre: texto por cima delas. */
.cor-mato  { --cor: var(--mato);  --cor-ink: var(--mato-ink);  --cor-light: var(--mato-light);  --cor-alto: #558A66; --cor-baixo: var(--mato-deep); --cor-sobre: #fff; }
.cor-terra { --cor: var(--terra); --cor-ink: var(--terra-ink); --cor-light: var(--terra-light); --cor-alto: #D0703F; --cor-baixo: var(--terra-ink); --cor-sobre: #fff; }
.cor-sol   { --cor: var(--sol);   --cor-ink: var(--sol-ink);   --cor-light: var(--sol-light);   --cor-alto: #F3C77F; --cor-baixo: #D08A2A;         --cor-sobre: var(--ink); }
.cor-ink   { --cor: var(--ink-2); --cor-ink: var(--ink);       --cor-light: #C9D3BE;            --cor-alto: #4E6150; --cor-baixo: var(--ink);       --cor-sobre: #fff; }