/* Theme CSS Variables - Best Practice Approach */
:root {
  /* Light Theme (Default) */
  --color-brand-primary: rgb(0, 127, 197);
  --color-brand-primary-hover: rgb(0, 117, 181);
  --color-brand-hover: rgb(39, 156, 220);
  --color-brand-lighter: rgb(39, 156, 220);
  --color-brand-dark: rgb(51, 81, 105);
  --color-brand-darker: rgb(0, 117, 181);
  --color-brand-background: rgb(237, 237, 237);
  --color-brand-surface: rgb(255, 255, 255);
  --color-brand-border: rgba(0, 0, 0, 0.1);
  --color-brand-text-primary: rgb(51, 81, 105);
  --color-brand-text-secondary: rgba(51, 81, 105, 0.7);
  --color-brand-accent-light: rgba(0, 127, 197, 0.15);
  --color-brand-white-transparent: rgba(255, 255, 255, 0.55);
  --color-brand-text-muted: rgba(51, 81, 105, 0.5);
  --color-brand-surface-highlight: rgba(0, 0, 0, 0.05);
  
  /* Banner gradient colors */
  --color-banner-start: rgb(0, 117, 181);
  --color-banner-end: rgb(51, 81, 105);
  
  /* Image placeholder colors */
  --color-image-placeholder-border: rgb(0, 127, 197);
  --color-image-placeholder-bg: rgba(0, 127, 197, 0.05);
  --color-image-placeholder-text: rgb(51, 81, 105);
}

[data-theme="dark"] {
  /* Dark Theme - Based on concept files */
  --color-brand-primary: #38BDF8; /* Sky 400 */
  --color-brand-primary-hover: #0EA5E9; /* Sky 500 */
  --color-brand-hover: #7DD3FC; /* Sky 300 */
  --color-brand-lighter: #7DD3FC;
  --color-brand-dark: #F1F5F9; /* Slate 100 - for headings */
  --color-brand-darker: #0284C7; /* Sky 600 */
  --color-brand-background: #0F172A; /* Slate 900 */
  --color-brand-surface: #1E293B; /* Slate 800 */
  --color-brand-border: #334155; /* Slate 700 */
  --color-brand-text-primary: #E2E8F0; /* Slate 200 */
  --color-brand-text-secondary: #94A3B8; /* Slate 400 */
  --color-brand-accent-light: rgba(56, 189, 248, 0.15);
  --color-brand-white-transparent: rgba(255, 255, 255, 0.7);
  --color-brand-text-muted: #94A3B8;
  --color-brand-surface-highlight: #334155; /* Slate 700 */
  
  /* Banner gradient colors for dark theme */
  --color-banner-start: #1e3a8a; /* Dark Blue */
  --color-banner-end: #0369a1; /* Sky 700 */
  
  /* Image placeholder colors for dark theme */
  --color-image-placeholder-border: #38BDF8;
  --color-image-placeholder-bg: rgba(56, 189, 248, 0.1);
  --color-image-placeholder-text: #94A3B8;
}

/* Apply theme colors to body */
body {
  background-color: var(--color-brand-background);
  color: var(--color-brand-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Image placeholder theme support */
.image-placeholder {
  border-color: var(--color-image-placeholder-border);
  background: var(--color-image-placeholder-bg);
}

.image-placeholder-icon {
  color: var(--color-image-placeholder-border);
}

.image-placeholder-text {
  color: var(--color-image-placeholder-text);
}

.image-placeholder-label {
  color: var(--color-image-placeholder-border);
}

/* Badge borders - subtle in dark mode (matches Welcome to Support badge) */
[data-theme="dark"] #welcome-badge,
[data-theme="dark"] #topics-header-badge-container,
[data-theme="dark"] #topic-header-badge-container {
  border-color: rgba(56, 189, 248, 0.15) !important;
}

/* Dark mode styling for didYouMean suggestion badges and needMoreHelp box */
[data-theme="dark"] button[onclick*="handleSuggestionClick"] {
  border-color: rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .bg-brand-accent-light {
  border-color: rgba(56, 189, 248, 0.15) !important;
}

/* Dark mode for needMoreHelp box border */
[data-theme="dark"] #need-more-help-box {
  border-color: rgba(56, 189, 248, 0.15) !important;
}

/* Smooth transitions for theme switching */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Exclude certain elements from transitions for performance */
img, svg, video, canvas, audio, iframe, embed, object {
  transition: none;
}