/* ═══════════════════════════════════════════════════════════════════
   TRADING HUB - VARIABLES CSS
   Sistema de diseño global - Escalable y mantenible
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════════════
       COLORES BASE (RGB) - Para usar con rgba()
       ═══════════════════════════════════════════════════════════════ */
    --color-gold-rgb: 200, 160, 77;
    --color-gold-dark-rgb: 160, 126, 58;
    --color-green-rgb: 34, 197, 94;
    --color-green-dim-rgb: 22, 163, 74;
    --color-red-rgb: 239, 68, 68;
    --color-red-dim-rgb: 220, 38, 38;
    --color-blue-rgb: 59, 130, 246;
    --color-blue-dim-rgb: 29, 78, 216;
    --color-purple-rgb: 139, 92, 246;
    --color-purple-dim-rgb: 109, 40, 217;
    --color-cyan-rgb: 6, 182, 212;
    --color-yellow-rgb: 245, 158, 11;
    --color-openai-rgb: 16, 163, 127;
    --color-black-rgb: 0, 0, 0;
    --color-white-rgb: 255, 255, 255;
    
    /* ═══════════════════════════════════════════════════════════════
       FONDOS
       ═══════════════════════════════════════════════════════════════ */
    --bg-primary: #0D0D0D;
    --bg-secondary: #1A1A1A;
    --bg-card: #161616;
    --bg-tertiary: #1E1E1E;
    --bg-card-hover: #242424;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-light: rgba(0, 0, 0, 0.3);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.7);
    
    /* Fondos con acento dorado */
    --bg-gold-subtle: rgba(var(--color-gold-rgb), 0.03);
    --bg-gold-light: rgba(var(--color-gold-rgb), 0.05);
    --bg-gold-medium: rgba(var(--color-gold-rgb), 0.1);
    --bg-gold-strong: rgba(var(--color-gold-rgb), 0.15);
    --bg-gold-intense: rgba(var(--color-gold-rgb), 0.2);
    
    /* Fondos con acento verde */
    --bg-green-subtle: rgba(var(--color-green-rgb), 0.03);
    --bg-green-light: rgba(var(--color-green-rgb), 0.05);
    --bg-green-medium: rgba(var(--color-green-rgb), 0.1);
    --bg-green-strong: rgba(var(--color-green-rgb), 0.15);
    
    /* Fondos con acento rojo */
    --bg-red-subtle: rgba(var(--color-red-rgb), 0.03);
    --bg-red-light: rgba(var(--color-red-rgb), 0.05);
    --bg-red-medium: rgba(var(--color-red-rgb), 0.1);
    --bg-red-strong: rgba(var(--color-red-rgb), 0.15);
    
    /* ═══════════════════════════════════════════════════════════════
       COLORES DE ACENTO (HEX)
       ═══════════════════════════════════════════════════════════════ */
    --accent-gold: #c8a04d;
    --accent-gold-dark: #a07e3a;
    --accent-green: #22C55E;
    --accent-green-dim: #16A34A;
    --accent-red: #EF4444;
    --accent-red-dim: #DC2626;
    --accent-blue: #3B82F6;
    --accent-blue-dim: #1D4ED8;
    --accent-purple: #8B5CF6;
    --accent-purple-dim: #6D28D9;
    --accent-cyan: #06B6D4;
    --accent-yellow: #F59E0B;
    --accent-openai: #10A37F;
    
    /* ═══════════════════════════════════════════════════════════════
       TEXTOS
       ═══════════════════════════════════════════════════════════════ */
    --text-primary: #F5F5F5;
    --text-secondary: #B0B0B0;
    --text-muted: #6B6B6B;
    --text-disabled: #4A4A4A;
    --text-gold: var(--accent-gold);
    --text-green: var(--accent-green);
    --text-red: var(--accent-red);
    
    /* ═══════════════════════════════════════════════════════════════
       BORDES
       ═══════════════════════════════════════════════════════════════ */
    --border-color: #2D2D2D;
    --border-light: #3D3D3D;
    --border-gold: rgba(var(--color-gold-rgb), 0.3);
    --border-gold-strong: rgba(var(--color-gold-rgb), 0.5);
    --border-gold-intense: rgba(var(--color-gold-rgb), 0.7);
    --border-green: rgba(var(--color-green-rgb), 0.3);
    --border-red: rgba(var(--color-red-rgb), 0.3);
    --border-glow: rgba(var(--color-gold-rgb), 0.15);
    
    /* ═══════════════════════════════════════════════════════════════
       GRADIENTES
       ═══════════════════════════════════════════════════════════════ */
    --gradient-gold: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);
    --gradient-gold-subtle: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.15) 0%, rgba(var(--color-gold-dark-rgb), 0.1) 100%);
    --gradient-gold-radial: radial-gradient(ellipse, rgba(var(--color-gold-rgb), 0.15) 0%, transparent 70%);
    --gradient-gold-radial-subtle: radial-gradient(ellipse, rgba(var(--color-gold-rgb), 0.08) 0%, transparent 50%);
    --gradient-gold-radial-strong: radial-gradient(ellipse, rgba(var(--color-gold-rgb), 0.12) 0%, transparent 70%);
    --gradient-green: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dim) 100%);
    --gradient-red: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dim) 100%);
    --gradient-blue: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dim) 100%);
    --gradient-purple: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple-dim) 100%);
    
    /* Gradiente decorativo (shine effect) */
    --gradient-shine: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.3), transparent, rgba(var(--color-gold-dark-rgb), 0.3));
    
    /* ═══════════════════════════════════════════════════════════════
       SOMBRAS
       ═══════════════════════════════════════════════════════════════ */
    --shadow-sm: 0 2px 8px rgba(var(--color-black-rgb), 0.3);
    --shadow-md: 0 4px 16px rgba(var(--color-black-rgb), 0.4);
    --shadow-lg: 0 4px 24px rgba(var(--color-black-rgb), 0.5);
    --shadow-xl: 0 8px 32px rgba(var(--color-black-rgb), 0.6);
    
    /* Sombras con glow */
    --shadow-glow-gold-sm: 0 0 12px rgba(var(--color-gold-rgb), 0.3);
    --shadow-glow-gold: 0 0 20px rgba(var(--color-gold-rgb), 0.25);
    --shadow-glow-gold-lg: 0 0 30px rgba(var(--color-gold-rgb), 0.3);
    --shadow-glow-gold-xl: 0 0 40px rgba(var(--color-gold-rgb), 0.4);
    --shadow-glow-green: 0 0 30px rgba(var(--color-green-rgb), 0.2);
    --shadow-glow-red: 0 0 30px rgba(var(--color-red-rgb), 0.2);
    
    /* Sombras hover */
    --shadow-hover: 0 8px 24px rgba(var(--color-gold-rgb), 0.3);
    --shadow-hover-lg: 0 8px 30px rgba(var(--color-gold-rgb), 0.35);
    
    /* Focus rings */
    --shadow-focus-gold: 0 0 0 3px rgba(var(--color-gold-rgb), 0.15);
    --shadow-focus-green: 0 0 0 3px rgba(var(--color-green-rgb), 0.15);
    
    /* Drop shadows para iconos */
    --drop-shadow-gold: drop-shadow(0 0 20px rgba(var(--color-gold-rgb), 0.4));
    
    /* ═══════════════════════════════════════════════════════════════
       TIPOGRAFÍA
       ═══════════════════════════════════════════════════════════════ */
    --font-mono: 'Space Mono', monospace;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ═══════════════════════════════════════════════════════════════
       ESPACIADO
       ═══════════════════════════════════════════════════════════════ */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;
    
    /* ═══════════════════════════════════════════════════════════════
       BORDER RADIUS
       ═══════════════════════════════════════════════════════════════ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 100px;
    --radius-circle: 50%;
    
    /* ═══════════════════════════════════════════════════════════════
       TRANSICIONES
       ═══════════════════════════════════════════════════════════════ */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ═══════════════════════════════════════════════════════════════
       Z-INDEX
       ═══════════════════════════════════════════════════════════════ */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
    
    /* ═══════════════════════════════════════════════════════════════
       GRID PATTERNS (para fondos decorativos)
       ═══════════════════════════════════════════════════════════════ */
    --grid-line-color: rgba(var(--color-gold-rgb), 0.015);
    --grid-pattern: 
        repeating-linear-gradient(0deg, transparent, transparent 50px, var(--grid-line-color) 50px, var(--grid-line-color) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, var(--grid-line-color) 50px, var(--grid-line-color) 51px);
    
    /* ═══════════════════════════════════════════════════════════════
       SCROLLBAR
       ═══════════════════════════════════════════════════════════════ */
    --scrollbar-width: 8px;
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: rgba(var(--color-gold-rgb), 0.3);
    --scrollbar-thumb-hover: var(--accent-gold);
}

/* ═══════════════════════════════════════════════════════════════════
   TEMA CLARO (futuro)
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg-primary: #FAFAFA;
    --bg-secondary: #F0F0F0;
    --bg-card: #FFFFFF;
    --bg-tertiary: #E8E8E8;
    --bg-card-hover: #F5F5F5;
    --text-primary: #0D0D0D;
    --text-secondary: #4A4A4A;
    --text-muted: #7A7A7A;
    --border-color: #E0E0E0;
    --border-light: #D0D0D0;
    
    /* Ajustar opacidades para tema claro */
    --bg-gold-subtle: rgba(var(--color-gold-rgb), 0.05);
    --bg-gold-light: rgba(var(--color-gold-rgb), 0.08);
    --bg-gold-medium: rgba(var(--color-gold-rgb), 0.12);
    --bg-gold-strong: rgba(var(--color-gold-rgb), 0.18);
}