/* ===========================================================
   TOKENS — extraídos de design-system.html (fonte da verdade)
   Não alterar valores aqui sem atualizar o design system.
   =========================================================== */
:root{
  /* ===== BASE (preto) ===== */
  --black: #0D0605;        /* preto quente */
  --black-deep: #000000;   /* preto puro, cantos/sombras */
  --bg: #010101;           /* fundo real do site — preto puro (1pt off pra evitar banding em OLED) */
  --surface-1: #160B09;    /* superfície ligeiramente elevada (cards) */
  --surface-2: #1F110D;    /* superfície mais elevada (inputs, hover) */

  /* ===== VERMELHO ===== */
  --red: #D4402A;
  --red-strong: #B8271F;
  --red-deep: #8C1D18;
  --red-shadow: #5C1210;

  /* Vermelho quente — amostrado do lado iluminado da touca em
     foto-profissional-01.png (média dos 8% de pixels mais claros da
     região da touca). É o vermelho mais vivo da paleta: usar só em
     preenchimento de estado ativo, nunca em área grande. */
  --red-hot: #F11C15;

  /* Vermelho de aresta — é literalmente uma das paradas do --red-metal
     (a de 57%), a faixa que o olho lê no contorno da navbar. Serve pra
     quando um texto ou traço precisa combinar com aquele contorno sem
     poder usar o degradê. */
  --red-edge: #E01F2E;

  /* ===== PRATEADO METÁLICO =====
     Mesma lógica do --red-metal (bordas escuras, faixa de brilho no meio,
     queda pro escuro), só que em escala de cinza. Serve pra molduras que
     precisam de reflexo metálico sem puxar cor. */
  --silver-metal: linear-gradient(
    180deg,
    #2C2C2C  0%,
    #6E6E6E 10%,
    #A6A6A6 24%,
    #D4D4D4 37%,
    #EDEDED 45%,   /* faixa de brilho */
    #BFBFBF 58%,
    #878787 72%,
    #4A4A4A 87%,
    #262626 100%
  );

  /* ===== BRANCO / CREME ===== */
  --cream: #FAF7F3;
  --cream-90: rgba(250,247,243,.90);
  --cream-50: rgba(250,247,243,.50);
  --cream-30: rgba(250,247,243,.30);
  --cream-10: rgba(250,247,243,.10);

  --black-50: rgba(13,6,5,.50);
  --black-10: rgba(13,6,5,.10);

  /* ===== VERMELHO METÁLICO =====
     Vertical e envernizado: bordas quase pretas, faixa de brilho na
     parte de cima do miolo e queda pro escuro embaixo. É a curva de
     luz de uma superfície cilíndrica polida — dá leitura de esmalte
     sobre metal, não de metal escovado.
     As pontas escuras são curtas de propósito — 6% em cima e 14% embaixo.
     A queda pro preto existe só pra dar volume à aresta; se ela engorda,
     o degradê vira "vermelho com sombra" e perde o vivo do miolo. */
  --red-metal: linear-gradient(
    180deg,
    #3B070A  0%,
    #A5111D  6%,
    #D6182B 17%,
    #EE2331 31%,
    #F5333C 44%,   /* faixa de brilho */
    #E01F2E 57%,
    #B81221 71%,
    #7C0D14 86%,
    #3B070A 100%
  );

  --font: 'Archivo', sans-serif;

  /* ===== MOVIMENTO =====
     Curva cinematográfica: arranca rápido e tem cauda longa — 93% do
     caminho na primeira metade do tempo, o resto é assentamento. É isso
     que dá leitura de peso em vez de pressa. O y final passa de 1 pro
     leve overshoot que diferencia mola de ease. */
  --spring: cubic-bezier(.16,.92,.24,1.02);

  /* Curva de entrada. Sai do zero com força e gasta os últimos 30% do
     tempo só assentando. É a diferença entre uma coisa que "aparece" e
     uma coisa que "chega". Sem overshoot aqui de propósito: em bloco de
     texto o quique lê como tremida, não como peso. */
  --ease-in-cine: cubic-bezier(.16,1,.3,1);

  /* Curva de saída, mais seca. Sair devagar dá impressão de travamento. */
  --ease-out-cine: cubic-bezier(.6,.02,.4,1);

  --fx-dur: 1100ms;   /* entrada longa o bastante pra ler como movimento */
  --fx-step: 85ms;    /* cascata entre um elemento e o próximo */
  --fx-shift: 30px;   /* distância que o elemento sobe ao entrar */
  --fx-blur: 14px;    /* desfoque inicial, some junto com o movimento */
}