/* ============================================================
   Expens-f — Sistema de Variables CSS
   Dark mode por defecto · Light mode con [data-theme="light"]
   ============================================================ */

/* ---- Dark Mode (default) ---- */
:root {
    /* Fondos */
    --bg-primary:          #0F1117;
    --bg-surface:          #1A1D27;
    --bg-elevated:         #22263A;
    --bg-overlay:          rgba(0, 0, 0, 0.6);

    /* Acentos */
    --color-primary:       #6C63FF;
    --color-primary-hover: #5A52E0;
    --color-primary-rgb:   108, 99, 255;
    --color-primary-alpha: rgba(108, 99, 255, 0.12);
    --color-secondary:     #00D4AA;
    --color-secondary-rgb: 0, 212, 170;

    /* Texto */
    --text-primary:        #F0F2FF;
    --text-secondary:      #8B8FA8;
    --text-muted:          #5A5E75;
    --text-on-primary:     #FFFFFF;

    /* Estados */
    --color-danger:        #FF6B6B;
    --color-danger-rgb:    255, 107, 107;
    --color-warning:       #FFB347;
    --color-warning-rgb:   255, 179, 71;
    --color-success:       #00D4AA;
    --color-success-rgb:   0, 212, 170;
    --color-info:          #5BC8F5;

    /* Bordes */
    --border-color:        rgba(255, 255, 255, 0.08);
    --border-color-focus:  var(--color-primary);
    --border-radius-sm:    4px;
    --border-radius:       8px;
    --border-radius-lg:    12px;
    --border-radius-xl:    20px;
    --border-radius-full:  9999px;

    /* Sombras */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow:      0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.2);

    /* Espaciado (sistema de 8px) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Tipografía */
    --font-family:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:  clamp(0.7rem, 1.5vw, 0.75rem);
    --font-size-sm:  clamp(0.8rem, 1.8vw, 0.875rem);
    --font-size-md:  clamp(0.875rem, 2vw, 1rem);
    --font-size-lg:  clamp(1rem, 2.5vw, 1.125rem);
    --font-size-xl:  clamp(1.1rem, 3vw, 1.25rem);
    --font-size-2xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-size-3xl: clamp(1.5rem, 5vw, 2rem);
    --font-size-4xl: clamp(1.75rem, 6vw, 2.5rem);

    /* Transiciones */
    --transition-base:  200ms ease;
    --transition-slow:  300ms ease;

    /* Layout */
    --sidebar-width:       260px;
    --sidebar-width-collapsed: 0px;
    --topbar-height:       60px;
    --bottom-nav-height:   68px;
    --content-max-width:   1400px;

    /* Glassmorphism */
    --glass-bg:     rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur:   blur(12px);
}

/* ---- Light Mode ---- */
[data-theme="light"] {
    /* Fondos */
    --bg-primary:   #F4F6FF;
    --bg-surface:   #FFFFFF;
    --bg-elevated:  #EEF0FF;
    --bg-overlay:   rgba(0, 0, 0, 0.4);

    /* Acentos */
    --color-primary:       #5B54E8;
    --color-primary-hover: #4A44CC;
    --color-primary-rgb:   91, 84, 232;
    --color-primary-alpha: rgba(91, 84, 232, 0.12);
    --color-secondary:     #00B896;
    --color-secondary-rgb: 0, 184, 150;

    /* Texto */
    --text-primary:   #1A1D27;
    --text-secondary: #6B6F85;
    --text-muted:     #9CA0B5;

    /* Bordes */
    --border-color: rgba(0, 0, 0, 0.08);

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

    /* Glassmorphism */
    --glass-bg:     rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.06);
}