/* ============================================================
   DESIGN TOKENS — densidade mobile (padrao do site inteiro)

   Cada pagina/componente novo deve usar estas variaveis (var(--mv-*))
   em vez de valores fixos, para nao precisar reescrever @media a
   cada tela nova. Redefinidas abaixo de 767px com a densidade
   "app nativo" ja validada em product_list/dashboard/category_list.

   Uso: font-size: var(--mv-title-lg, 1.75rem);
   (o segundo valor e so o fallback de seguranca, quem manda e o token)
   ============================================================ */

:root {
    --mv-title-lg: 1.75rem;   /* titulo principal de pagina/secao */
    --mv-title-sm: 1.05rem;   /* titulo de card/linha secundaria */
    --mv-space-lg: 2rem;      /* respiro de secao, margem do hero */
    --mv-space-md: 1rem;      /* padding de card, gap entre itens */
    --mv-space-sm: 0.75rem;   /* gaps apertados */
    --mv-text-body: 0.875rem; /* texto corrido padrao */
    --mv-text-caption: 0.75rem; /* legendas, notas, contagens */
}

@media (max-width: 767px) {
    :root {
        --mv-title-lg: 1.15rem;
        --mv-title-sm: 0.85rem;
        --mv-space-lg: 1.5rem;
        --mv-space-md: 0.65rem;
        --mv-space-sm: 0.45rem;
        --mv-text-body: 0.8rem;
        --mv-text-caption: 0.64rem;
    }
}