@custom-variant dark (&:where(.dark, .dark *));

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    @apply min-h-screen bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
  }

  /* Foco visible accesible: anillo azul en elementos interactivos */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
  }
}