/* ==========================================
   🎨 TRADING PLATFORM PRO - CSS VARIABLES
   Professional Trading Design System
   Version: 0.3.0 - Trading Dark Theme
   ========================================== */

/* ==========================================
   🌙 TRADING THEME - PRIMARY PALETTE
   Ini adalah acuan warna utama untuk semua halaman
   ========================================== */
:root {
  /* ==========================================
     📈 TRADING COLORS - Brand Identity
     Warna utama trading platform
     ========================================== */
  
  /* Primary Green - Untuk aksi positif, profit, buy */
  --color-primary: #10b981;
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-200: #a7f3d0;
  --color-primary-300: #6ee7b7;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --color-primary-800: #065f46;
  --color-primary-900: #064e3b;
  --color-primary-glow: rgba(16, 185, 129, 0.4);

  /* Button Color - Independent CTA buttons */
  --button-color: var(--color-primary);
  --button-color-dark: #059669;
  --button-color-glow: rgba(16, 185, 129, 0.4);
  --button-color-dim: rgba(16, 185, 129, 0.1);
  --button-rgb: 16, 185, 129;

  /* Nav Active Color - Independent bottom nav & sidebar active */
  --nav-active-color: var(--color-primary);
  --nav-active-dark: #059669;
  --nav-active-glow: rgba(16, 185, 129, 0.4);
  --nav-active-dim: rgba(16, 185, 129, 0.1);
  --nav-active-50: rgba(16, 185, 129, 0.05);
  --nav-active-rgb: 16, 185, 129;

  /* Secondary Blue - Untuk info, links, highlights */
  --color-secondary: #3b82f6;
  --color-secondary-50: #eff6ff;
  --color-secondary-100: #dbeafe;
  --color-secondary-200: #bfdbfe;
  --color-secondary-300: #93c5fd;
  --color-secondary-400: #60a5fa;
  --color-secondary-500: #3b82f6;
  --color-secondary-600: #2563eb;
  --color-secondary-700: #1d4ed8;
  --color-secondary-800: #1e40af;
  --color-secondary-900: #1e3a8a;
  --color-secondary-glow: rgba(59, 130, 246, 0.4);

  /* Accent Gold - Untuk premium, highlights */
  --color-accent: #f59e0b;
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  --color-accent-800: #92400e;
  --color-accent-900: #78350f;
  --color-accent-glow: rgba(245, 158, 11, 0.4);

  /* ==========================================
     📊 TRADING SEMANTIC COLORS
     Warna untuk status trading
     ========================================== */
  
  /* Success/Profit/Buy - Hijau */
  --color-success: #10b981;
  --color-success-light: #34d399;
  --color-success-dark: #059669;
  --color-success-glow: rgba(16, 185, 129, 0.4);
  
  /* Danger/Loss/Sell - Merah */
  --color-danger: #ef4444;
  --color-danger-light: #f87171;
  --color-danger-dark: #dc2626;
  --color-danger-glow: rgba(239, 68, 68, 0.4);
  
  /* Warning/Caution - Kuning/Orange */
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  --color-warning-glow: rgba(245, 158, 11, 0.4);
  
  /* Info/Neutral - Biru */
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;
  --color-info-glow: rgba(59, 130, 246, 0.4);

  /* ==========================================
     🌈 NEUTRAL COLORS - Trading Dark Scale
     Abu-abu gelap untuk background
     ========================================== */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #0a0e17;

  /* ==========================================
     🎨 TRADING DARK THEME COLORS
     Warna utama untuk dark mode trading
     ========================================== */
  
  /* Background Hierarchy */
  --trading-bg: #0a0e17;
  --trading-bg-secondary: rgba(15, 23, 42, 0.75);
  --trading-surface: rgba(17, 24, 39, 0.75);
  --trading-card: rgba(26, 31, 46, 0.75);
  --trading-elevated: rgba(30, 41, 59, 0.65);
  
  /* Border Colors */
  --trading-border: #2d3748;
  --trading-border-light: #374151;
  --trading-border-focus: var(--color-primary);
  
  /* Text Colors */
  --trading-text: #f8fafc;
  --trading-text-secondary: #e2e8f0;
  --trading-text-muted: #94a3b8;
  --trading-text-disabled: #64748b;
  
  /* Trading Action Colors */
  --trading-green: #10b981;
  --trading-green-light: #34d399;
  --trading-green-glow: rgba(16, 185, 129, 0.4);
  --trading-red: #ef4444;
  --trading-red-light: #f87171;
  --trading-red-glow: rgba(239, 68, 68, 0.4);
  --trading-blue: #3b82f6;
  --trading-blue-light: #60a5fa;
  --trading-blue-glow: rgba(59, 130, 246, 0.4);
  --trading-gold: #f59e0b;
  --trading-gold-light: #fbbf24;
  --trading-gold-glow: rgba(245, 158, 11, 0.4);
  
  /* Gradient */
  --trading-gradient: linear-gradient(135deg, #0a0e17 0%, #1a1f2e 50%, #0f172a 100%);
  --trading-gradient-card: linear-gradient(145deg, #1a1f2e 0%, #111827 100%);
  --trading-gradient-accent: linear-gradient(135deg, var(--trading-green) 0%, var(--trading-blue) 100%);

  /* ==========================================
     🖼️ SEMANTIC BACKGROUND COLORS
     Alias untuk kemudahan penggunaan
     ========================================== */
  --bg-primary: var(--trading-bg);
  --bg-secondary: var(--trading-bg-secondary);
  --bg-tertiary: var(--trading-surface);
  --bg-card: var(--trading-card);
  --bg-elevated: var(--trading-elevated);
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-input: var(--trading-surface);
  --bg-disabled: var(--trading-card);

  /* ==========================================
     📝 SEMANTIC TEXT COLORS
     ========================================== */
  --text-primary: var(--trading-text);
  --text-secondary: var(--trading-text-secondary);
  --text-tertiary: var(--trading-text-muted);
  --text-muted: var(--trading-text-muted);
  --text-disabled: var(--trading-text-disabled);
  --text-inverse: var(--trading-bg);
  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-400);

  /* ==========================================
     🔲 SEMANTIC BORDER COLORS
     ========================================== */
  --border-primary: var(--trading-border);
  --border-secondary: var(--trading-border-light);
  --border-focus: var(--color-primary);
  --border-error: var(--color-danger);
  --border-success: var(--color-success);
  --border-warning: var(--color-warning);

  /* ==========================================
     🌟 SHADOWS - Trading Dark Style
     ========================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow-green: 0 0 20px var(--trading-green-glow);
  --shadow-glow-red: 0 0 20px var(--trading-red-glow);
  --shadow-glow-blue: 0 0 20px var(--trading-blue-glow);
  --shadow-glow-gold: 0 0 20px var(--trading-gold-glow);
}

/* ==========================================
   🌙 DARK THEME (Default)
   Trading Platform Dark Mode
   ========================================== */
:root,
:root[data-theme="dark"] {
  /* Background */
  --bg-primary: var(--trading-bg);
  --bg-secondary: var(--trading-bg-secondary);
  --bg-tertiary: var(--trading-surface);
  --bg-card: var(--trading-card);
  --bg-surface: var(--trading-surface);
  --bg-elevated: var(--trading-elevated);
  --bg-input: var(--trading-elevated);
  --bg-disabled: #374151;
  --bg-base: var(--trading-bg);
  
  /* Text */
  --text-primary: var(--trading-text);
  --text-secondary: var(--trading-text-secondary);
  --text-tertiary: var(--trading-text-muted);
  --text-muted: var(--trading-text-muted);
  --text-disabled: var(--trading-text-disabled);
  --text-inverse: #1f2937;
  
  /* Border */
  --border-primary: var(--trading-border);
  --border-secondary: var(--trading-border-light);
  --border-color: var(--trading-border);
  
  /* Shadows - Darker */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ==========================================
   📏 SPACING SYSTEM (8px base)
   ========================================== */
:root {
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  
  /* Alias */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-10);
  --spacing-3xl: var(--spacing-12);
  --spacing-4xl: var(--spacing-16);

  /* Space aliases for components */
  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --space-3: var(--spacing-3);
  --space-4: var(--spacing-4);
  --space-5: var(--spacing-5);
  --space-6: var(--spacing-6);
  --space-8: var(--spacing-8);
  --space-10: var(--spacing-10);
  --space-12: var(--spacing-12);
}

/* ==========================================
   🔤 TYPOGRAPHY SYSTEM
   ========================================== */
:root {
  /* === FONT FAMILIES === */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-display: 'Inter', var(--font-primary);

  /* === FONT SIZES === */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */
  --text-7xl: 4.5rem;     /* 72px */
  --text-8xl: 6rem;       /* 96px */
  --text-9xl: 8rem;       /* 128px */
  
  /* Alias for old variables */
  --font-xs: var(--text-xs);
  --font-sm: var(--text-sm);
  --font-base: var(--text-base);
  --font-lg: var(--text-lg);
  --font-xl: var(--text-xl);
  --font-2xl: var(--text-2xl);
  --font-3xl: var(--text-3xl);
  --font-4xl: var(--text-4xl);
  --font-5xl: var(--text-5xl);
  --font-6xl: var(--text-6xl);

  /* === LINE HEIGHTS === */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === FONT WEIGHTS === */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* === LETTER SPACING === */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ==========================================
   📱 BREAKPOINTS (Mobile-First)
   ========================================== */
:root {
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ==========================================
   🎭 BORDER RADIUS
   ========================================== */
:root {
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
}

/* ==========================================
   ⚡ TRANSITIONS & ANIMATIONS
   ========================================== */
:root {
  /* === DURATIONS === */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* === EASINGS === */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* === COMMON TRANSITIONS === */
  --transition-all: all var(--duration-150) var(--ease-in-out);
  --transition-colors: color var(--duration-150) var(--ease-in-out), background-color var(--duration-150) var(--ease-in-out), border-color var(--duration-150) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-150) var(--ease-in-out);
  --transition-transform: transform var(--duration-150) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-150) var(--ease-in-out);
}

/* ==========================================
   🎯 Z-INDEX SCALE
   ========================================== */
:root {
  --z-hide: -1;
  --z-auto: auto;
  --z-base: 0;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-max: 2147483647;
}

/* ==========================================
   📐 LAYOUT & CONTAINERS
   ========================================== */
:root {
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* Grid gaps */
  --gap-0: 0;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-10: 40px;
  --gap-12: 48px;
}

/* ==========================================
   📐 COMPONENT SIZES
   ========================================== */
:root {
  /* === BUTTON HEIGHTS === */
  --btn-height-xs: 24px;
  --btn-height-sm: 32px;
  --btn-height-base: 40px;
  --btn-height-lg: 48px;
  --btn-height-xl: 56px;

  /* === INPUT HEIGHTS === */
  --input-height-xs: 28px;
  --input-height-sm: 32px;
  --input-height-base: 40px;
  --input-height-lg: 48px;
  --input-height-xl: 56px;
  
  /* === ICON SIZES === */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-base: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;
}

/* ==========================================
   ♿ ACCESSIBILITY & SPECIAL STATES
   ========================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --border-primary: var(--trading-text);
    --text-muted: var(--trading-text-secondary);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-75: 0ms;
    --duration-100: 0ms;
    --duration-150: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
    --duration-1000: 0ms;
    --transition-all: none;
    --transition-colors: none;
    --transition-opacity: none;
    --transition-transform: none;
    --transition-shadow: none;
  }
}

/* ==========================================
   📚 DESIGN SYSTEM DOCUMENTATION
   ==========================================
   
   PENGGUNAAN WARNA TRADING THEME:
   
   1. Background:
      - Page background: var(--bg-primary) atau var(--trading-bg)
      - Card/Container: var(--bg-card) atau var(--trading-card)
      - Elevated surfaces: var(--bg-elevated)
      - Input fields: var(--bg-input)
   
   2. Text:
      - Headings: var(--text-primary) atau var(--trading-text)
      - Body text: var(--text-secondary)
      - Captions/hints: var(--text-muted)
   
   3. Trading Actions:
      - Buy/Profit: var(--trading-green) atau var(--color-success)
      - Sell/Loss: var(--trading-red) atau var(--color-danger)
      - Info/Neutral: var(--trading-blue) atau var(--color-info)
      - Premium/Gold: var(--trading-gold) atau var(--color-accent)
   
   4. Borders:
      - Default: var(--border-primary) atau var(--trading-border)
      - Focus state: var(--border-focus)
   
   5. Shadows:
      - Cards: var(--shadow-md)
      - Modals: var(--shadow-xl)
      - Glow effects: var(--shadow-glow-green/red/blue/gold)
   
   6. Gradients:
      - Background: var(--trading-gradient)
      - Cards: var(--trading-gradient-card)
      - Accent: var(--trading-gradient-accent)
   
   ========================================== */

/* ==========================================
   🪟 GLASSMORPHISM - Universal Card Blur
   Applied to all common card containers
   ========================================== */
/* Portfolio */
.pf-summary-card, .pf-holdings-card, .pf-chart-card, .pf-section,
/* Orders */
.oms-summary-card, .oms-card,
/* Referral */
.ref-stat-card, .ref-list-card, .ref-current-tier, .ref-tier-card,
.ref-badge-card, .ref-reward-card, .ref-history-card, .ref-tabs,
/* Support */
.sup-chat-container, .sup-form-card, .sup-ticket-card,
.sup-kb-article, .sup-kb-expanded, .sup-live-chat-cta, .sup-tabs,
/* Dividends */
.div-summary-card, .div-event-card, .div-projection-card,
.div-history-card, .div-reminder-row, .div-tabs,
/* Tax */
.tax-summary-card, .tax-cg-stat, .tax-div-card,
.tax-report-card, .tax-tip-card, .tax-tabs,
/* Income */
.inc-card, .inc-chart-card, .inc-list-card, .inc-goal-card, .inc-tabs,
/* Social */
.soc-composer, .soc-post, .soc-lb-card, .soc-trade-card,
/* Compare */
.compare-selector, .compare-score-card, .compare-chart-wrap,
/* Paper Trading */
.paper-stat-card, .paper-section,
/* Screener */
.screener-filters, .screener-table-wrap,
/* Alerts */
.alerts-tabs, .alert-card,
/* Watchlist */
.wl-card,
/* Education */
.edu-card, .edu-module-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}