/* ============================================================
   styles.css — QR Code (Grifo Tools)
   Responsabilidade: Estilos minimos nao cobertos pelo Tailwind
   Dependencias: nenhuma
   ============================================================ */

html { scroll-behavior: smooth; }
:focus { outline: 2px solid #802B22; outline-offset: 2px; }

/* Preview sempre contido no card, proporcao 1:1 */
#preview { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
#preview canvas,
#preview svg { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; }
/* ── Transicoes suaves de tema ── */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Dark mode ── */
html.dark body {
  background-color: #0f0f0f;
  color: #f5f5f5;
}
html.dark section,
html.dark .bg-white,
html.dark .bg-neutral-50 {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
}
html.dark input:not([type='color']):not([type='checkbox']):not([type='radio']):not([type='range']),
html.dark select,
html.dark textarea {
  background-color: #111111;
  border-color: #333333;
  color: #f5f5f5;
}
html.dark .text-neutral-800,
html.dark .text-neutral-700,
html.dark .text-neutral-900 { color: #f5f5f5; }
html.dark .text-neutral-500,
html.dark .text-neutral-400 { color: #a0a0a0; }
html.dark .border-neutral-200,
html.dark .border-neutral-300 { border-color: #2a2a2a; }