/* ===================================
   ALVERIX PREMIUM THEME SYSTEM
   Provides unified color palettes for 
   both legacy and modern components.
=================================== */

/* -----------------------------------
   1. DARK MODE (New Default standard)
----------------------------------- */
:root, [data-theme="dark"] {
    /* Modern UI Variables */
    --bg-deep: #0B0710;
    --bg-card: #150D21;
    --primary: #D4AF37;
    --primary-hover: #fed71a;
    --primary-glow: rgba(212, 175, 55, 0.15);
    --text-main: #FFFFFF;
    --text-muted: #A09DB0;
    --border: rgba(255, 255, 255, 0.05);
    --success: #22C55E;
    --danger: #DC2626;
    --warning: #f59e0b;
    --gradient-card: linear-gradient(135deg, #2A1B3D 0%, #150D21 100%);
    --nav-bg: rgba(21, 13, 33, 0.95);

    /* Legacy Fallback Variables */
    --body-bg: #0B0710;
    --card-bg: #150D21;
    --text-primary: #FFFFFF;
    --text-secondary: #A09DB0;
    --border-color: rgba(255, 255, 255, 0.05);
    --gold: #D4AF37;
    --gradient: linear-gradient(135deg, #150D21 0%, #2A1B3D 50%, #D4AF37 100%);
}

/* -----------------------------------
   2. ROYAL PURPLE (Classic Alverix)
----------------------------------- */
[data-theme="purple"], [data-theme="default"] {
    --bg-deep: #1B0B2E;
    --bg-card: #2A1B3D;
    --primary: #D4AF37;
    --primary-hover: #fed71a;
    --primary-glow: rgba(212, 175, 55, 0.2);
    --text-main: #FFFFFF;
    --text-muted: #BFA8D9;
    --border: rgba(255, 255, 255, 0.1);
    --gradient-card: linear-gradient(135deg, #3D2659 0%, #2A1B3D 100%);
    --nav-bg: rgba(42, 27, 61, 0.95);

    /* Legacy Fallback */
    --body-bg: #1B0B2E;
    --card-bg: #2A1B3D;
    --text-primary: #FFFFFF;
    --text-secondary: #BFA8D9;
    --border-color: rgba(255, 255, 255, 0.1);
}

/* -----------------------------------
   3. EXECUTIVE BLACK (Ultra Premium)
----------------------------------- */
[data-theme="executive"] {
    --bg-deep: #000000;
    --bg-card: #111111;
    --primary: #E5E5E5; /* Titanium Silver */
    --primary-hover: #FFFFFF;
    --primary-glow: rgba(255, 255, 255, 0.08);
    --text-main: #FFFFFF;
    --text-muted: #888888;
    --border: rgba(255, 255, 255, 0.08);
    --gradient-card: linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 100%);
    --nav-bg: rgba(10, 10, 10, 0.95);

    /* Legacy Fallback */
    --body-bg: #000000;
    --card-bg: #111111;
    --text-primary: #FFFFFF;
    --text-secondary: #888888;
    --border-color: rgba(255, 255, 255, 0.08);
    --gold: #E5E5E5;
}

/* -----------------------------------
   4. EMERALD WEALTH (Investment Focus)
----------------------------------- */
[data-theme="emerald"] {
    --bg-deep: #021812;
    --bg-card: #062B20;
    --primary: #10B981; /* Neon Emerald */
    --primary-hover: #34D399;
    --primary-glow: rgba(16, 185, 129, 0.15);
    --text-main: #FFFFFF;
    --text-muted: #94A3B8;
    --border: rgba(255, 255, 255, 0.06);
    --success: #10B981;
    --gradient-card: linear-gradient(135deg, #064E3B 0%, #062B20 100%);
    --nav-bg: rgba(6, 43, 32, 0.95);

    /* Legacy Fallback */
    --body-bg: #021812;
    --card-bg: #062B20;
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
    --border-color: rgba(255, 255, 255, 0.06);
    --gold: #10B981;
}

/* --- Global Theme Transitions --- */
body, .balance-card, .actions-grid .action-icon, .bottom-nav {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}