/* ============================================================
   AZVEN — camada 1: TOKENS
   Nenhum valor bruto pode ser escrito fora deste arquivo.
   ============================================================ */

:root{

  /* ---------- MARCA ----------
     Matiz amostrado do material real: marca/logo-az-roxa.png (#6B17E0)
     e marca/logo-hexagono.png (#5418D8). O MATIZ (265°) é o do logo e não
     muda; o que caiu foi a saturação — de 81% no logo para 34% no token de
     texto pequeno. É daí que vem o "roxo suave" pedido em 26/09/2026, sem
     girar a cor para azul ou ameixa. */
  --az-roxo:#7C52C2;
  --az-roxo-fundo:#5B3AA6;

  /* Versões rebaixadas: a cor pura da marca satura demais em interface.
     Uma para papel claro, outra para tinta escura. */
  --az-roxo-ui:#6D4C9C;
  --az-roxo-ui-dark:#AC8FD6;

  /* ---------- NEUTRO: 12 degraus ----------
     Escala fechada é o que dá hierarquia sem esforço. */
  --ink-000:#FCFBF9;
  --ink-050:#F6F4F0;
  --ink-100:#EDEAE4;
  --ink-150:#E2DED7;
  --ink-200:#D3CEC5;
  --ink-300:#BAB4AA;
  --ink-400:#9B958C;
  --ink-500:#7C7770;
  --ink-600:#5F5B55;
  --ink-700:#46433F;
  --ink-800:#2E2C2A;
  --ink-900:#1A1918;
  --ink-1000:#0C0C0E;

  /* ---------- PAPÉIS SEMÂNTICOS ----------
     É só isto que os componentes têm permissão de usar. */
  --bg:var(--ink-000);
  --bg-soft:var(--ink-050);
  --bg-raised:#FFFFFF;

  --fg:var(--ink-900);
  --fg-muted:var(--ink-600);
  --fg-faint:var(--ink-400);

  --line:rgba(26,25,24,.10);
  --line-strong:rgba(26,25,24,.20);

  --accent:var(--az-roxo-ui);
  --accent-pure:var(--az-roxo);
  --accent-wash:rgba(124,82,194,.08);
  --accent-wash-forte:rgba(124,82,194,.14);
  --accent-line:rgba(124,82,194,.24);
  /* brilho radial do hero — vivia solto em sections.css e não acompanhava
     a troca de paleta; agora entra pelo sistema como todo o resto */
  --accent-aura-1:rgba(124,82,194,.20);
  --accent-aura-2:rgba(124,82,194,.06);
  --on-accent:#FFFFFF;

  /* Marca d'água e grão: tinta quase invisível sobre o fundo */
  --marca-agua:rgba(26,25,24,.045);
  --grao-opacidade:.05;

  --sombra-1:0 1px 2px rgba(12,12,14,.05), 0 8px 24px -12px rgba(12,12,14,.14);
  --sombra-2:0 2px 4px rgba(12,12,14,.05), 0 22px 48px -20px rgba(12,12,14,.22);
  /* Sombra de palco: peça que flutua sobre a página (telas do hero) */
  --sombra-3:0 1px 2px rgba(12,12,14,.06), 0 18px 34px -18px rgba(12,12,14,.22), 0 48px 96px -36px rgba(12,12,14,.34);

  /* ---------- TIPOGRAFIA ----------
     Três famílias, papel definido. Mono em dado numérico. */
  --f-display:'Space Grotesk','Segoe UI',Arial,sans-serif;
  --f-body:'Inter','Segoe UI',Arial,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* Fluida com clamp() — mata as media queries de tamanho */
  --t-xs:  clamp(.72rem, .70rem + .10vw, .78rem);
  --t-sm:  clamp(.84rem, .81rem + .14vw, .92rem);
  --t-md:  clamp(.98rem, .95rem + .18vw, 1.07rem);
  --t-lg:  clamp(1.12rem, 1.05rem + .34vw, 1.32rem);
  --t-xl:  clamp(1.42rem, 1.24rem + .82vw, 2.05rem);
  --t-2xl: clamp(1.95rem, 1.52rem + 1.95vw, 3.25rem);
  --t-3xl: clamp(2.45rem, 1.80rem + 3.10vw, 4.75rem);
  /* Título do hero: divide a dobra com o palco de telas, por isso é um degrau menor */
  --t-hero:clamp(2.35rem, 1.55rem + 3.05vw, 4.35rem);
  /* Marca d'água do rodapé */
  --t-marca:clamp(5.5rem, 2rem + 21vw, 19rem);

  --lh-tight:1.04;
  --lh-title:1.12;
  --lh-body:1.68;

  --tr-tight:-.028em;
  --tr-wide:.14em;

  /* ---------- ESPAÇO ---------- */
  --wrap:1220px;
  --gutter:clamp(1.25rem, .85rem + 1.7vw, 2.25rem);
  --sec-y:clamp(4.5rem, 2.6rem + 7.4vw, 9.5rem);
  --gap-sm:clamp(.9rem, .7rem + .8vw, 1.4rem);
  --gap:clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  --gap-lg:clamp(2.2rem, 1.4rem + 3.2vw, 4.5rem);

  --r-sm:6px;
  --r:12px;
  --r-lg:20px;

  /* ---------- TEMPO ----------
     Duração aleatória por componente é o que faz parecer amador. */
  --dur-fast:.22s;
  --dur-base:.45s;
  --dur-slow:.90s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   Tema escuro POR SEÇÃO: troca só os papéis.
   Nenhum componente precisa saber em que tema está.
   ============================================================ */
/* Com o menu móvel aberto o cabeçalho também vira escuro, para não
   sobrar uma faixa clara de vidro fosco em cima do painel preto. */
.is-dark,
body:has(#mob.aberto) #topo{
  --bg:var(--ink-1000);
  --bg-soft:#131316;
  --bg-raised:#191A1E;

  --fg:var(--ink-000);
  --fg-muted:var(--ink-300);
  --fg-faint:var(--ink-500);

  --line:rgba(252,251,249,.11);
  --line-strong:rgba(252,251,249,.22);

  --accent:var(--az-roxo-ui-dark);
  --accent-pure:var(--az-roxo-ui-dark);
  --accent-wash:rgba(172,143,214,.12);
  --accent-wash-forte:rgba(172,143,214,.19);
  --accent-line:rgba(172,143,214,.30);
  --on-accent:var(--ink-1000);
  --marca-agua:rgba(252,251,249,.05);

  --sombra-1:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --sombra-2:0 2px 6px rgba(0,0,0,.45), 0 26px 60px -24px rgba(0,0,0,.8);
  --sombra-3:0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.75), 0 60px 120px -40px rgba(0,0,0,.9);

  color-scheme:dark;
}