/* ============================================
   BitGoInvestment Theme System
   Brand Colors: #001BB7, #0046FF, #FF8040, #F5F1DC
   ============================================ */

:root {
    /* Brand Colors */
    --color-primary: #001BB7;
    --color-primary-hover: #0025E0;
    --color-primary-light: rgba(0, 27, 183, 0.15);
    --color-secondary: #0046FF;
    --color-secondary-hover: #0055FF;
    --color-secondary-light: rgba(0, 70, 255, 0.15);
    --color-accent: #FF8040;
    --color-accent-hover: #FF9040;
    --color-accent-light: rgba(255, 128, 64, 0.15);
    --color-cream: #F5F1DC;
    --color-cream-light: rgba(245, 241, 220, 0.15);

    /* Semantic Colors */
    --color-success: #00E676;
    --color-warning: #FFC107;
    --color-error: #FF3B3B;
    --color-info: #29B6F6;

    /* Dark Theme (default) */
    --bg-primary: #0A0A0A;
    --bg-card: #121212;
    --bg-elevated: #1A1A1A;
    --bg-input: #1E1E1E;
    --border-color: #2A2A2A;
    --border-light: #1E1E1E;

    --text-primary: #EEEEEE;
    --text-secondary: #BBBBBB;
    --text-muted: #777777;
    --text-inverse: #0A0A0A;

    --navbar-bg: rgba(10, 10, 10, 0.95);
    --sidebar-bg: #0D0D0D;
    --footer-bg: #0D0D0D;

    /* 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 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(0, 27, 183, 0.15);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.813rem;
    --font-size-base: 0.938rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    /* Spacing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #F5F5F5;
    --bg-card: #FFFFFF;
    --bg-elevated: #FAFAFA;
    --bg-input: #FFFFFF;
    --border-color: #E0E0E0;
    --border-light: #EEEEEE;

    --text-primary: #1A1A1A;
    --text-secondary: #555555;
    --text-muted: #999999;
    --text-inverse: #FFFFFF;

    --navbar-bg: rgba(255, 255, 255, 0.95);
    --sidebar-bg: #FAFAFA;
    --footer-bg: #FAFAFA;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 20px rgba(0, 27, 183, 0.08);

    --color-primary: #001BB7;
    --color-primary-hover: #0025E0;
    --color-primary-light: rgba(0, 27, 183, 0.08);
    --color-secondary: #0046FF;
    --color-secondary-hover: #0055FF;
    --color-secondary-light: rgba(0, 70, 255, 0.08);
    --color-accent: #FF8040;
    --color-accent-light: rgba(255, 128, 64, 0.08);
}

/* Smooth theme transitions */
*,
*::before,
*::after {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}