/* CSS Variables for Theme Support */
:root {
  /* Background Colors */
  --bg-primary: #000000;
  --bg-secondary: #111111;
  --bg-tertiary: #050505;
  --bg-modal: rgba(10,10,10,0.95);
  --bg-hamburger: #080808;
  --bg-toast: rgba(0,0,0,0.8);
  --bg-loading: rgba(0,0,0,0.7);
  --bg-diagnostics: rgba(0,0,0,0.6);
  --bg-premium: rgba(0,0,0,0.8);

  /* Text Colors */
  --text-primary: #d1d4dc;
  --text-secondary: #e6edf3;
  --text-tertiary: #cfd6dc;
  --text-muted: #9aa0a6;
  --text-accent: #ffffff;
  --text-chart: #cccddd;

  /* Border Colors */
  --border-primary: #222222;
  --border-secondary: #151515;
  --border-tertiary: #141414;
  --border-light: rgba(255,255,255,0.04);
  --border-hover: #2a2a2a;

  /* Gradients */
  --gradient-btn: linear-gradient(180deg, #000000, #222222);
  --gradient-btn-alt: linear-gradient(90deg, #111111, #222222);
  --gradient-hamburger: linear-gradient(90deg, #111111, #222222);

  /* Shadows and Effects */
  --shadow-btn: 0 4px 12px rgba(0,0,0,0.6);
  --shadow-modal: 0 18px 48px rgba(0,0,0,0.6);
  --shadow-hamburger: 0 8px 24px rgba(0,0,0,0.5);

  /* Specific Elements */
  --header-bg: #060606;
  --footer-bg: #050505;
  --right-col-bg: #0b0b0b;
  --tool-panel-bg: #070707;
  --indicator-designer-bg: #0b0b0b;
  --trash-hover: #191919;
  --resize-bg: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.03) 60%, transparent 100%);
  --resize-hover: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 100%);
  --resize-focused: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
}

html[data-theme='light'] {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f6fa;
  --bg-tertiary: #ffffff;
  --bg-modal: #ffffff;
  --bg-hamburger: #ffffff;
  --bg-toast: rgba(255,255,255,0.9);
  --bg-loading: rgba(255,255,255,0.9);
  --bg-diagnostics: rgba(255,255,255,0.8);
  --bg-premium: rgba(255,255,255,0.9);

  /* Text Colors */
  --text-primary: #0b1220;
  --text-secondary: #0b1220;
  --text-tertiary: #666666;
  --text-muted: #666666;
  --text-accent: #0b1220;
  --text-chart: #0b1220;

  /* Border Colors */
  --border-primary: #dfe7f3;
  --border-secondary: #dfe7f3;
  --border-tertiary: #dfe7f3;
  --border-light: rgba(2,6,23,0.06);
  --border-hover: #dfe7f3;

  /* Gradients */
  --gradient-btn: linear-gradient(180deg, #ffffff, #f3f6fa);
  --gradient-btn-alt: linear-gradient(90deg, #ffffff, #f3f6fa);
  --gradient-hamburger: linear-gradient(90deg, #ffffff, #f3f6fa);

  /* Shadows and Effects */
  --shadow-btn: 0 4px 12px rgba(2,6,23,0.1);
  --shadow-modal: 0 12px 36px rgba(2,6,23,0.06);
  --shadow-hamburger: 0 8px 24px rgba(2,6,23,0.05);

  /* Specific Elements */
  --header-bg: #ffffff;
  --footer-bg: #ffffff;
  --right-col-bg: #f3f6fa;
  --tool-panel-bg: #ffffff;
  --indicator-designer-bg: #ffffff;
  --trash-hover: #e6eef9;
  --resize-bg: linear-gradient(180deg, transparent 0%, rgba(2,6,23,0.02) 40%, rgba(2,6,23,0.03) 60%, transparent 100%);
  --resize-hover: linear-gradient(180deg, rgba(2,6,23,0.02) 0%, rgba(2,6,23,0.06) 50%, rgba(2,6,23,0.02) 100%);
  --resize-focused: linear-gradient(180deg, rgba(2,6,23,0.03) 0%, rgba(2,6,23,0.09) 50%, rgba(2,6,23,0.03) 100%);
}

/* Additional theme-specific rules */
html[data-theme='light'] .logo .bcf-logo { filter: invert(1); }
html[data-theme='light'] .logo svg { fill: #000000; }

/* Theme-aware UI pieces */
html[data-theme='dark'] .mini-select, html[data-theme='dark'] .mini-btn, html[data-theme='dark'] .sc-btn { background: var(--gradient-btn); color: var(--text-secondary); border: 1px solid var(--border-light); }
html[data-theme='light'] .mini-select, html[data-theme='light'] .mini-btn, html[data-theme='light'] .sc-btn { background: var(--gradient-btn); color: var(--text-primary); border: 1px solid var(--border-light); }
html[data-theme='dark'] #interval-select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-primary); }
html[data-theme='light'] #interval-select { background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border-primary); }

#ws-status { transition: background-color 240ms ease, color 240ms ease; }
html[data-theme='dark'] #ws-status { background: #333333; color: var(--text-accent); }
html[data-theme='light'] #ws-status { background:#ffffff; color: var(--text-primary); }