/* ─── Sistema de temas via CSS custom properties ─── */
/* Tailwind usa data-theme="dark" como selector de modo oscuro */

:root {
  /* Colores del tema claro */
  --color-primary:     #0891b2; /* brand-600 */
  --color-secondary:   #0f172a;
  --color-accent:      #22d3ee; /* brand-400 */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f8fafc;
  --color-text:        #18181b; /* zinc-900 */
  --color-text-light:  #71717a; /* zinc-500 */

  /* Espaciado */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  --border-radius: 0.5rem;
}

[data-theme="dark"] {
  --color-primary:     #22d3ee; /* brand-400 */
  --color-secondary:   #f8fafc;
  --color-accent:      #06b6d4; /* brand-500 */
  --color-bg:          #09090b; /* zinc-950 */
  --color-bg-alt:      #18181b; /* zinc-900 */
  --color-text:        #fafafa; /* zinc-50 */
  --color-text-light:  #a1a1aa; /* zinc-400 */
}

/* ─── Fuentes base ─── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

code, pre, .font-mono {
  font-family: 'Fira Code', ui-monospace, monospace;
}

/* ─── Estilos para el syntax highlighting de Prism ─── */
pre[class*="language-"] {
  border-radius: 0.75rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

code[class*="language-"],
pre[class*="language-"] {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 0.875em;
  line-height: 1.6;
}