/* =====================================================================
   ESMITAREA.COM — Design tokens
   ---------------------------------------------------------------------
   ¿CÓMO CAMBIAR LOS COLORES DE TODO EL SISTEMA?
   Este archivo es el ÚNICO lugar que necesitas editar. Todos los demás
   archivos CSS (main.css, panel.css, login.css) usan estas variables
   con var(--nombre-color) en vez de colores fijos, así que si cambias
   un valor aquí, se actualiza en TODO el sistema automáticamente
   (landing, dashboard de docente/alumno/admin, login).

   Paleta inspirada en un diseño tipo "colegio": azul confianza,
   verde hoja (crecimiento), rosa/magenta (energía, diversión),
   dorado (logros), y un navy oscuro para textos importantes.
   ===================================================================== */

:root {
    /* ---- Color primario: Azul (confianza, aprendizaje) ---- */
    --azul-900: #0B3D91;   /* navy oscuro, para títulos y fondos fuertes */
    --azul-700: #1257C7;   /* azul principal de marca */
    --azul-500: #1E7BFF;   /* azul de acento, botones */
    --celeste-400: #4FC3F7;
    --celeste-200: #B3E5FC;

    /* ---- Color secundario: Verde (crecimiento, naturaleza) ---- */
    --verde: #22C55E;
    --verde-hoja: #2E8B57;   /* verde más profundo, tipo hojita del diseño de referencia */
    --verde-claro: #86EFAC;

    /* ---- Color de energía: Rosa/Magenta (diversión, para niños) ---- */
    --rosa: #EC4899;
    --rosa-claro: #FBCFE8;
    --rosa-oscuro: #BE185D;

    /* ---- Color de logros: Dorado ---- */
    --oro: #FFC107;
    --oro-oscuro: #F59E0B;

    /* ---- Rojo / vino: alertas y acentos vivos ---- */
    --rojo: #EF4444;
    --rojo-vivo: #E11D48;
    --vino: #7A1E3C;
    --vino-claro: #A6335A;

    /* ---- Neutros ---- */
    --blanco: #FFFFFF;
    --gris-suave: #F4F8FC;
    --gris-texto: #4A5568;
    --crema: #FFF7ED;   /* fondo cálido tipo el de la referencia, uso opcional */

    /* ---- Gradientes de marca (se arman solos con los colores de arriba) ---- */
    --gradiente-principal: linear-gradient(135deg, var(--azul-700) 0%, var(--celeste-400) 100%);
    --gradiente-oro: linear-gradient(135deg, #FFD54F 0%, var(--oro-oscuro) 100%);
    --gradiente-vino: linear-gradient(135deg, var(--vino) 0%, var(--rojo-vivo) 100%);
    --gradiente-verde: linear-gradient(135deg, var(--verde) 0%, var(--verde-hoja) 100%);
    --gradiente-rosa: linear-gradient(135deg, var(--rosa) 0%, var(--rosa-oscuro) 100%);
    --gradiente-glass: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25));

    /* Tipografía */
    --fuente-display: 'Poppins', sans-serif;
    --fuente-cuerpo: 'Nunito', sans-serif;
    --fuente-alt: 'Montserrat', sans-serif;

    /* Radios y sombras — más redondeado = más "amigable para colegio" */
    --radio-sm: 12px;
    --radio-md: 20px;
    --radio-lg: 30px;
    --sombra-suave: 0 8px 24px rgba(18, 87, 199, 0.10);
    --sombra-media: 0 16px 40px rgba(18, 87, 199, 0.16);
    --sombra-glass: 0 8px 32px rgba(31, 100, 200, 0.15);

    /* Espaciado */
    --espacio-seccion: clamp(3.5rem, 6vw, 6rem);
}