/* ============================================================================
   Conecta Tecnologia — tokens do site institucional
   ----------------------------------------------------------------------------
   Camada em cima do tokens.css da marca (que é copiado sem alteração e é a
   fonte única de cores, fontes e medidas). Aqui ficam só as medidas que um
   site de página inteira precisa e um app não tem: título de display, respiro
   de seção, movimento e camadas.

   Nenhuma cor nova: os laranjas tênues são o próprio laranja da marca em
   transparência (#D9572B no claro, #EC6A3D no escuro).
   ============================================================================ */

:root {
  /* ---- Laranja da marca em transparência (fundo de ícone, selo, realce) ---- */
  --cor-marca-tenue: light-dark(rgba(217, 87, 43, .10), rgba(236, 106, 61, .14));
  --cor-marca-tenue-forte: light-dark(rgba(217, 87, 43, .16), rgba(236, 106, 61, .20));
  --cor-marca-borda: light-dark(rgba(217, 87, 43, .28), rgba(236, 106, 61, .34));

  /* ---- Tipografia de site (o app não tem display) ---- */
  --texto-display: 600 clamp(2rem, 4.6vw, 2.9rem)/1.1 var(--fonte-titulo);
  --texto-titulo-site: 600 clamp(1.5rem, 2.6vw, 1.95rem)/1.2 var(--fonte-titulo);
  --texto-subtitulo: 600 17px/24px var(--fonte-titulo);
  --texto-lead: 400 16px/26px var(--fonte-texto);
  --texto-sobre: 600 12px/16px var(--fonte-texto);  /* "eyebrow" acima do título */

  /* ---- Respiro de seção (continua a escala de 4 do tokens.css) ---- */
  --espaco-12: 48px;
  --espaco-16: 64px;
  --espaco-20: 80px;
  --largura-conteudo: 1200px;

  /* ---- Movimento ---- */
  --suave: cubic-bezier(.4, 0, .2, 1);
  --suave-saida: cubic-bezier(.16, 1, .3, 1);
  --duracao-rapida: 120ms;
  --duracao: 200ms;
  --duracao-lenta: 360ms;

  /* ---- Bloco de contraste (cartão e faixa de contato) ----
     No claro é o grafite da marca; no escuro sobe uma camada (a mesma da linha
     selecionada), porque inverter para papel vira um bloco branco ofuscante. */
  --cor-invertida-fundo: light-dark(#1E1E20, #3A3A40);
  --cor-invertida-texto: light-dark(#F6F6F5, #EEEEEB);
  --cor-invertida-texto-secundario: light-dark(#ABABB0, #ABABB0);

  /* ---- Escala de texto do site (o app é mais compacto) ---- */
  --texto-pequeno: 13px;          /* legenda, rótulo de seção, rodapé */
  --entrelinha: 1.57;             /* corpo */
  --entrelinha-justa: 1.15;       /* títulos */
  --raio-redondo: 999px;          /* pílula, botão flutuante */

  /* ---- Camadas ---- */
  --z-topo: 90;
  --z-gaveta: 100;
  --z-aviso: 120;
}