/*
 * ADN Racing: tokens do design system.
 * Única fonte de cores, fontes, espaços e raios do site e de todo material.
 * Nenhum componente usa cor ou fonte solta: lê sempre daqui.
 * Origem: folder "ADN Racing Experience 2025/2026" (Canva).
 */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/michroma-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Cores da marca */
  --adn-laranja: #f76201;        /* laranja ADN, medido no quadriculado do folder */
  --adn-laranja-claro: #ff8a3d;  /* hover e destaques sobre preto */
  --adn-laranja-escuro: #c94f00; /* pressionado */
  --adn-preto: #0b0b0c;          /* fundo principal */
  --adn-grafite: #1c1c1f;        /* superfícies e cartões */
  --adn-grafite-2: #2a2a2e;      /* bordas e divisórias */
  --adn-cinza: #9a9aa1;          /* texto secundário */
  --adn-branco: #ffffff;         /* texto principal e logo */
  --adn-gelo: #e9e9ec;           /* fundo claro (peças em papel) */

  /* Papéis das cores */
  --cor-fundo: var(--adn-preto);
  --cor-superficie: var(--adn-grafite);
  --cor-borda: var(--adn-grafite-2);
  --cor-texto: var(--adn-branco);
  --cor-texto-suave: var(--adn-cinza);
  --cor-destaque: var(--adn-laranja);
  --cor-destaque-hover: var(--adn-laranja-claro);
  --cor-sobre-destaque: var(--adn-preto);
  --cor-topo: rgba(11, 11, 12, 0.88);          /* barra do topo, translúcida */
  --cor-abertura: #232326;                     /* início do degradê da abertura */
  --cor-marca-dagua: rgba(255, 255, 255, 0.06); /* nome gigante atrás do carro */
  --sombra-carro: rgba(0, 0, 0, 0.6);           /* sombra no chão sob o carro */
  --cor-sucesso: #3ecf8e;
  --cor-alerta: #ffc53d;

  /* Fontes */
  --fonte-titulo: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --fonte-numero: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fonte-texto: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Escala de tipo (fluida entre celular e computador) */
  --tipo-display: clamp(2.2rem, 7vw, 5.5rem);
  --tipo-h1: clamp(1.8rem, 4.5vw, 3.2rem);
  --tipo-h2: clamp(1.4rem, 3vw, 2.2rem);
  --tipo-h3: clamp(1.1rem, 2vw, 1.4rem);
  --tipo-corpo: 1.0625rem;
  --tipo-pequeno: 0.875rem;
  --tipo-rotulo: 0.75rem;
  --tipo-numero-xl: clamp(3rem, 9vw, 6rem);

  /* Espaços */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;
  --esp-9: 7rem;

  /* Forma */
  --raio: 2px;                 /* detalhes pequenos: selo, tabela, caixa de título */
  --raio-midia: 28px;          /* foto e vídeo em moldura, e a tela que desliza sobre outra */
  --raio-cartao: 24px;         /* cartões grandes */
  --raio-pilula: 999px;        /* botões e etiquetas */
  --raio-botao: var(--raio-pilula);
  --largura-max: 1200px;
  --sombra: 0 18px 40px rgba(0, 0, 0, 0.45);
  --transicao: 160ms ease-out;

  /* Novo visual (aprovado pelo Henrique em 12/11/2026): imagem em tela cheia
     e movimento. As regras de uso estão em /design-system, seção Novo visual. */

  /* Tipo de tela inteira */
  --tipo-gigante: clamp(2rem, 8.5vw, 7.5rem);
  --tipo-grande: clamp(1.75rem, 4.6vw, 3.75rem);
  --tipo-frase: clamp(1.5rem, 3.6vw, 3rem);

  /* Véus sobre foto e vídeo, para o texto sempre ler bem */
  --veu-forte: rgba(11, 11, 12, 0.78);
  --veu-medio: rgba(11, 11, 12, 0.45);
  --veu-leve: rgba(11, 11, 12, 0.12);
  --vidro: rgba(255, 255, 255, 0.14);          /* botão translúcido sobre foto */
  --vidro-borda: rgba(255, 255, 255, 0.32);
  --texto-apagado: rgba(255, 255, 255, 0.22);  /* palavra ainda não acesa */
  --brilho-laranja: rgba(247, 98, 1, 0.55);    /* brilho no hover */
  --palco-claro: #34343a;                      /* luz no topo do cartão de carro */

  /* Movimento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);     /* sai rápido, chega devagar */
  --tempo-entrada: 900ms;                      /* bloco que entra na tela */
  --tempo-toque: 450ms;                        /* resposta ao mouse */
}