/* ===========================================
   CSS Custom Properties - Light Theme (Default)
   Loaded once globally - do not import into SCSS
   =========================================== */
:root {
  /* Background colors */
  --color-background: #ffffff;
  --color-background-alt: #f8f8f8;
  --color-surface: #ffffff;
  --color-workspace: rgb(248, 248, 248);

  /* Text colors */
  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-text-disabled: #8b8a8a;
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: rgba(255, 255, 255, 0.85);
  --color-text-on-primary-muted: rgba(255, 255, 255, 0.6);

  /* Brand colors */
  --color-primary: #005CB9;
  --color-primary-hover: #004a94;
  --color-secondary: #e4165b;
  --color-accent: rgb(0, 120, 212);

  /* Status colors (unchanged in dark mode) */
  --color-status-success: #107C10;
  --color-status-error: #D13438;
  --color-status-warning: #FF8C00;
  --color-status-pending: #0078D4;
  --color-status-cancelled: #757575;

  /* Legacy status colors (for gradual migration) */
  --color-status-positive: #58ffec;
  --color-status-neutral: #ffcd6e;
  --color-status-negative: #ffb3b3;
  --color-status-tentative: #727272;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-light: #f0f0f0;
  --color-border-dark: #d0d0d0;

  /* Links */
  --color-link: #005291;
  --color-link-hover: #003d6d;

  /* Info/messaging */
  --color-info: #0047AB;
  --color-info-background: rgba(0, 71, 171, 0.05);
  --color-validation-error: #a80000;

  /* Interactive states */
  --color-hover-overlay: rgba(0, 0, 0, 0.04);
  --color-selected-overlay: rgba(0, 0, 0, 0.08);
  --color-menu-item-background: rgba(0, 0, 0, 0.08);
  --color-menu-item-selected: rgba(0, 0, 0, 0.2);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 6.4px 14.4px rgba(0, 0, 0, 0.132), 0 1.2px 3.6px rgba(0, 0, 0, 0.108);

  /* Cards */
  --color-card-background: #ffffff;
  --color-card-hover: #ffffff;

  /* Citations */
  --color-citation-background: #DBE7FD;
  --color-citation-background-hover: #bbdefb;

  /* Avatar */
  --color-avatar-background: #E0E0E0;
  --color-avatar-text: #363636;
  --color-avatar-outline: #005CB9;

  /* Error */
  --color-error: #f44336;
  --color-success: #0fb435;

  /* Diff viewer */
  --color-diff-added: #d4fcbc;
  --color-diff-removed: #ffc0c0;

  /* Highlight backgrounds */
  --color-highlight-background: #e6f2ff;
  --color-highlight-subtle: rgba(0, 120, 212, 0.05);
  --color-accent-light: rgba(0, 120, 212, 0.1);
  --color-accent-lighter: rgba(0, 120, 212, 0.03);

  /* Warning/callout colors */
  --color-callout-warning-bg: #fef3c7;
  --color-callout-warning-border: #f59e0b;
  --color-callout-warning-text: #92400e;
  --color-callout-warning-link: #d97706;

  /* Toast notifications */
  --color-toast-info: #0677d5;
  --color-toast-success: #4d831e;
  --color-toast-warning: #c15601;
  --color-toast-error: #d74113;

  /* Badges */
  --color-extraction-badge: #7c3aed;
  --color-author-badge: #059669;

  /* Row/selection highlights */
  --color-row-highlight: #FCF8E8;
  --color-selection-primary: rgba(37, 99, 235, 0.4);
  --color-selection-secondary: rgba(220, 38, 38, 0.4);

  /* Video/media */
  --color-video-background: #000000;

  /* Status backgrounds (15% opacity versions) */
  --color-status-draft: #605E5C;
  --color-status-draft-bg: rgba(96, 94, 92, 0.15);
  --color-status-processing: #CA5010;
  --color-status-processing-bg: rgba(202, 80, 16, 0.15);
  --color-status-ready-bg: rgba(0, 120, 212, 0.15);
  --color-status-success-bg: rgba(16, 124, 16, 0.15);
  --color-status-error-bg: rgba(209, 52, 56, 0.15);

  /* Error panel colors */
  --color-error-panel-background: #fce4ec;
  --color-error-panel-border: #f8bbd0;
  --color-error-text: #c62828;
  --color-error-icon: #d32f2f;

  /* Diagnostic card colors (warning, info, success, danger) */
  --color-diagnostic-warning: #ff9800;
  --color-diagnostic-warning-text: #e65100;
  --color-diagnostic-info: #2196f3;
  --color-diagnostic-info-text: #0d47a1;
  --color-diagnostic-success: #4caf50;
  --color-diagnostic-success-text: #1b5e20;
  --color-diagnostic-danger: #f44336;
  --color-diagnostic-danger-text: #b71c1c;
  --color-diagnostic-hint-bg: #fff9e6;
  --color-diagnostic-hint-icon: #ffa726;

  /* Code block colors */
  --color-code-background: #2d2d2d;
  --color-code-text: #f8f8f2;

  /* Spark type colors */
  --color-spark-risk: #dc2626;
  --color-spark-decision: #f59e0b;
  --color-spark-action: #9333ea;
  --color-spark-research: #2563eb;
  --color-spark-issue: #e11d48;
  --color-spark-insight: #84cc16;
  --color-spark-assumption: #f97316;
  --color-spark-concept: #06b6d4;
  --color-spark-default: #6b7280;

  /* Spark type badge/icon backgrounds (light tinted) */
  --color-spark-risk-bg: #fef2f2;
  --color-spark-decision-bg: #fffbeb;
  --color-spark-action-bg: #fef3ff;
  --color-spark-research-bg: #eff6ff;
  --color-spark-issue-bg: #fff1f2;
  --color-spark-insight-bg: #f7fee7;
  --color-spark-assumption-bg: #fff7ed;
  --color-spark-concept-bg: #ecfeff;
  --color-spark-default-bg: #f3f4f6;

  /* Spark type badge/icon text (darker variants for readability) */
  --color-spark-risk-text: #dc2626;
  --color-spark-decision-text: #d97706;
  --color-spark-action-text: #a21caf;
  --color-spark-research-text: #2563eb;
  --color-spark-issue-text: #e11d48;
  --color-spark-insight-text: #65a30d;
  --color-spark-assumption-text: #ea580c;
  --color-spark-concept-text: #0891b2;
  --color-spark-default-text: #6b7280;

  /* Timeline colors */
  --color-timeline-line: #d2d0ce;
  --color-timeline-active: #0078d4;
  --color-timeline-date: #00bcf2;
  --color-timeline-event: #8a8886;
  --color-timeline-end: #605e5c;
  --color-timeline-month: #edebe9;
  --color-timeline-month-dot: #a19f9d;

  /* Chain status colors */
  --color-chain-snoozed: #c45000;
  --color-chain-snoozed-bg: rgba(255, 152, 0, 0.2);
  --color-chain-snoozed-border: rgba(255, 152, 0, 0.4);
  --color-chain-snoozed-hover: rgba(255, 152, 0, 0.35);
  --color-chain-woken: #b45309;
  --color-chain-woken-bg: rgba(245, 158, 11, 0.2);
  --color-chain-woken-border: rgba(245, 158, 11, 0.4);
  --color-chain-woken-hover: rgba(245, 158, 11, 0.35);
  --color-chain-urgent-bg: #fee;
  --color-chain-urgent-text: #c00;
  --color-chain-urgent-border: #fcc;
  --color-chain-active-bg: #efe;
  --color-chain-active-text: #060;
  --color-chain-active-border: #cfc;
  --color-chain-monitoring-bg: #eee;
  --color-chain-monitoring-text: #666;
  --color-chain-monitoring-border: #ddd;
  --color-chain-complete-bg: #eef;
  --color-chain-complete-text: #006;
  --color-chain-complete-border: #ccf;

  /* Score/progress colors */
  --color-score-priority: #ff9800;
  --color-score-health: #4caf50;
  --color-score-bar-bg: #e9ecef;

  /* Grays (for SCSS variable replacement) */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;

  /* Saga timeline state colors */
  --color-saga-transition-bg: #fff3cd;
  --color-saga-transition-border: #ffc107;
  --color-saga-transition-icon: #856404;
  --color-saga-completed-bg: #d4edda;
  --color-saga-completed-border: #28a745;
  --color-saga-completed-icon: #155724;
  --color-saga-failed-bg: #f8d7da;
  --color-saga-failed-border: #dc3545;
  --color-saga-failed-icon: #721c24;
  --color-saga-event-bg: #cce5ff;
  --color-saga-event-border: #007bff;
  --color-saga-event-icon: #004085;
  --color-saga-faulted-bg: #fff5f5;

  /* Entity name badge colors */
  --color-entity-badge-bg: #e3f2fd;
  --color-entity-badge-text: #1565c0;

  /* Objective chip colors */
  --color-objective-background: transparent;
  --color-objective-border: var(--color-border);
  --color-objective-text: var(--color-text-primary);

  /* Objective relevance type colors */
  --color-relevance-directly-measures: #107C10;
  --color-relevance-contributes: #0078D4;
  --color-relevance-may-impact: #FF8C00;
  --color-relevance-informs: #757575;

  /* Scrollbar colors */
  --color-scrollbar-track: #f1f1f1;
  --color-scrollbar-thumb: #c1c1c1;
  --color-scrollbar-thumb-hover: #a8a8a8;
}

