/*
    alma-theme.css
    Sistema de dark/light mode para Aunara.
    Default fallback: DARK
*/

/* ─────────────────────────────────────────────────────────────
   DARK MODE (fallback)
   ───────────────────────────────────────────────────────────── */
:root,
[data-mode="dark"] {
    /* Backgrounds */
    --alma-bg: #03040a;
    --alma-bg-2: #0d1117;
    --alma-bg-card: rgba(255,255,255,0.06); /* subido de 0.03 — cards visibles */
    --alma-bg-sidebar: rgba(3,4,10,0.95);
    --alma-bg-nav: rgba(3,4,10,0.88);
    --alma-bg-topbar: rgba(3,4,10,0.88);
    --alma-bg-input: rgba(255,255,255,0.07); /* inputs legibles */
    --alma-bg-hover: rgba(124,58,237,0.12);
    /* Text — contraste AAA sobre #03040a */
    --alma-text: #e8edf2; /* blanco suave, no puro */
    --alma-text-sub: #94a3b8; /* slate-400 */
    --alma-text-muted: #afbbca; /* más claro — contraste suficiente sobre #03040a */
    --alma-text-inv: #ffffff;
    /* Borders */
    --alma-border: rgba(148,163,184,0.10);
    --alma-border-2: rgba(148,163,184,0.18);
    /* Accent */
    --alma-accent: #7c3aed;
    --alma-accent-2: #6d28d9;
    --alma-accent-3: #5b21b6;
    --alma-accent-light: #8c63cb;
    --alma-accent-glow: rgba(124,58,237,0.35);
    --alma-accent-soft: rgba(124,58,237,0.10);
    --alma-accent-border: rgba(124,58,237,0.25);
    /* Decorative orbs */
    --alma-orb-1: rgba(124,58,237,0.12);
    --alma-orb-2: rgba(37,99,235,0.10);
    --alma-orb-3: rgba(14,165,233,0.08);
    /* Skeleton shimmer */
    --sk-base: rgba(255,255,255,0.05);
    --sk-highlight: rgba(255,255,255,0.10);
    /* Navigation */
    --alma-nav-active-bg: rgba(124,58,237,0.18);
    --alma-nav-active-text: #c4b5fd;
    --alma-nav-text: #a1acc0;
    --alma-nav-hover-bg: rgba(124,58,237,0.10);
    /* Gradient title */
    --alma-gradient-title: linear-gradient(135deg, #c4b5fd 0%, #818cf8 50%, #38bdf8 100%);
}

/* ─────────────────────────────────────────────────────────────
   LIGHT MODE
   ───────────────────────────────────────────────────────────── */
[data-mode="light"] {
    /* Backgrounds */
    --alma-bg: #f5f0eb;
    --alma-bg-2: #ede8e3;
    --alma-bg-card: #ffffff;
    --alma-bg-sidebar: #ede8e3;
    --alma-bg-nav: rgba(245,240,235,0.92);
    --alma-bg-topbar: rgba(245,240,235,0.92);
    --alma-bg-input: #ffffff;
    --alma-bg-hover: rgba(124,58,237,0.08);
    /* Text — contraste AAA sobre #f5f0eb */
    --alma-text: #1a1625; /* casi negro, máximo contraste */
    --alma-text-sub: #4a4460; /* más oscuro que antes */
    --alma-text-muted: #495564; /* gris oscuro — contraste 6.67:1 */ /* gris medio, legible */
    --alma-text-inv: #ffffff;
    /* Borders */
    --alma-border: rgba(0,0,0,0.08);
    --alma-border-2: rgba(0,0,0,0.13);
    /* Accent */
    --alma-accent: #7c3aed;
    --alma-accent-2: #6d28d9;
    --alma-accent-3: #5b21b6;
    --alma-accent-light: #3f177f; /* violeta oscuro — contraste 7.93:1 */
    --alma-accent-glow: rgba(124,58,237,0.22);
    --alma-accent-soft: rgba(124,58,237,0.08);
    --alma-accent-border: rgba(124,58,237,0.18);
    /* Decorative orbs */
    --alma-orb-1: rgba(124,58,237,0.06);
    --alma-orb-2: rgba(37,99,235,0.05);
    --alma-orb-3: rgba(14,165,233,0.04);
    /* Skeleton shimmer */
    --sk-base: rgba(0,0,0,0.05);
    --sk-highlight: rgba(0,0,0,0.10);
    /* Navigation */
    --alma-nav-active-bg: rgba(124,58,237,0.12);
    --alma-nav-active-text: #5b21b6;
    --alma-nav-text: #4a4460;
    --alma-nav-hover-bg: rgba(124,58,237,0.08);
    /* Gradient title */
    --alma-gradient-title: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #2563eb 100%);
}

/* ─────────────────────────────────────────────────────────────
   TRANSITIONS
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
    transition: background-color 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, box-shadow 0.25s ease;
}
/* No romper animaciones */
*[style*="animation"], .animate-spin, [class*="spin"] {
    transition: none !important;
}

/* ─────────────────────────────────────────────────────────────
   MODE BUTTON ICONS
   ───────────────────────────────────────────────────────────── */
.alma-icon-sun  { display: none; }
.alma-icon-moon { display: block; }

[data-mode="light"] .alma-icon-sun  { display: none; }
[data-mode="light"] .alma-icon-moon { display: block; }

[data-mode="dark"] .alma-icon-sun  { display: block; }
[data-mode="dark"] .alma-icon-moon { display: none; }