/* ==========================================================
   TOKENS: CORES, FONTES E MEDIDAS
   A identidade visual mora aqui. Nenhuma outra folha escreve uma cor ou uma fonte:
   todas usam estas variáveis. Para trocar a paleta, mude os valores abaixo (os nomes
   ficam). Exceções, de propósito: as máscaras em degradê e a forma da seta (preto e
   transparente servem só de canal alfa) e as cores próprias da ilustração isométrica da seção Entregas e
   do desenho da máscara da malha, escritas no index.html.

   Identidade de 2026-10-26 (decidida pelo sócio e pelo Tiago): os cinzas do site do escritório e o
   vermelho só na praça do símbolo e em detalhes raros. A paleta azul anterior saiu inteira.
   ========================================================== */
:root {
  --logo-filtro: none;       /* as logos dos clientes: silhuetas pretas; no fundo escuro, invertidas */
  /* Paleta da marca (a mesma do kit de marca CIVITAS v1) */
  --tinta: #323038;          /* texto; fundo das seções escuras */
  --grafite: #4E4E54;        /* quadra escura do símbolo; acentos sobre fundo claro */
  --cinza-medio: #6E6E74;    /* quadra do símbolo no fundo escuro; números grandes, bordas */
  --cinza-claro: #BFBFBF;    /* quadra clara do símbolo; texto suave e acentos sobre fundo escuro */
  --quase-branco: #F2F2F2;   /* fundo da página; texto sobre fundo escuro */
  --vermelho: #E92B31;       /* só a praça do símbolo e detalhes raros (filete, foco, item selecionado) */
  --branco: #FFFFFF;

  /* Tons derivados da paleta */
  --tinta-escura: #28272D;           /* superfície no tema escuro */
  --tinta-clara: #3C3B42;            /* fundo das seções em tom branco, no modo escuro */
  --cinza-intermediario: #95959B;    /* borda de controle no tema escuro; emblema da parte 2 do ciclo */
  --cinza-texto: #55545B;            /* texto suave sobre fundo claro */

  /* Transparências da paleta */
  --linha-sobre-claro: #3230382E;            /* tinta a 18% */
  --linha-lista-sobre-claro: #32303822;      /* tinta a 13% */
  --contorno-simbolo: #3230381F;             /* tinta a 12% */
  --trilho-rolar: rgba(50, 48, 56, .3);      /* tinta a 30% */
  --linha-sobre-escuro: #F2F2F233;           /* quase branco a 20% */
  --linha-lista-sobre-escuro: #F2F2F226;     /* quase branco a 15% */
  --veu-cabecalho: rgba(242, 242, 242, .88); /* quase branco a 88% */
  --veu-cabecalho-fim: rgba(242, 242, 242, 0);
  --trilha-ciclo: rgba(191, 191, 191, .45);  /* cinza claro a 45% */
  --seta-ciclo: rgba(191, 191, 191, .8);     /* cinza claro a 80% */

  /* Papéis (tema claro) */
  --fundo: var(--quase-branco);
  --superficie: var(--branco);
  --texto: var(--tinta);
  --texto-suave: var(--cinza-texto);
  --texto-apagado: var(--cinza-medio);   /* números grandes e frases em segundo plano */
  --linha: var(--linha-sobre-claro);
  --borda-controle: var(--cinza-medio);
  --simbolo-modulo-escuro: var(--grafite);
  --simbolo-modulo-claro: var(--cinza-claro);
  --acento: var(--grafite);          /* marcas repetidas: quadradinhos de rótulo, marcadores de lista, barras de progresso */
  --praca: var(--vermelho);          /* a praça do símbolo e os detalhes raros em vermelho */
  --botao-fundo: var(--tinta);
  --botao-texto: var(--quase-branco);
  --foco: var(--vermelho);

  /* Fontes (Google Fonts, carregadas no <head> do index.html; se mudarem, troque lá também).
     Títulos na Stack Sans Notch, a fonte da marca; texto corrido na Stack Sans Text, da mesma família,
     desenhada para parágrafo (a Notch, com os entalhes, cansa em texto longo). */
  --font-titulo: 'Stack Sans Notch', 'Stack Sans Text', 'Helvetica Neue', Arial, sans-serif;
  --font-texto: 'Stack Sans Text', 'Helvetica Neue', Arial, sans-serif;
  --peso-titulo: 500;
  --peso-texto: 300;

  /* Escala tipográfica. Aumentada em 2026-10-26 (o sócio achou as letras pequenas): o corpo passou
     de 17 para 18 px e nenhum texto de leitura fica abaixo de 16 px. Os tamanhos de exibição de cada
     seção (números grandes, frases de destaque) ficam nas folhas das seções. */
  --texto-titulo-1: clamp(40px, 5.6vw, 70px);
  --texto-titulo-2: clamp(32px, 4vw, 48px);
  --texto-titulo-3: 24px;
  --texto-destaque: 22px;
  --texto-corpo: 18px;
  --texto-apoio: 16px;    /* listas, botões, menu, notas: o menor texto de leitura */
  --texto-legenda: 14px;  /* legendas, rótulos de controle, numeração */
  --texto-rotulo: 13px;   /* rótulos em caixa alta e espaçados */

  /* A seta do site: larga, encorpada e levemente curva, apontando para a direita. Usada como
     máscara (o preto do desenho é só o canal alfa; a cor vem de quem usa). Ver .seta em componentes.css. */
  --seta-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M5 21Q24 10 42 13.8' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M40.3 3.4L59.5 16.5L43.7 25Z' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Espaçamentos */
  --espaco-1: 4px;  --espaco-2: 8px;  --espaco-3: 16px; --espaco-4: 24px;
  --espaco-5: 40px; --espaco-6: 64px; --espaco-7: 96px; --espaco-8: 140px;

  /* Layout */
  --largura-maxima: 1200px;
  --largura-texto: 65ch;
  --altura-controle: 48px;
  --filete-vermelho: 48px;
  --margem: clamp(20px, 5vw, 64px);
  --espaco-secao: clamp(var(--espaco-7), 10vw, var(--espaco-8));
  --altura-cabecalho: 76px;

  color-scheme: light;
}

