/* =====================================================================
   MULTIVERSO DO FABIANO — DESIGN SYSTEM
   Fonte única de verdade das cores, tipografia e escala do site.
   Extraído da página principal (index.html) em 30/08/2026.

   Três camadas, de baixo pra cima:
     1. PRIMITIVA — o valor bruto (um hex, um número). Nunca usada direto
        num componente — só serve pra alimentar a camada de cima.
     2. SEMÂNTICA — o que aquele valor SIGNIFICA no site (ex.: "cor de
        texto apagado"), separado do componente que vai usar.
     3. CATEGORIA (a versão do Fabiano de "componente") — o jogo de
        tamanho/peso/entrelinha/opacidade de cada TIPO de texto do site:
        TÍTULO, FRASE, TEXTO, AUXILIAR, ETIQUETA, NOME. Um texto que já
        existe em algum lugar do site é sempre uma dessas seis — nunca
        um valor novo e solto.

   Regra de ouro: nenhuma página do site escreve um hex ou um px direto
   no CSS dela. Toda cor e todo tamanho vêm de uma variável daqui.
   ===================================================================== */

:root {

  /* ---------- 1. PRIMITIVA — cores cruas da identidade ---------- */
  --void: #020308;          /* o fundo: quase-preto azulado          */
  --aurora-blue:   #4fc3f7;
  --aurora-purple: #b388ff;
  --aurora-pink:   #f48fb1;
  --aurora-gold:   #ffd54f;
  --menta:    #3bd9b0;      /* cor do universo "Multiverso da Mente"  */
  --eletrico: #5b8def;      /* cor do universo "Multiverso das Máquinas" */

  /* RGB puro dos brancos de texto — permite controlar a opacidade
     à parte da cor, sem precisar de um hex novo pra cada transparência. */
  --rgb-leitura: 228,222,245;   /* branco levemente lilás, pro corpo do texto */
  --rgb-rotulo:  79,195,247;    /* azul das etiquetas e coordenadas    */


  /* ---------- 2. SEMÂNTICA — o que cada cor representa ---------- */
  --card-border: rgba(179,136,255,0.18);
  --card-bg:     rgba(10,6,28,0.55);

  /* fonte de exibição (títulos, etiquetas, botões) e de leitura (corpo) */
  --display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --fonte-leitura: 'Crimson Pro', Georgia, serif;
  --fonte-coord: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;


  /* ---------- 3. CATEGORIAS — as SEIS categorias de texto ----------
     Cada categoria = tamanho + peso + entrelinha + opacidade +
     espaçamento de letra, um valor só, válido em TODAS as ocorrências
     dela no site. Nunca ajustar uma ocorrência sozinha — muda a
     categoria inteira, ou não muda.

       TÍTULO   — títulos de seção, nome de produto
       FRASE    — frases grandes soltas (destaque, citação)
       TEXTO    — corpo de leitura corrida (parágrafos longos)
       AUXILIAR — texto dentro de caixas/cards (menor que o corpo)
       ETIQUETA — linhas em maiúsculas: rótulos, botões, rodapé
       NOME     — o nome do site (uso único, na abertura)
     Exceção deliberada: COORDENADAS tem fonte e tamanho próprios.
  --------------------------------------------------------------- */

  /* tamanho: celular (375px) → desktop (1366px), cada categoria com
     seu próprio piso — texto pequeno nunca fica ilegível no celular */
  --t-nome:     clamp(2.125rem, 1.605rem + 2.220vw, 3.500rem);  /* 34   → 56   */
  --t-titulo:   clamp(1.688rem, 1.378rem + 1.322vw, 2.506rem);  /* 27   → 40,1 */
  --t-frase:    clamp(1.313rem, 1.097rem + 0.918vw, 1.881rem);  /* 21   → 30,1 */
  --t-texto:    clamp(1.156rem, 0.979rem + 0.757vw, 1.625rem);  /* 18,5 → 26   */
  --t-aux:      clamp(1.031rem, 0.948rem + 0.353vw, 1.250rem);  /* 16,5 → 20   */
  --t-etiqueta: clamp(0.844rem, 0.735rem + 0.464vw, 1.131rem);  /* 13,5 → 18,1 */
  --t-coord:    clamp(0.781rem, 0.722rem + 0.252vw, 0.938rem);  /* 12,5 → 15   */

  /* espessura da letra, por categoria */
  --w-titulo: 700; --w-frase: 300; --w-texto: 300; --w-aux: 400; --w-etiqueta: 600;

  /* espaço entre linhas, por categoria */
  --lh-frase: 1.90; --lh-texto: 1.72; --lh-aux: 1.68;

  /* quanto o texto aparece (opacidade), por categoria */
  --op-titulo: 1; --op-frase: .86; --op-texto: .80; --op-aux: .86; --op-etiqueta: .62;

  /* espaço entre letras, por categoria */
  --ls-titulo: .02em; --ls-etiqueta: .18em; --ls-coord: .18em;

  /* cores de texto já com a opacidade da categoria embutida */
  --tom-titulo:    rgba(240,236,255, var(--op-titulo));
  --tom-leitura:   rgba(var(--rgb-leitura), var(--op-texto));
  --tom-apagado:   rgba(200,190,220, var(--op-etiqueta));
  --tom-atmosfera: rgba(var(--rgb-leitura), var(--op-texto));

  /* nomes antigos: mantidos como alias, apontando pra categoria certa —
     zero valor próprio, só compatibilidade com o CSS já escrito */
  --t-rotulo: var(--t-etiqueta); --t-apoio: var(--t-aux); --t-corpo: var(--t-texto);
  --t-lead: var(--t-frase); --t-abertura: var(--t-texto); --t-hero: var(--t-nome);
  --w-rotulo: var(--w-etiqueta); --w-apoio: var(--w-aux); --w-corpo: var(--w-texto);
  --w-lead: var(--w-frase); --w-atmosfera: var(--w-texto); --w-forte: 600;
  --lh-apoio: var(--lh-aux); --lh-corpo: var(--lh-texto);
  --lh-lead: var(--lh-frase); --lh-abertura: var(--lh-texto);
  --op-rotulo: var(--op-etiqueta); --op-apoio: var(--op-aux); --op-corpo: var(--op-texto);
  --op-lead: var(--op-frase); --op-atmosfera: var(--op-texto);
  --ls-rotulo: var(--ls-etiqueta);
  --text-primary: var(--tom-titulo);
  --text-muted: rgba(220,210,240,0.72);
  --text-read: var(--tom-leitura);

  --display-track: .16em;
  --h1-size: var(--t-hero);
  --h1-track: .02em;
}