/* ==========================================================================
   VITORINO — MARCA (cores e fontes)
   --------------------------------------------------------------------------
   ESTE É O ÚNICO LUGAR onde a identidade visual é definida.
   Trocou uma das 4 cores ou uma fonte aqui? O site inteiro (loja, carrinho,
   checkout, editor de blocos) acompanha. Nada de cor solta em outros arquivos.
   ========================================================================== */

:root {
  /* ---- Cores da marca ------------------------------------------------- */
  --vt-brand-blue: #3254a0;   /* primária: botões, links, topo, destaques */
  --vt-brand-cyan: #33c4d8;   /* apoio: selos, botão de destaque, detalhes */
  --vt-brand-gray: #e2e4e1;   /* neutra: fundos de seção, bordas, rodapé */
  --vt-brand-white: #ffffff;  /* base */

  /* ---- Fontes da marca ------------------------------------------------ */
  /* Arquivos em assets/fonts/ (declarados em fonts.css). */
  --vt-font-heading: "Aileron", "Helvetica Neue", Arial, sans-serif;  /* títulos */
  --vt-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* corpo */

  /* ======================================================================
     Derivadas — calculadas a partir das cores acima (não precisa editar)
     ====================================================================== */
  --vt-primary: var(--vt-brand-blue);
  --vt-primary-hover: color-mix(in srgb, var(--vt-brand-blue) 80%, #000);
  --vt-primary-deep: color-mix(in srgb, var(--vt-brand-blue) 55%, #000);
  --vt-primary-soft: color-mix(in srgb, var(--vt-brand-blue) 9%, #fff);

  --vt-accent: var(--vt-brand-cyan);
  --vt-accent-hover: color-mix(in srgb, var(--vt-brand-cyan) 84%, #000);

  /* Texto: azul da marca escurecido (contraste alto sobre branco e cinza). */
  --vt-ink: color-mix(in srgb, var(--vt-brand-blue) 28%, #000);
  --vt-text: var(--vt-ink);
  --vt-text-muted: color-mix(in srgb, var(--vt-ink) 72%, #fff);

  --vt-bg: var(--vt-brand-white);
  --vt-surface: var(--vt-brand-gray);
  --vt-surface-soft: color-mix(in srgb, var(--vt-brand-gray) 42%, #fff);
  --vt-border: var(--vt-brand-gray);
  --vt-border-strong: color-mix(in srgb, var(--vt-brand-gray) 40%, var(--vt-ink));

  /* Texto sobre cada fundo (o ciano NUNCA recebe texto branco: contraste ~2:1). */
  --vt-on-primary: var(--vt-brand-white);
  --vt-on-accent: var(--vt-ink);

  /* Estados (fora da paleta da marca: necessários para avisos do WooCommerce). */
  --vt-danger: #b42318;
  --vt-success: #1a7f4b;

  /* ---- Forma e ritmo -------------------------------------------------- */
  --vt-radius: 10px;
  --vt-radius-sm: 6px;
  --vt-radius-pill: 999px;
  --vt-shadow: 0 6px 20px color-mix(in srgb, var(--vt-ink) 10%, transparent);
  --vt-shadow-lg: 0 16px 40px color-mix(in srgb, var(--vt-ink) 18%, transparent);
  --vt-container: 1240px;
  --vt-header-h: 72px;
  --vt-ease: 0.22s ease;
}