/* ═══════════════════════════════════════════════════════════
   MILLION DOLLAR BABY - Design Tokens
   Variables centralizadas para consistencia visual
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Nordic Calm Theme - Paleta Suave y Profesional */
    --bg-main: #F8FAFC;       /* Slate 50 - Gris muy pálido y cálido */
    --bg-card: #FFFFFF;       /* Blanco para tarjetas */

    /* Text Colors - Gris oscuro suave (NUNCA negro puro) */
    --text-primary: #231c1c;  /* Slate 700 - Gris oscuro suave */
    --text-secondary: #64748B; /* Slate 500 */
    --text-muted: #94A3B8;    /* Slate 400 */

    /* Accent Colors - Colores mate, NO neones */
    --accent-primary: #4F46E5; /* Indigo 600 - Elegante */
    --accent-secondary: #E0E7FF; /* Indigo 100 - Fondos suaves */
    --accent-success: #10B981; /* Emerald 500 - Verde natural */
    --accent-danger: #EF4444;  /* Red 500 - Rojo mate */

    /* Borders & Shadows - Suaves */
    --glass-border: #E2E8F0;   /* Slate 200 */
    --glass-bg: #FFFFFF;
    --card-shadow: var(--shadow-md);

    /* Brand Colors - Nordic Calm */
    --color-primary: #4F46E5; /* Indigo 600 */
    --color-primary-light: #6366F1; /* Indigo 500 */
    --color-accent: #4F46E5;
    --color-accent-hover: #4338CA; /* Indigo 700 */
    --color-secondary: #64748B; /* Slate 500 */
    --color-gold: #F59E0B; /* Amber 500 - Dorado suave */
    --color-gold-dark: #D97706; /* Amber 600 */

    /* Semantic Colors - Tonos suaves */
    --color-success: #10B981; /* Emerald 500 */
    --color-success-bg: #D1FAE5; /* Emerald 100 */
    --color-success-border: #34D399; /* Emerald 400 */
    --color-warning: #F59E0B; /* Amber 500 */
    --color-warning-bg: #FEF3C7; /* Amber 100 */
    --color-warning-border: #FBBF24; /* Amber 400 */
    --color-danger: #EF4444; /* Red 500 */
    --color-danger-bg: #FEE2E2; /* Red 100 */
    --color-danger-border: #F87171; /* Red 400 */
    --color-info: #4F46E5; /* Indigo 600 */
    --color-info-bg: #E0E7FF; /* Indigo 100 */
    --color-info-border: #818CF8; /* Indigo 400 */

    /* Neutral Colors - Nordic Calm */
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F1F5F9; /* Slate 100 */
    --color-surface-dark: #E2E8F0; /* Slate 200 */
    --color-border: #E2E8F0;
    --color-border-light: #F1F5F9;
    --color-text: #334155; /* Slate 700 - Suave */
    --color-text-secondary: #64748B;
    --color-text-muted: #94A3B8;
    --color-text-inverse: #FFFFFF;

    /* Card Gradients - Suaves y mate (NO intensos) */
    --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%); /* Indigo suave */
    --gradient-accent: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    --gradient-income: linear-gradient(135deg, #34D399 0%, #10B981 100%); /* Emerald suave */
    --gradient-expense: linear-gradient(135deg, #F87171 0%, #EF4444 100%); /* Red suave */
    --gradient-emergency: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    --gradient-invest: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); /* Amber suave */
    --gradient-leisure: linear-gradient(135deg, #C084FC 0%, #A855F7 100%); /* Purple suave */

    /* Typography - Premium Fonts */
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-numeric: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes - Modular Scale */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.0625rem;    /* 17px - Better readability */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    --font-size-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;

    /* Shadows - Clean & Soft para aspecto Fintech */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 24px -4px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 32px -8px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 2000;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE (Alternative Theme)
   ═══════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    /* Dark mode backgrounds */
    --bg-main: #0B0E14;
    --bg-card: #1E293B;

    --color-bg: #0B0E14;
    --color-surface: #1E293B;
    --color-surface-alt: #334155;
    --color-surface-dark: #0F172A;
    --color-border: #334155;
    --color-border-light: #1E293B;
    --color-text: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --color-text-inverse: #0F172A;

    /* Semantic Colors - Dark Mode */
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-info-bg: rgba(59, 130, 246, 0.15);

    /* Borders for dark mode */
    --glass-border: #334155;
    --glass-bg: #1E293B;

    /* Dark mode shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 25px 80px rgba(0, 0, 0, 0.7);
}