/**
 * TradeBook Modern Semantic CSS Tokens (Tailwind v4 & Modern Design System Architecture)
 * Provides centralized, accessible semantic design tokens for light and dark themes.
 */

:root,
html[data-theme="light"] {
  /* Surface & Canvas */
  --bg-canvas: #f0f4f8;
  --bg-surface: #ffffff;
  --bg-card: #f7fafd;
  --bg-card-hover: #edf4fa;
  --bg-modal: #ffffff;
  --bg-input: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.85);

  /* Typography */
  --text-primary: #0d1b2a;
  --text-secondary: #334e68;
  --text-muted: #627d98;
  --text-disabled: #9fb3c8;
  --text-inverse: #ffffff;

  /* Borders & Dividers */
  --border-subtle: #e2ecf4;
  --border-regular: #dce8f0;
  --border-strong: #bccbde;
  --border-focus: #185eff;

  /* Brand Accents */
  --brand-primary: #185eff;
  --brand-hover: #0f46c7;
  --brand-soft: rgba(24, 94, 255, 0.10);
  --brand-ink: #00227a;

  /* Financial PnL & Indicators */
  --pnl-profit: #0ea572;
  --pnl-profit-soft: rgba(14, 165, 114, 0.12);
  --pnl-profit-text: #076642;
  --pnl-profit-border: rgba(14, 165, 114, 0.30);

  --pnl-loss: #e03e3e;
  --pnl-loss-soft: rgba(224, 62, 62, 0.12);
  --pnl-loss-text: #8b1a1a;
  --pnl-loss-border: rgba(224, 62, 62, 0.30);

  --status-warning: #f59e0b;
  --status-warning-soft: rgba(245, 158, 11, 0.12);
  --status-warning-text: #92400e;

  /* Interactive Controls & Cards */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-elevation-1: 0 1px 3px rgba(13, 27, 42, 0.05), 0 1px 2px rgba(13, 27, 42, 0.03);
  --shadow-elevation-2: 0 4px 16px rgba(13, 27, 42, 0.08);
  --shadow-elevation-3: 0 12px 36px rgba(13, 27, 42, 0.12);

  /* Chart & Order Flow Visuals */
  --chart-grid: rgba(220, 232, 240, 0.6);
  --chart-axis: #829ab1;
  --chart-candle-up: #0ea572;
  --chart-candle-down: #e03e3e;
  --chart-candle-wick: #627d98;
}

html[data-theme="dark"] {
  /* Surface & Canvas */
  --bg-canvas: #090d16;
  --bg-surface: #0f172a;
  --bg-card: #131d33;
  --bg-card-hover: #172440;
  --bg-modal: #0f172a;
  --bg-input: #0b1120;
  --bg-glass: rgba(15, 23, 42, 0.85);

  /* Typography */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-disabled: #475569;
  --text-inverse: #090d16;

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-regular: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: #38bdf8;

  /* Brand Accents */
  --brand-primary: #38bdf8;
  --brand-hover: #0ea5e9;
  --brand-soft: rgba(56, 189, 248, 0.12);
  --brand-ink: #e0f2fe;

  /* Financial PnL & Indicators */
  --pnl-profit: #10b981;
  --pnl-profit-soft: rgba(16, 185, 129, 0.12);
  --pnl-profit-text: #34d399;
  --pnl-profit-border: rgba(16, 185, 129, 0.35);

  --pnl-loss: #f43f5e;
  --pnl-loss-soft: rgba(244, 63, 94, 0.12);
  --pnl-loss-text: #fb7185;
  --pnl-loss-border: rgba(244, 63, 94, 0.35);

  --status-warning: #f59e0b;
  --status-warning-soft: rgba(245, 158, 11, 0.12);
  --status-warning-text: #fde68a;

  /* Elevation Shadows */
  --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-elevation-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-elevation-3: 0 16px 48px rgba(0, 0, 0, 0.65);

  /* Chart & Order Flow Visuals */
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-axis: #64748b;
  --chart-candle-up: #10b981;
  --chart-candle-down: #f43f5e;
  --chart-candle-wick: #94a3b8;
}

/* ============================================================
   INSTITUTIONAL HIGH-TECH CHART & GRAPH LOADING ANIMATION
   ============================================================ */
.chart-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(9, 13, 22, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 60;
  opacity: 1;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: all;
  border-radius: inherit;
}

[data-theme="light"] .chart-loading-overlay {
  background: rgba(248, 250, 252, 0.85);
}

.chart-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.chart-loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 26px;
  background: var(--card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 15px rgba(24, 94, 255, 0.15);
  max-width: 90%;
  text-align: center;
  transform: scale(1);
  animation: tbLoaderPop 0.22s ease-out;
}

@keyframes tbLoaderPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.chart-spinner-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(24, 94, 255, 0.18);
  border-top-color: var(--blue, #2563eb);
  border-right-color: #38bdf8;
  animation: tbSpinRing 0.85s linear infinite;
}

.chart-spinner-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue, #2563eb);
  box-shadow: 0 0 12px var(--blue, #2563eb);
  animation: tbPulseDot 1.4s ease-in-out infinite alternate;
}

@keyframes tbSpinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes tbPulseDot {
  0% { transform: scale(0.75); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 1; }
}

.chart-loader-text {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #f8fafc);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

[data-theme="light"] .chart-loader-text {
  color: #0f172a;
}

.chart-loader-sub {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 5px;
}