/* =====================================================================
   Portfólio · Tokens (cores, tipografia, espaço, movimento)
   Tema escuro em preto, branco e vermelho. O vermelho claro é para texto
   e traço sobre o preto; o forte é para fundos com texto branco.
   ===================================================================== */

:root {
    color-scheme: dark;

    /* Cores */
    --preto:          #000000;
    --superficie:     #111113;
    --superficie-2:   #18181b;
    --linha:          #2a2a2f;
    --linha-forte:    #3a3a41;
    --branco:         #ffffff;
    --texto:          #e6e6e9;
    --apagado:        #a0a0a8;
    --vermelho:       #ff3b3b;
    --vermelho-forte: #d70f1b;
    --vermelho-fundo: rgba(255, 59, 59, .1);

    /* Tipografia: Archivo nas duas funções, mudando a largura */
    --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serifa: "EB Garamond", Garamond, "Times New Roman", serif;
    --larga: 125%;
    --t-0: .8125rem;
    --t-1: 1rem;
    --t-2: 1.25rem;
    --t-3: 1.5625rem;
    --t-4: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    --t-5: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
    --t-nome: clamp(2.6rem, 1rem + 6.6vw, 7rem);

    /* Espaço e forma */
    --largura: 1180px;
    --margem: clamp(1rem, .4rem + 3vw, 2.5rem);
    --secao: clamp(5rem, 3rem + 8vw, 9rem);
    --raio: 6px;
    --raio-g: 14px;
    --trilho: 0px;

    /* Movimento */
    --saida: cubic-bezier(.22, 1, .36, 1);
    --ida-volta: cubic-bezier(.65, 0, .35, 1);
}

/* O trilho da rota só aparece com folga lateral. */
@media (min-width: 1240px) {
    :root { --trilho: 96px; }
}