@media (max-width: 900px) {
  :root { --altura-cabecalho: 112px; }
}

/* Tema escuro: seções em tinta (e o site inteiro, se o aparelho estiver em modo escuro) */
.tema-escuro {
  --fundo: var(--tinta);
  --superficie: var(--tinta-escura);
  --texto: var(--quase-branco);
  --texto-suave: var(--cinza-claro);
  --texto-apagado: var(--cinza-claro);
  --linha: var(--linha-sobre-escuro);
  --borda-controle: var(--cinza-intermediario);
  --simbolo-modulo-escuro: var(--cinza-claro);
  --simbolo-modulo-claro: var(--cinza-medio);
  --acento: var(--cinza-claro);
  --botao-fundo: var(--quase-branco);
  --botao-texto: var(--tinta);
  --logo-filtro: invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: var(--tinta); --superficie: var(--tinta-escura); --texto: var(--quase-branco); --texto-suave: var(--cinza-claro); --texto-apagado: var(--cinza-claro);
    --linha: var(--linha-sobre-escuro); --borda-controle: var(--cinza-intermediario); --simbolo-modulo-escuro: var(--cinza-claro); --simbolo-modulo-claro: var(--cinza-medio); --acento: var(--cinza-claro);
    --botao-fundo: var(--quase-branco); --botao-texto: var(--tinta); --logo-filtro: invert(1); color-scheme: dark;
  }
  :root:not([data-theme="light"]) .tema-escuro { --fundo: var(--tinta-escura); --superficie: var(--tinta); }
}
:root[data-theme="dark"] {
  --fundo: var(--tinta); --superficie: var(--tinta-escura); --texto: var(--quase-branco); --texto-suave: var(--cinza-claro); --texto-apagado: var(--cinza-claro);
  --linha: var(--linha-sobre-escuro); --borda-controle: var(--cinza-intermediario); --simbolo-modulo-escuro: var(--cinza-claro); --simbolo-modulo-claro: var(--cinza-medio); --acento: var(--cinza-claro);
  --botao-fundo: var(--quase-branco); --botao-texto: var(--tinta); --logo-filtro: invert(1); color-scheme: dark;
}
:root[data-theme="dark"] .tema-escuro { --fundo: var(--tinta-escura); --superficie: var(--tinta); }

/* Seções em tom branco (e a variante para o modo escuro) */
.tom-branco { --fundo: var(--branco); --superficie: var(--quase-branco); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tom-branco { --fundo: var(--tinta-clara); --superficie: var(--tinta); } }
:root[data-theme="dark"] .tom-branco { --fundo: var(--tinta-clara); --superficie: var(--tinta); }