/* =============================================================================
   estilos/variaveis.css — a linguagem visual do PIXEL no escuro
   ---------------------------------------------------------------------------
   Nenhuma cor aqui foi escolhida por gosto: o ciano, o azul, o violeta e o
   grafite foram medidos no arquivo do logo, e as versões que servem para ler
   foram calculadas contra os três fundos até passarem no contraste. Os números
   estão anotados em cada uma, para que a próxima pessoa não precise refazer a
   conta — nem afrouxá-la sem saber o que está afrouxando.

   ATENÇÃO: estes nomes são os mesmos que estilos.css já usa (--fundo, --tinta,
   --ciano...), só que com valores de tema escuro. Carregar os dois juntos
   repinta o site atual. É de propósito que index.html ainda não carrega este
   arquivo: a troca acontece na integração, quando cada seção for tratada.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Fundos. Três degraus, do mais fundo ao que se separa.
     --------------------------------------------------------------------------- */
  --fundo:    #05070D; /* o breu de onde a marca nasce */
  --fundo-2:  #080B14; /* o corpo do site */
  --fundo-3:  #0B1020; /* onde uma seção precisa se destacar do resto */

  /* ---------------------------------------------------------------------------
     Superfícies. No claro, uma sombra dizia "isto está por cima". No escuro
     sombra não aparece: o que separa é o fio de luz na aresta de cima, e a
     superfície ser um degrau mais clara que o fundo. Por isso --elevo tem as
     duas coisas, e a de dentro vem primeiro.
     --------------------------------------------------------------------------- */
  --superficie:    #0E1524;
  --superficie-2:  #141C2E;
  --superficie-3:  #1B2438;

  --linha:        rgba(150, 170, 205, 0.10);
  --linha-forte:  rgba(150, 170, 205, 0.20);

  --elevo:
    inset 0 1px 0 rgba(210, 228, 255, 0.07),
    0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --elevo-alto:
    inset 0 1px 0 rgba(210, 228, 255, 0.11),
    0 30px 70px -30px rgba(0, 0, 0, 0.95);

  /* ---------------------------------------------------------------------------
     Metal. O grafite #2F3441 é a média medida do traço do logo — é a cor da
     peça, não do texto: sobre o fundo ele dá 1,6:1 e some. Vive em superfície,
     em borda e na face 3D.
     --------------------------------------------------------------------------- */
  --metal-escuro: #2F3441;
  --metal:        #5A6274; /* 3,2:1 — traço e ícone grande, nunca texto miúdo */
  --metal-claro:  #8A93A6; /* 6,4:1 — pode ser texto */
  --metal-face:   linear-gradient(160deg, #262D3C 0%, #151A25 60%, #0E121B 100%);

  /* ---------------------------------------------------------------------------
     Texto. Os contrastes são contra --fundo-2, o mais usado dos três.
     --------------------------------------------------------------------------- */
  --tinta:    #E6ECF7; /* 16,6:1 — título e texto corrido */
  --tinta-2:  #A8B4C8; /*  9,4:1 — texto de apoio */
  --apagado:  #7C879B; /*  5,4:1 — o menor que ainda passa em texto miúdo */

  /* ---------------------------------------------------------------------------
     As luzes da marca, medidas no logo. Elas são iluminação e detalhe — não são
     o assunto. Área cheia de neon é o que separa "empresa de tecnologia" de
     "loja de jogos", e a marca fica do primeiro lado.
     --------------------------------------------------------------------------- */
  --ciano:    #16CFF4; /* 10,5:1 — passa até em texto miúdo */
  --azul:     #0967C3; /*  3,5:1 — traço e área, não texto corrido */
  --violeta:  #7F21EC; /*  3,1:1 — idem */

  /* as mesmas cores, clareadas até poderem ser lidas sobre o escuro */
  --azul-texto:     #3E9BEA; /* 6,6:1 */
  --violeta-texto:  #A76BF5; /* 5,7:1 */

  --degrade: linear-gradient(120deg, var(--ciano) 0%, var(--azul) 52%, var(--violeta) 100%);

  /* ---------------------------------------------------------------------------
     Brilho. Contido de propósito: uma luz que insinua volume, não um letreiro.
     Sempre atrás ou na borda de alguma coisa, nunca por cima do texto.
     --------------------------------------------------------------------------- */
  --brilho:          0 0 30px -8px rgba(22, 207, 244, 0.38);
  --brilho-violeta:  0 0 30px -8px rgba(127, 33, 236, 0.38);
  --brilho-fraco:    0 0 20px -10px rgba(22, 207, 244, 0.22);

  /* ---------------------------------------------------------------------------
     Tipografia. Sora nos títulos porque é geométrica e tem ar de peça técnica;
     Inter no texto porque some ao ser lida, que é o que texto corrido tem de
     fazer. As duas moram em ativos/fontes/, servidas daqui — ninguém precisa
     bater no Google para o site abrir.
     --------------------------------------------------------------------------- */
  --fonte-titulo: "Sora", "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
  --fonte:        "Inter", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  --mono:         ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* A escala cresce com a tela e para de crescer quando fica grande demais.
     Título grande é metade do que faz uma página parecer cara. */
  --t-abertura: clamp(46px, 7.4vw, 104px);
  --t-titulo:   clamp(32px, 4.2vw, 58px);
  --t-secao:    clamp(23px, 2.4vw, 33px);
  --t-guia:     clamp(17px, 1.35vw, 21px);
  --t-corpo:    16px;
  --t-miudo:    13.5px;
  --t-etiqueta: 11.5px;

  /* Texto grande precisa de entrelinha curta e letra apertada; texto corrido
     precisa do contrário. É a mesma regra de sempre, só que escrita. */
  --altura-abertura: 0.98;
  --altura-titulo:   1.08;
  --altura-corpo:    1.62;
  --aperto-abertura: -0.035em;
  --aperto-titulo:   -0.022em;
  --solto-etiqueta:  0.16em;

  /* ---------------------------------------------------------------------------
     Espaço. O site tem de respirar, então a escala começa larga e a distância
     entre seções é grande de propósito.
     --------------------------------------------------------------------------- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 72px;
  --e9: 112px;

  --secao:  clamp(110px, 13vh, 190px); /* o ar entre uma seção e outra */
  --coluna: 1180px;
  --margem: clamp(20px, 4vw, 46px);

  /* ---------------------------------------------------------------------------
     Cantos e movimento
     --------------------------------------------------------------------------- */
  --canto:      10px;
  --canto-alto: 18px;
  --canto-redondo: 999px;

  --rapido: 160ms;
  --normal: 320ms;
  --lento:  640ms;
  --entrada: cubic-bezier(0.16, 1, 0.3, 1);  /* chega freando, como coisa pesada */
  --saida:   cubic-bezier(0.7, 0, 0.84, 0);  /* sai acelerando */
}