/*
 * Sul Fluminense Veículos — tokens de marca (SPEC-10).
 * Fonte da verdade: Design System "Sul Fluminense Veículos" no Claude Design (ver docs/marca/README.md).
 * Conceito 4 "Velocidade", aprovado em 2026-10-03. Contraste dos pares de texto verificado (WCAG AA).
 * Não crie cor de marca fora deste arquivo: use var(--sfv-*).
 */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/fonts/sfv/archivo-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../lib/fonts/sfv/archivo-800.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 800; font-display: swap; src: url("../lib/fonts/sfv/archivo-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 900; font-display: swap; src: url("../lib/fonts/sfv/archivo-900-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/fonts/sfv/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/fonts/sfv/source-sans-3-600.woff2") format("woff2"); }

:root {
  /* Cores de marca */
  --sfv-primaria: #D7261E;            /* vermelho Velocidade: ação principal, preço, destaques (branco sobre ela 5,0:1) */
  --sfv-primaria-escura: #B01E17;     /* hover/pressed (branco 6,9:1) */
  --sfv-primaria-contraste: #FFFFFF;
  --sfv-primaria-rgb: 215, 38, 30;
  --sfv-primaria-negativo: #FF4136;   /* vermelho sobre fundo preto (5,5:1) */
  --sfv-secundaria: #111111;          /* preto: topo, rodapé, faixas */
  --sfv-secundaria-contraste: #FFFFFF;
  --sfv-acento: #FFC20E;              /* amarelo sinalização: selos ("Baixou o preço"), sempre com texto preto (11,7:1) */
  --sfv-acento-contraste: #111111;

  /* Neutros */
  --sfv-texto: #111111;
  --sfv-texto-suave: #5A5F66;         /* 6,4:1 no branco, 5,9:1 no fundo */
  --sfv-fundo: #F5F5F4;
  --sfv-superficie: #FFFFFF;
  --sfv-borda: #E2E2E0;

  /* Estados */
  --sfv-sucesso: #1E7B4F;
  --sfv-alerta: #9A5B00;
  --sfv-erro: #B42318;
  --sfv-info: #1F5F8B;

  /* Tipografia */
  --sfv-fonte-marca: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;   /* itálico 800/900: momentos de marca */
  --sfv-fonte-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;               /* 700/800 reto: títulos */
  --sfv-fonte-texto: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;         /* 400/600: corpo e interface */
  --sfv-tamanho-base: 1rem;
  --sfv-escala: 1.25;
  --sfv-fs-sm: 0.875rem;
  --sfv-fs-md: 1rem;
  --sfv-fs-lg: 1.25rem;
  --sfv-fs-xl: 1.5625rem;
  --sfv-fs-2xl: 1.953rem;
  --sfv-fs-3xl: 2.441rem;
  --sfv-altura-linha: 1.5;

  /* Forma */
  --sfv-raio-sm: 4px;
  --sfv-raio-md: 8px;
  --sfv-raio-lg: 12px;
  --sfv-sombra-card: 0 1px 2px rgba(17, 17, 17, .06), 0 4px 12px rgba(17, 17, 17, .08);
  --sfv-inclinacao: -10deg;           /* ângulo das faixas de movimento (selos e detalhes) */

  /* Espaçamento (base 4 px) */
  --sfv-espaco-1: .25rem;
  --sfv-espaco-2: .5rem;
  --sfv-espaco-3: .75rem;
  --sfv-espaco-4: 1rem;
  --sfv-espaco-5: 1.5rem;
  --sfv-espaco-6: 2rem;
  --sfv-espaco-7: 3rem;
  --sfv-espaco-8: 4rem;
}

/* Variantes para fundos escuros (painel admin em tema escuro) */
[data-bs-theme="dark"] {
  --sfv-primaria: #FF5A4F;            /* 5,7:1 sobre #1A1A1A */
  --sfv-primaria-escura: #FF7A70;
  --sfv-primaria-contraste: #111111;
  --sfv-primaria-rgb: 255, 90, 79;
  --sfv-texto: #E8E8E6;
  --sfv-texto-suave: #A3A8AE;
  --sfv-fundo: #111111;
  --sfv-superficie: #1A1A1A;
  --sfv-borda: #2E2E2E;
}

/* Utilitários de marca */
.sfv-selo {
  display: inline-block;
  padding: .15em .6em;
  background: var(--sfv-acento);
  color: var(--sfv-acento-contraste);
  font-family: var(--sfv-fonte-marca);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  transform: skewX(var(--sfv-inclinacao));
}
.sfv-preco {
  font-family: var(--sfv-fonte-titulo);
  font-weight: 800;
  color: var(--sfv-primaria);
  font-variant-numeric: tabular-nums;
}