/* ==========================================================================
   CORE — tokens
   A interface entre os componentes e a marca do projeto.
   Aqui ficam apenas DEFAULTS NEUTROS. A identidade do cliente entra
   sobrescrevendo estes mesmos nomes em core/temas/<projeto>.css.
   Nenhum componente pode ler cor, fonte ou espaçamento fora desta lista.
   ========================================================================== */

:root{
  color-scheme:only light;

  /* ---- Superfícies base do projeto -------------------------------------
     Os dois escuros são vizinhos de propósito: a diferença entre eles é
     quase imperceptível. Salto forte de tom entre seções suja a página. */
  --dark:#0a0a0a;
  --dark-rgb:10,10,10;
  --dark-2:#131313;
  --light:#ffffff;
  --light-2:#f4f2ee;

  /* ---- Marca ---- */
  --accent:#8f8f8f;      /* cor de destaque — trocada pelo tema */
  --accent-2:#6e6e6e;    /* apoio do destaque */

  /* ---- Tipografia ---- */
  --display:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --fs-body:17px;
  --lh-body:1.6;
  --ls-body:.05em;

  /* ---- Grid e ritmo ---- */
  --pad:clamp(20px,5vw,72px);   /* respiro lateral — só o .wrap consome */
  --max:1240px;                 /* largura da coluna */
  --nav-h:84px;                 /* altura do menu fixo */
  /* Respiro entre dobras. Piso de 110px garante ~220px de vão real entre
     duas seções (110 de cada lado), mesmo em telas baixas. Fonte única:
     tudo que separa seções lê esta variável, nunca um clamp solto. */
  --sec-gap:clamp(110px,14vh,160px);

  /* ---- Forma ----
     Projeto flat (Liberta, Tarvos): --radius-media:0.
     Projeto arredondado (Terceira Onda): --radius-media:16px. */
  --radius-pill:1000px;
  --radius-media:0px;

  /* ---- Movimento ---- */
  --ease:cubic-bezier(.16,.84,.24,1);
  --dur:.9s;
}

/* ==========================================================================
   ESCOPOS DE TOM
   A seção declara o escopo; tudo dentro dela herda. Componente nunca
   sobrescreve --fg por conta própria.
   ========================================================================== */

.sec-dark{
  --bg:var(--dark);
  --fg:#f2f0ec; --fg-2:#cbc8c1; --fg-muted:#918e86;
  --rule:#242424; --rule-2:#3a3a3a;
  color:var(--fg);
}

/* Segunda superfície escura — para dar ritmo sem quebrar o tom. */
.sec-deep{
  --bg:var(--dark-2);
  --fg:#f2f0ec; --fg-2:#cbc8c1; --fg-muted:#918e86;
  --rule:#2a2a2a; --rule-2:#404040;
  color:var(--fg);
}

/* Respiro claro no meio de uma página escura. Só esta seção inverte;
   a vizinha volta direto ao escuro. */
.sec-paper{
  --bg:var(--light);
  --fg:#1c1811; --fg-2:#453f34; --fg-muted:#726b5c;
  --rule:rgba(28,24,17,.16); --rule-2:rgba(28,24,17,.28);
  color:var(--fg);
}

/* Página clara por padrão. */
.sec-light{
  --bg:var(--light-2);
  --fg:#141414; --fg-2:#3d3d3d; --fg-muted:#6d6d6d;
  --rule:rgba(0,0,0,.12); --rule-2:rgba(0,0,0,.24);
  color:var(--fg);
}