/* AutoTrader — Theme Variables
   Korean chart convention: Red=Up, Blue=Down */

:root {
  /* Common */
  --up-color: #EF4444;
  --down-color: #3B82F6;
  --up-bg: rgba(239, 68, 68, 0.12);
  --down-bg: rgba(59, 130, 246, 0.12);
  --buy-color: #10B981;
  --sell-color: #EF4444;
  --hold-color: #8B5CF6;
  --wait-color: #6B7280;
  --stage1: #FEF3C7; --stage1-text: #92400E;
  --stage2: #FEE2E2; --stage2-text: #991B1B;
  --stage3: #FFEDD5; --stage3-text: #9A3412;
  --stage4: #DBEAFE; --stage4-text: #1E40AF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
  --sidebar-width: 250px;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;

  /* Responsive chart heights */
  --chart-height-main: 450px;
  --chart-height-sub: 150px;
  --chart-height-detail: 350px;
}

/* Tablet chart heights */
@media (max-width: 1024px) {
  :root {
    --chart-height-main: 380px;
    --chart-height-sub: 120px;
    --chart-height-detail: 300px;
  }
}
/* Mobile chart heights (Galaxy S26: 360px, iPhone 17: 402px) */
@media (max-width: 768px) {
  :root {
    --chart-height-main: 280px;
    --chart-height-sub: 100px;
    --chart-height-detail: 250px;
  }
}
/* Small mobile chart heights (<360px) */
@media (max-width: 359px) {
  :root {
    --chart-height-main: 220px;
    --chart-height-sub: 80px;
    --chart-height-detail: 200px;
  }
}

[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border-color: #E2E8F0;
  --border-light: #F1F5F9;
  --card-bg: #FFFFFF;
  --card-hover: #F8FAFC;
  --sidebar-bg: #F8FAFC;
  --sidebar-active: #EFF6FF;
  --sidebar-text: #334155;
  --input-bg: #FFFFFF;
  --input-border: #CBD5E1;
  --input-focus: #3B82F6;
  --badge-bg: #F1F5F9;
  --chart-bg: #FFFFFF;
  --chart-grid: #F1F5F9;
  --chart-text: #64748B;
  --overlay-bg: rgba(0,0,0,0.4);
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-track: #F1F5F9;
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #06B6D4;
  /* Aliases (used across many pages) */
  --text: var(--text-primary);
  --bg: var(--bg-secondary);
  --border: var(--border-color);
  --primary: var(--accent);
  --surface: var(--card-bg);
  --up: var(--up-color);
  --down: var(--down-color);
  --danger: var(--error);
}

[data-theme="dark"] {
  /* Stage badges — dark theme: brighter, more visible */
  --stage1: rgba(245,158,11,0.25); --stage1-text: #FBBF24;
  --stage2: rgba(239,68,68,0.25); --stage2-text: #F87171;
  --stage3: rgba(249,115,22,0.25); --stage3-text: #FB923C;
  --stage4: rgba(59,130,246,0.25); --stage4-text: #60A5FA;
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border-color: #334155;
  --border-light: #1E293B;
  --card-bg: #1E293B;
  --card-hover: #334155;
  --sidebar-bg: #0F172A;
  --sidebar-active: rgba(59,130,246,0.15);
  --sidebar-text: #CBD5E1;
  --input-bg: #1E293B;
  --input-border: #475569;
  --input-focus: #60A5FA;
  --badge-bg: #334155;
  --chart-bg: #1E293B;
  --chart-grid: #334155;
  --chart-text: #94A3B8;
  --overlay-bg: rgba(0,0,0,0.6);
  --scrollbar-thumb: #475569;
  --scrollbar-track: #1E293B;
  --accent: #60A5FA;
  --accent-hover: #3B82F6;
  --success: #34D399;
  --warning: #FBBF24;
  --error: #F87171;
  --info: #22D3EE;
  /* Aliases (used across many pages) */
  --text: var(--text-primary);
  --bg: var(--bg-secondary);
  --border: var(--border-color);
  --primary: var(--accent);
  --surface: var(--card-bg);
  --up: var(--up-color);
  --down: var(--down-color);
  --danger: var(--error);
}

/* Select/option global styling */
select, select option {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}