/* ===========================================
   CSS Custom Properties - Dark Theme
   Also matches body.theme-dark for TinyMCE iframe support
   =========================================== */
[data-theme="dark"],
body.theme-dark {
  /* Background colors */
  --color-background: #1a1a1a;
  --color-background-alt: #242424;
  --color-surface: #2d2d2d;
  --color-workspace: #1f1f1f;

  /* Text colors */
  --color-text-primary: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  --color-text-on-primary: #ffffff;
  --color-text-on-dark: rgba(255, 255, 255, 0.85);
  --color-text-on-primary-muted: rgba(255, 255, 255, 0.6);

  /* Brand colors - keep primary dark for sidebar, use accent for highlights */
  --color-primary: #005CB9;
  --color-primary-hover: #004a94;
  --color-secondary: #ff4d84;
  --color-accent: rgb(0, 120, 212);

  /* Borders */
  --color-border: #404040;
  --color-border-light: #333333;
  --color-border-dark: #4a4a4a;

  /* Links */
  --color-link: #6db3f2;
  --color-link-hover: #8fc4f5;

  /* Info/messaging */
  --color-info: #6db3f2;
  --color-info-background: rgba(109, 179, 242, 0.1);
  --color-validation-error: #ff6b6b;

  /* Interactive states */
  --color-hover-overlay: rgba(255, 255, 255, 0.04);
  --color-selected-overlay: rgba(255, 255, 255, 0.08);
  --color-menu-item-background: rgba(255, 255, 255, 0.08);
  --color-menu-item-selected: rgba(255, 255, 255, 0.16);

  /* Shadows (stronger for dark backgrounds) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 6.4px 14.4px rgba(0, 0, 0, 0.4), 0 1.2px 3.6px rgba(0, 0, 0, 0.3);

  /* Cards */
  --color-card-background: #2d2d2d;
  --color-card-hover: #363636;

  /* Citations */
  --color-citation-background: #1e3a5f;
  --color-citation-background-hover: #2a4a6f;

  /* Avatar */
  --color-avatar-background: #404040;
  --color-avatar-text: rgba(255, 255, 255, 0.87);
  --color-avatar-outline: #4da6ff;

  /* Error */
  --color-error: #ff6b6b;
  --color-success: #4caf50;

  /* Diff viewer */
  --color-diff-added: #1a4d1a;
  --color-diff-removed: #4d1a1a;

  /* Highlight backgrounds */
  --color-highlight-background: #1e3a5c;
  --color-highlight-subtle: rgba(77, 166, 255, 0.08);
  --color-accent-light: rgba(77, 166, 255, 0.15);
  --color-accent-lighter: rgba(77, 166, 255, 0.05);

  /* Warning/callout colors */
  --color-callout-warning-bg: #3d3520;
  --color-callout-warning-border: #d97706;
  --color-callout-warning-text: #fcd34d;
  --color-callout-warning-link: #fbbf24;

  /* Toast notifications */
  --color-toast-info: #0677d5;
  --color-toast-success: #4d831e;
  --color-toast-warning: #c15601;
  --color-toast-error: #d74113;

  /* Badges (bold colors - same as light mode) */
  --color-extraction-badge: #7c3aed;
  --color-author-badge: #059669;

  /* Row/selection highlights */
  --color-row-highlight: #3d3a2e;
  --color-selection-primary: rgba(96, 165, 250, 0.4);
  --color-selection-secondary: rgba(248, 113, 113, 0.4);

  /* Video/media */
  --color-video-background: #000000;

  /* Status backgrounds (15% opacity versions - adjusted for dark mode) */
  --color-status-draft: #9e9c9a;
  --color-status-draft-bg: rgba(158, 156, 154, 0.2);
  --color-status-processing: #e67835;
  --color-status-processing-bg: rgba(230, 120, 53, 0.2);
  --color-status-ready-bg: rgba(77, 166, 255, 0.2);
  --color-status-success-bg: rgba(76, 175, 80, 0.2);
  --color-status-error-bg: rgba(255, 107, 107, 0.2);

  /* Error panel colors (dark mode) */
  --color-error-panel-background: rgba(248, 113, 113, 0.15);
  --color-error-panel-border: rgba(248, 113, 113, 0.3);
  --color-error-text: #fca5a5;
  --color-error-icon: #f87171;

  /* Diagnostic card colors (dark mode) */
  --color-diagnostic-warning: #ffb74d;
  --color-diagnostic-warning-text: #ffcc80;
  --color-diagnostic-info: #64b5f6;
  --color-diagnostic-info-text: #90caf9;
  --color-diagnostic-success: #81c784;
  --color-diagnostic-success-text: #a5d6a7;
  --color-diagnostic-danger: #e57373;
  --color-diagnostic-danger-text: #ef9a9a;
  --color-diagnostic-hint-bg: rgba(255, 167, 38, 0.15);
  --color-diagnostic-hint-icon: #ffb74d;

  /* Code block colors (dark mode - slightly lighter background) */
  --color-code-background: #1e1e1e;
  --color-code-text: #d4d4d4;

  /* Spark type colors (same as light mode - vivid colors work well on dark backgrounds) */
  --color-spark-risk: #dc2626;
  --color-spark-decision: #f59e0b;
  --color-spark-action: #9333ea;
  --color-spark-research: #2563eb;
  --color-spark-issue: #e11d48;
  --color-spark-insight: #84cc16;
  --color-spark-assumption: #f97316;
  --color-spark-concept: #06b6d4;
  --color-spark-default: #6b7280;

  /* Spark type badge/icon backgrounds (darker tinted for dark mode) */
  --color-spark-risk-bg: rgba(248, 113, 113, 0.2);
  --color-spark-decision-bg: rgba(251, 191, 36, 0.2);
  --color-spark-action-bg: rgba(167, 139, 250, 0.2);
  --color-spark-research-bg: rgba(96, 165, 250, 0.2);
  --color-spark-issue-bg: rgba(251, 113, 133, 0.2);
  --color-spark-insight-bg: rgba(163, 230, 53, 0.2);
  --color-spark-assumption-bg: rgba(251, 146, 60, 0.2);
  --color-spark-concept-bg: rgba(34, 211, 238, 0.2);
  --color-spark-default-bg: rgba(156, 163, 175, 0.2);

  /* Spark type badge/icon text (same as light mode for consistency) */
  --color-spark-risk-text: #dc2626;
  --color-spark-decision-text: #d97706;
  --color-spark-action-text: #a21caf;
  --color-spark-research-text: #2563eb;
  --color-spark-issue-text: #e11d48;
  --color-spark-insight-text: #65a30d;
  --color-spark-assumption-text: #ea580c;
  --color-spark-concept-text: #0891b2;
  --color-spark-default-text: #6b7280;

  /* Timeline colors (adjusted for dark backgrounds) */
  --color-timeline-line: #4a4a4a;
  --color-timeline-active: #4da6ff;
  --color-timeline-date: #38bdf8;
  --color-timeline-event: #9ca3af;
  --color-timeline-end: #9ca3af;
  --color-timeline-month: #3d3d3d;
  --color-timeline-month-dot: #6b7280;

  /* Chain status colors (adjusted for dark backgrounds) */
  --color-chain-snoozed: #fb923c;
  --color-chain-snoozed-bg: rgba(251, 146, 60, 0.25);
  --color-chain-snoozed-border: rgba(251, 146, 60, 0.5);
  --color-chain-snoozed-hover: rgba(251, 146, 60, 0.4);
  --color-chain-woken: #fbbf24;
  --color-chain-woken-bg: rgba(251, 191, 36, 0.25);
  --color-chain-woken-border: rgba(251, 191, 36, 0.5);
  --color-chain-woken-hover: rgba(251, 191, 36, 0.4);
  --color-chain-urgent-bg: rgba(220, 38, 38, 0.2);
  --color-chain-urgent-text: #f87171;
  --color-chain-urgent-border: rgba(248, 113, 113, 0.4);
  --color-chain-active-bg: rgba(34, 197, 94, 0.2);
  --color-chain-active-text: #4ade80;
  --color-chain-active-border: rgba(74, 222, 128, 0.4);
  --color-chain-monitoring-bg: rgba(156, 163, 175, 0.2);
  --color-chain-monitoring-text: #9ca3af;
  --color-chain-monitoring-border: rgba(156, 163, 175, 0.4);
  --color-chain-complete-bg: rgba(96, 165, 250, 0.2);
  --color-chain-complete-text: #60a5fa;
  --color-chain-complete-border: rgba(96, 165, 250, 0.4);

  /* Score/progress colors */
  --color-score-priority: #fb923c;
  --color-score-health: #4ade80;
  --color-score-bar-bg: #404040;

  /* Grays (for SCSS variable replacement) */
  --color-gray-50: #2d2d2d;
  --color-gray-100: #333333;
  --color-gray-200: #3d3d3d;
  --color-gray-300: #4a4a4a;

  /* Saga timeline state colors (dark mode) */
  --color-saga-transition-bg: rgba(251, 191, 36, 0.2);
  --color-saga-transition-border: #fbbf24;
  --color-saga-transition-icon: #fcd34d;
  --color-saga-completed-bg: rgba(34, 197, 94, 0.2);
  --color-saga-completed-border: #22c55e;
  --color-saga-completed-icon: #4ade80;
  --color-saga-failed-bg: rgba(239, 68, 68, 0.2);
  --color-saga-failed-border: #ef4444;
  --color-saga-failed-icon: #f87171;
  --color-saga-event-bg: rgba(59, 130, 246, 0.2);
  --color-saga-event-border: #3b82f6;
  --color-saga-event-icon: #60a5fa;
  --color-saga-faulted-bg: rgba(239, 68, 68, 0.15);

  /* Entity name badge colors (dark mode) */
  --color-entity-badge-bg: rgba(59, 130, 246, 0.2);
  --color-entity-badge-text: #60a5fa;

  /* Objective chip colors (dark mode) */
  --color-objective-background: transparent;
  --color-objective-border: var(--color-border);
  --color-objective-text: var(--color-text-primary);

  /* Objective relevance type colors (dark mode - same vivid colors work well) */
  --color-relevance-directly-measures: #4ade80;
  --color-relevance-contributes: #60a5fa;
  --color-relevance-may-impact: #fb923c;
  --color-relevance-informs: #9ca3af;

  /* Scrollbar colors (dark mode) */
  --color-scrollbar-track: #2d2d2d;
  --color-scrollbar-thumb: #5a5a5a;
  --color-scrollbar-thumb-hover: #787878;
}

/* ===========================================
   Scrollbar Styling
   =========================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}