/* ==========================================================================
   VistoFácil — Design Tokens (TEMA CLARO)
   Visual leve e arejado, com o LARANJA da marca como destaque.
   (O dark continua só na landing de marketing.)
   ========================================================================== */

:root {
  /* --- Marca / Laranja (destaque) --- */
  --vf-laranja: #f57c2f;          /* cor principal da marca */
  --vf-laranja-claro: #ff9f3b;
  --vf-laranja-medio: #ff8b1c;
  --vf-laranja-intenso: #ff6900;
  --vf-laranja-glow: #ff8c00;
  --vf-laranja-escuro: #d95e18;

  /* --- Gradientes da marca --- */
  --vf-grad-laranja: linear-gradient(135deg, #ff9f3b, #f57c2f);
  --vf-grad-botao: linear-gradient(135deg, #ff8b1c, #f57c2f);

  /* --- Acento azul (opcional) --- */
  --vf-azul: #2f6df0;
  --vf-azul-escuro: #1f4fb0;

  /* --- Superfícies (CLARAS E QUENTES — menos branco, mais marca) --- */
  --vf-bg: #fdf2e9;               /* fundo geral (creme quente) */
  --vf-bg-grad: radial-gradient(circle at 50% -8%, #ffe2c9 0%, #fdf0e4 38%, #fbe8da 100%);
  --vf-surface: #fffaf5;          /* cards (branco levemente quente) */
  --vf-surface-2: #fbf1e8;        /* inputs / áreas internas */

  /* --- Texto (ESCURO sobre claro) --- */
  --vf-texto: #1b2433;            /* títulos / texto forte */
  --vf-texto-suave: #404a5a;
  --vf-texto-fraco: #687284;      /* secundário */
  --vf-texto-mute: #9aa4b2;       /* placeholder */

  /* --- Bordas (levemente alaranjadas — as "margens" da marca) --- */
  --vf-borda: #f3d9c2;
  --vf-borda-forte: #eec7a8;
  --vf-borda-laranja: rgba(245, 124, 47, 0.5);

  /* --- Estados --- */
  --vf-sucesso: #157347;
  --vf-erro: #b42318;
  --vf-aviso: #b25e00;

  /* --- Sombras (suaves) --- */
  --vf-sombra-card: 0 12px 32px rgba(20, 30, 50, 0.08);
  --vf-sombra-laranja: 0 8px 20px rgba(245, 124, 47, 0.28);
  --vf-glow-laranja: 0 8px 22px rgba(245, 124, 47, 0.30);

  /* --- Raios --- */
  --vf-raio: 14px;
  --vf-raio-lg: 20px;
  --vf-raio-pill: 999px;

  /* --- Tipografia --- */
  --vf-fonte: -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

  /* --- Layout --- */
  --vf-gap: 16px;
  --vf-container: 460px;

  /* --- Cor da barra do navegador (PWA) --- */
  --vf-theme-color: #ffffff;
}

/* ===== Tema do VISTORIADOR (azul) — quando body[data-tema="vistoriador"] ===== */
body[data-tema="vistoriador"] {
  --vf-laranja: #2563eb;
  --vf-laranja-claro: #3b82f6;
  --vf-laranja-medio: #3b82f6;
  --vf-laranja-intenso: #1d4ed8;
  --vf-laranja-glow: #3b82f6;
  --vf-laranja-escuro: #1d4ed8;
  --vf-grad-laranja: linear-gradient(135deg, #3b82f6, #2563eb);
  --vf-sombra-laranja: 0 8px 20px rgba(37, 99, 235, 0.28);
}