/**
 * StatusHub Global Theme System
 * Defines Light Mode (:root) and Dark Mode ([data-theme="dark"], html.dark) CSS Variables
 */

:root {
  /* StatusHub Theme Color Variables - Light Mode Defaults (Soft Blush Pink Tint) */
  --bg-primary: #fceef3;
  --bg-primary-rgb: 252 238 243;

  --bg-surface: #fdf5f8;
  --bg-surface-rgb: 253 245 248;

  --bg-surface-dim: #f8deea;
  --bg-surface-dim-rgb: 248 222 234;

  --bg-surface-bright: #ffffff;
  --bg-surface-bright-rgb: 255 255 255;

  --bg-card-lowest: #ffffff;
  --bg-card-lowest-rgb: 255 255 255;

  --bg-card-low: #fdf2f6;
  --bg-card-low-rgb: 253 242 246;

  --bg-card: #ffffff;
  --bg-card-rgb: 255 255 255;

  --bg-card-high: #f9d8e5;
  --bg-card-high-rgb: 249 216 229;

  --bg-card-highest: #f4c5d8;
  --bg-card-highest-rgb: 244 197 216;

  --text-primary: #231418;
  --text-primary-rgb: 35 20 24;

  --text-secondary: #5e3e48;
  --text-secondary-rgb: 94 62 72;

  --text-muted: #986f7b;
  --text-muted-rgb: 152 111 123;

  --border-color: #f3d7e2;
  --border-color-rgb: 243 215 226;
  --border-color-subtle: #faeaf1;
  --border-color-subtle-rgb: 250 234 241;

  --primary: #e11d48;
  --primary-rgb: 225 29 72;
  --primary-container: #be123c;
  --on-primary: #ffffff;
  --on-primary-container: #fff1f2;
  --primary-fixed: #ffe4e6;
  --primary-fixed-dim: #fecdd3;
  --on-primary-fixed: #4c0519;
  --on-primary-fixed-variant: #881337;
  --inverse-primary: #fb7185;

  --secondary: #a21caf;
  --secondary-rgb: 162 28 175;
  --secondary-container: #fae8ff;
  --on-secondary: #ffffff;
  --on-secondary-container: #4a044e;
  --secondary-fixed: #fce7f3;
  --secondary-fixed-dim: #fbcfe8;
  --on-secondary-fixed: #500724;
  --on-secondary-fixed-variant: #831843;

  --tertiary: #f43f5e;
  --tertiary-container: #ffe4e6;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #881337;
  --tertiary-fixed: #ffe4e6;
  --tertiary-fixed-dim: #fecdd3;
  --on-tertiary-fixed: #4c0519;
  --on-tertiary-fixed-variant: #9f1239;

  --inverse-surface: #391f27;
  --inverse-on-surface: #fff1f3;

  --error: #e11d48;
  --error-container: #ffe4e6;
  --on-error-container: #881337;

  --nav-bg: rgba(253, 245, 248, 0.94);
  --header-border: rgba(243, 215, 226, 0.8);
  --input-bg: #ffffff;
  --input-border: #f3d7e2;
  --glass-card: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"],
html.dark {
  /* StatusHub Theme Color Variables - Dark Mode Overrides */
  /* Background: dark charcoal/near-black */
  --bg-primary: #0b0f19;
  --bg-primary-rgb: 11 15 25;

  --bg-surface: #0b0f19;
  --bg-surface-rgb: 11 15 25;

  --bg-surface-dim: #070a12;
  --bg-surface-dim-rgb: 7 10 18;

  --bg-surface-bright: #141c2e;
  --bg-surface-bright-rgb: 20 28 46;

  /* Card backgrounds: slightly lighter than page background for subtle elevation */
  --bg-card-lowest: #141c2e;
  --bg-card-lowest-rgb: 20 28 46;

  --bg-card-low: #182238;
  --bg-card-low-rgb: 24 34 56;

  --bg-card: #1f2c47;
  --bg-card-rgb: 31 44 71;

  --bg-card-high: #263556;
  --bg-card-high-rgb: 38 53 86;

  --bg-card-highest: #2e3f65;
  --bg-card-highest-rgb: 46 63 101;

  /* Text: off-white/light gray (not pure white) for high contrast WCAG AA readability */
  --text-primary: #f8fafc;
  --text-primary-rgb: 248 250 252;

  --text-secondary: #cbd5e1;
  --text-secondary-rgb: 203 213 225;

  --text-muted: #94a3b8;
  --text-muted-rgb: 148 163 184;

  /* Borders/dividers: elegant subtle light gray in dark mode (no harsh white, no stark black) */
  --border-color: rgba(255, 255, 255, 0.12);
  --border-color-rgb: 255 255 255;
  --border-color-subtle: rgba(255, 255, 255, 0.08);
  --border-color-subtle-rgb: 255 255 255;
  --divider-color: rgba(255, 255, 255, 0.12);

  /* Primary accent stays vibrant and consistent */
  --primary: #f43f5e;
  --primary-rgb: 244 63 94;
  --primary-container: #be123c;
  --on-primary: #ffffff;
  --on-primary-container: #ffe4e6;
  --primary-fixed: #3b0d18;
  --primary-fixed-dim: #4c1120;
  --on-primary-fixed: #fecdd3;
  --on-primary-fixed-variant: #fda4af;
  --inverse-primary: #be123c;

  --secondary: #c084fc;
  --secondary-rgb: 192 132 252;
  --secondary-container: #3b0764;
  --on-secondary: #ffffff;
  --on-secondary-container: #f5d0fe;
  --secondary-fixed: #3b0764;
  --secondary-fixed-dim: #4a044e;
  --on-secondary-fixed: #f5d0fe;
  --on-secondary-fixed-variant: #e879f9;

  --tertiary: #fb7185;
  --tertiary-container: #4c0519;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #ffe4e6;
  --tertiary-fixed: #4c0519;
  --tertiary-fixed-dim: #881337;
  --on-tertiary-fixed: #fecdd3;
  --on-tertiary-fixed-variant: #fda4af;

  --inverse-surface: #f8fafc;
  --inverse-on-surface: #0b0f19;

  --error: #fb7185;
  --error-container: #4c0519;
  --on-error-container: #fecdd3;

  --nav-bg: rgba(11, 15, 25, 0.92);
  --header-border: rgba(30, 41, 59, 0.6);
  --input-bg: #182238;
  --input-border: #1e293b;
  --glass-card: rgba(20, 28, 46, 0.92);
}

/* Global color transition smooth transition */
html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Ensure images and video media are not inverted */
img, video, canvas, svg:not(.theme-icon) {
  filter: none !important;
}

/* Universal border and divider styling - modern subtle light gray in light mode, sleek slate in dark mode */
.border-outline-variant,
[class*="border-outline-variant"] {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-outline-variant,
html.dark .border-outline-variant,
[data-theme="dark"] [class*="border-outline-variant"],
html.dark [class*="border-outline-variant"] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

hr, .divider-line {
  border-color: var(--border-color);
}

[data-theme="dark"] hr,
html.dark hr,
[data-theme="dark"] .divider-line,
html.dark .divider-line {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Custom classes for theme transitions */
.theme-toggle-btn:hover {
  transform: scale(1.05);
}
.theme-toggle-btn:active {
  transform: scale(0.95);
}