/* ==========================================================================
   Draive · Tokens (wireframe)
   Base do futuro design system. Tudo que é visual deve vir daqui:
   ao aplicar a identidade, troque os valores, não os componentes.

   Breakpoints (CSS não aceita var() em @media, então ficam documentados):
     --dv-bp-sm:  600px   celular grande
     --dv-bp-md:  900px   tablet / sidebar de filtros vira coluna
     --dv-bp-lg: 1100px   header completo (nav + busca na mesma barra)
   ========================================================================== */

:root {
  /* Cores: escala de cinza (wireframe) */
  --dv-cor-fundo: #ffffff;
  --dv-cor-superficie: #f7f8f9;
  --dv-cor-superficie-2: #e9e9e9;
  --dv-cor-borda: #d4d4d4;
  --dv-cor-borda-forte: #8f8f8f;
  --dv-cor-texto: #10172d;
  --dv-cor-texto-suave: #5a5a5a;
  --dv-cor-primaria: #10172d;
  --dv-cor-primaria-hover: #253052;
  --dv-cor-primaria-texto: #ffffff;
  --dv-cor-foco: #000000;  /* preto: contraste 21:1 sobre branco; sobre fundo escuro (toast, barra do carrinho) o anel vira branco */

  /* Acento da marca: ações principais e estado "ativo". Sempre com texto escuro #10172d
     (contraste ~11:1). Não usar como cor de texto ou borda fina sobre branco (~1,6:1). */
  --dv-cor-acento: #01e0b0;
  --dv-cor-acento-hover: #00c79c;
  --dv-cor-acento-texto: #10172d;
  --dv-cor-acento-suave: #e0fbf5;
  --dv-cor-logo: var(--dv-cor-texto);  /* texto e borda do logo; o seletor de marca (marca.js) troca pela cor da marca */

  /* Status (avisos, badges, mensagens). Par cor + fundo: a cor serve para texto, ícone e borda;
     o fundo é translúcido e assume o tom da superfície onde está. */
  --dv-cor-sucesso: #0c8e71;
  --dv-cor-sucesso-fundo: rgb(1 224 176 / 0.14);
  --dv-cor-alerta: #a16207;
  --dv-cor-alerta-fundo: rgb(234 179 8 / 0.16);
  --dv-cor-erro: #a02c08;
  --dv-cor-erro-hover: #802306;
  --dv-cor-erro-fundo: rgb(255 60 0 / 0.12);
  --dv-cor-info: #1d4ed8;
  --dv-cor-info-fundo: rgb(59 130 246 / 0.14);
  --dv-cor-secundaria: var(--dv-cor-texto);
  --dv-cor-secundaria-fundo: rgb(10 10 10 / 0.08);

  --dv-cor-overlay: rgb(16 23 45 / 0.45);

  /* Tipografia */
  --dv-fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dv-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dv-texto-xs: 0.75rem;
  --dv-texto-sm: 0.875rem;
  --dv-texto-md: 1rem;
  --dv-texto-lg: 1.125rem;
  --dv-texto-xl: 1.375rem;
  --dv-texto-2xl: 1.75rem;
  --dv-peso-normal: 400;
  --dv-peso-medio: 500;
  --dv-peso-forte: 650;
  --dv-altura-linha: 1.5;

  /* Espaçamentos (escala de 4px) */
  --dv-esp-1: 0.25rem;
  --dv-esp-2: 0.5rem;
  --dv-esp-3: 0.75rem;
  --dv-esp-4: 1rem;
  --dv-esp-5: 1.5rem;
  --dv-esp-6: 2rem;
  --dv-esp-7: 2.5rem;
  --dv-esp-8: 3rem;
  --dv-gutter: 1rem;

  /* Formas */
  --dv-raio-sm: 4px;
  --dv-raio-md: 8px;
  --dv-raio-lg: 12px;
  --dv-raio-pill: 999px;
  --dv-borda: 1px solid var(--dv-cor-borda);
  --dv-sombra-1: 0 1px 2px rgb(16 23 45 / 0.08);
  --dv-sombra-2: 0 8px 24px rgb(16 23 45 / 0.14);

  /* Anel de foco do teclado: aplicado em todo :focus-visible (base.css). Não remover. */
  --dv-foco-largura: 1.5px;
  --dv-foco: var(--dv-foco-largura) solid var(--dv-cor-foco);

  /* Layout */
  --dv-largura-max: 1280px;
  --dv-largura-drawer: min(420px, 100vw);
  --dv-altura-controle: 2.5rem;
  --dv-z-header: 20;

  /* Movimento */
  --dv-duracao: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dv-duracao: 0ms; }
}