/* =============================================================
   Emprendapp · Design Tokens v2
   Rediseño: glassmorphism + gradiente azul/violeta (tema oscuro,
   default) y estilo "Outlook" (tema claro, opt-in vía body.light-theme).
   Mismos NOMBRES de variable que v1 para no romper ningún selector
   existente — solo cambian los valores y se suman tokens nuevos.
   ============================================================= */

:root {
    /* --- Superficies --- */
    --fondo:        #0a0a0f;
    --fondo-2:      #050507;
    --panel:        rgba(255, 255, 255, 0.04);
    --panel-solido: #13131a;
    --panel-borde:  rgba(255, 255, 255, 0.09);

    /* --- Texto --- */
    --texto:        #f3f3f8;
    --texto-tenue:  #97a0b3;

    /* --- Acento: gradiente azul → violeta --- */
    --acento:        #3b82f6;
    --acento-2:      #8b5cf6;
    --gradiente:     linear-gradient(135deg, var(--acento), var(--acento-2));
    --acento-tenue:  rgba(139, 92, 246, 0.14);

    --exito: #34d399;
    --error: #f87171;

    /* --- Tipografía ---
       Mantenemos Space Grotesk para títulos (ya encajaba con el nuevo
       diseño). Pasamos los datos/cuerpo de monoespaciada a Inter: el
       nuevo rumbo es "SaaS premium", no "consola de impresora". */
    --fuente-titulo: 'Space Grotesk', sans-serif;
    --fuente-datos:  'Inter', sans-serif;

    /* --- Vidrio (glassmorphism) --- */
    --glass-blur:   14px;
    --glass-sombra: 0 8px 32px rgba(0, 0, 0, 0.35);

    /* --- Layout --- */
    --sidebar-ancho: 240px;
    --topbar-alto: 64px;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   Tema claro — inspirado en Outlook / Microsoft 365
   Se activa agregando la clase .light-theme a <body> (ver landing.js).
   Mismos nombres de variable: todo lo que ya está construido con
   var(--acento), var(--panel), etc. se adapta solo, sin tocar cada
   selector uno por uno.
   ============================================================= */
body.light-theme {
    --fondo:        #faf9f8;
    --fondo-2:      #ffffff;
    --panel:        #ffffff;
    --panel-solido: #ffffff;
    --panel-borde:  #e1dfdd;

    --texto:        #201f1e;
    --texto-tenue:  #605e5c;

    --acento:       #0078d4;
    --acento-2:     #28a8ea;
    --gradiente:    linear-gradient(135deg, #0078d4, #28a8ea);
    --acento-tenue: rgba(0, 120, 212, 0.08);

    --exito: #107c10;
    --error: #d13438;

    --glass-blur:   0px;
    --glass-sombra: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.11);
}