@import "tailwindcss";

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

@theme {
  /* Fuentes */
  --font-display: "Lexend", sans-serif;
  --font-body: "Noto Sans", sans-serif;

  /* Colores Base (Ya los tenías) */
  --color-primary: #0d59f2;
  --color-background-light: #f5f6f8;
  --color-background-dark: #101622;
  --color-ui-dark: #0d121c;
  --color-ui-secondary: #49659c;
  --color-ui-border: #e7ebf4;

  /* --- NUEVOS COLORES PARA DETALLE DE CURSO --- */
  --color-primary-dark: #0b4dc5;      /* Hover del botón comprar */
  --color-surface-light: #ffffff;     /* Fondos de tarjetas light */
  --color-surface-dark: #1a2235;      /* Fondos de tarjetas dark */
  --color-text-main: #0d121c;         /* Texto principal */
  --color-text-sub: #49659c;          /* Texto secundario */
  /* Sombra personalizada del instructor */
  --shadow-instructor: 0 4px 20px -2px rgba(13, 89, 242, 0.08);
}

body {
  @apply bg-background-light dark:bg-background-dark text-ui-dark dark:text-white font-display antialiased overflow-x-hidden transition-colors duration-300;
}