/* UniTracker · tokens do mundo "Aviso de venda" (tema claro)
   Contrato único entre página, palco de avisos e vídeo. Cor nova entra aqui, nunca solta no CSS. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* chão e superfícies */
  --papel: #F3F5F9;          /* chão da página */
  --papel-fundo: #EAEEF4;    /* seção afundada */
  --cartao: #FFFFFF;         /* aviso, widget */
  --fio: #DCE2EB;            /* divisória fina */
  --fio-forte: #C5CEDB;

  /* tinta (contraste conferido sobre --papel e --cartao) */
  --tinta: #0D1424;          /* 17:1 */
  --tinta-2: #3A4458;        /* 8,9:1 texto de apoio */
  --tinta-3: #5B6577;        /* 5,4:1 rótulo e legenda, nunca abaixo disso */

  /* o sinal: um só, para rastro e ação */
  --cobalto: #2251FF;        /* texto branco sobre ele: 5,7:1 */
  --cobalto-forte: #1638C9;  /* hover e pressionado */
  --cobalto-medio: #9DB2FF;  /* fichas em espera, rastro inativo */
  --cobalto-claro: #E6ECFF;  /* fundo de destaque */

  /* semântica de dado: preencher com a cor, escrever com a versão -texto */
  --verde: #0E9F5A;  --verde-texto: #0B7A45;  --verde-claro: #E3F6EC;   /* venda confirmada, escalar */
  --ambar: #F0A202;  --ambar-texto: #8A5A00;  --ambar-claro: #FEF3D9;   /* manter, atenção */
  --coral: #EF4B3F;  --coral-texto: #C2321F;  --coral-claro: #FDE9E6;   /* sinal perdido, pausar */

  /* tipografia */
  --f-titulo: "Archivo", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura-titulo: 112%;    /* Archivo semi-expandida */
  --t-display: clamp(2.25rem, calc(0.875rem + 3.4vw), 5rem);      /* 36px · 63px em 1440 · 80px só em 1920 */
  --t-h2: clamp(1.75rem, calc(0.75rem + 2.2vw), 3.375rem);        /* 28px · 44px em 1440 · 54px em 1920 */
  --t-h3: clamp(1.25rem, calc(0.875rem + 0.7vw), 1.625rem);       /* 20px · 24px em 1440 · 26px */
  --t-numero: clamp(2.5rem, calc(1rem + 3vw), 4.5rem);            /* numeral de widget */
  --t-corpo-g: 1.1875rem;    /* 19px, linha de apoio */
  --t-corpo: 1.0625rem;      /* 17px */
  --t-ui: 0.9375rem;         /* 15px */
  --t-rotulo: 0.8125rem;     /* 13px, menor permitido */
  --track-display: -0.03em;
  --track-h2: -0.025em;
  --track-rotulo: 0.01em;

  /* grade mestra (raise do cartaz suíço): 12 colunas no desktop, 4 no celular */
  --conteudo: 1240px;
  --margem: clamp(20px, 5vw, 100px);
  --calha: clamp(16px, 2vw, 24px);

  /* espaço, base 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --secao: clamp(72px, 9vw, 140px);

  /* forma: material do aviso de celular */
  --r-aviso: 20px;
  --r-widget: 20px;
  --r-pequeno: 10px;
  --r-controle: 999px;
  --icone: 20px;             /* ícone de linha, traço 1.75 */

  /* profundidade: só sombra, nunca borda junto */
  --sombra-aviso: 0 1px 2px rgba(13, 20, 36, .06), 0 10px 28px -8px rgba(13, 20, 36, .16);
  --sombra-widget: 0 1px 2px rgba(13, 20, 36, .05), 0 6px 18px -8px rgba(13, 20, 36, .12);
  --sombra-flutua: 0 2px 4px rgba(13, 20, 36, .06), 0 24px 48px -16px rgba(13, 20, 36, .22);

  /* movimento */
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);     /* exponencial de saída */
  --ease-mola: cubic-bezier(0.22, 1, 0.36, 1);     /* ficha assentando na barra: desaceleração suave, sem quique */
  --d-curta: 220ms;
  --d-media: 420ms;
  --d-longa: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-curta: 0ms; --d-media: 0ms; --d-longa: 0ms; }
}