/* ========================
   THEME SYSTEM v1.0
   Custom color themes for the platform
   Default: dark theme (matches platform.css)
   Users can switch: dark, light, midnight, rose, ocean, sunset, forest, custom
   ======================== */

/* === LIGHT THEME === */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f8f8f8;
  --bg-3: #f0f0f0;
  --bg-elevated: #ffffff;
  --bg-hover: #f0f0f0;
  --card: #ffffff;
  --card-hover: #f8f8f8;
  --card-border: #e0e0e0;
  --text: #0a0a0a;
  --text-2: #333333;
  --text-3: #666666;
  --text-dim: #999999;
  --border: #e0e0e0;
  --border-2: #cccccc;
  --border-3: #b0b0b0;
  --border-hover: #999999;
  /* Monochrome — no purple, no colors */
  --accent: #0a0a0a;
  --accent-2: #0a0a0a;
  --accent-soft: rgba(0,0,0,0.06);
  --accent-glow: transparent;
  --accent-bright: #0a0a0a;
  --pink: #0a0a0a;
  --pink-soft: rgba(0,0,0,0.04);
  --green: #0a0a0a;
  --green-soft: rgba(0,0,0,0.04);
  --yellow: #0a0a0a;
  --yellow-soft: rgba(0,0,0,0.04);
  --red: #0a0a0a;
  --red-soft: rgba(0,0,0,0.04);
  --blue: #0a0a0a;
  --blue-soft: rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}

[data-theme="light"] ._nav,
[data-theme="light"] .nav-sidebar {
  background: #ffffff;
  border-right-color: #e0e0e0;
}

/* === MIDNIGHT THEME (deeper dark — monochrome) === */
[data-theme="midnight"] {
  --bg: #000000;
  --bg-2: #0a0a0a;
  --bg-3: #111111;
  --bg-elevated: #0a0a0a;
  --bg-hover: #1a1a1a;
  --card: #0a0a0a;
  --card-hover: #111111;
  --card-border: #222222;
  --text: #f0f0f0;
  --text-2: #cccccc;
  --text-3: #888888;
  --text-dim: #555555;
  --border: #222222;
  --border-2: #333333;
  --border-3: #444444;
  --border-hover: #555555;
  --accent: #f0f0f0;
  --accent-2: #f0f0f0;
  --accent-soft: rgba(255,255,255,0.06);
  --accent-glow: transparent;
  --accent-bright: #ffffff;
  --pink: #f0f0f0;
  --pink-soft: rgba(255,255,255,0.04);
  --green: #f0f0f0;
  --green-soft: rgba(255,255,255,0.04);
  --yellow: #f0f0f0;
  --yellow-soft: rgba(255,255,255,0.04);
  --red: #f0f0f0;
  --red-soft: rgba(255,255,255,0.04);
  --blue: #f0f0f0;
  --blue-soft: rgba(255,255,255,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.6);
}

/* === ROSE THEME (warm tones — monochrome with warmth) === */
[data-theme="rose"] {
  --bg: #1a0f14;
  --bg-2: #201218;
  --bg-3: #28181f;
  --bg-elevated: #201218;
  --bg-hover: #301e28;
  --card: #201218;
  --card-hover: #28181f;
  --card-border: #3a2530;
  --text: #f0e5eb;
  --text-2: #d4b8c8;
  --text-3: #a8849a;
  --text-dim: #7a5e70;
  --border: #3a2530;
  --border-2: #4a3040;
  --border-3: #5a3a50;
  --border-hover: #6a4a60;
  --accent: #f0e5eb;
  --accent-2: #f0e5eb;
  --accent-soft: rgba(240,229,235,0.06);
  --accent-glow: transparent;
  --accent-bright: #f0e5eb;
  --pink: #f0e5eb;
  --pink-soft: rgba(240,229,235,0.04);
  --green: #f0e5eb;
  --green-soft: rgba(240,229,235,0.04);
  --yellow: #f0e5eb;
  --yellow-soft: rgba(240,229,235,0.04);
  --red: #f0e5eb;
  --red-soft: rgba(240,229,235,0.04);
  --blue: #f0e5eb;
  --blue-soft: rgba(240,229,235,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* === OCEAN THEME (cool tones — monochrome with depth) === */
[data-theme="ocean"] {
  --bg: #0a1420;
  --bg-2: #0f1a28;
  --bg-3: #142030;
  --bg-elevated: #0f1a28;
  --bg-hover: #1a2838;
  --card: #0f1a28;
  --card-hover: #142030;
  --card-border: #1e3045;
  --text: #e5eef8;
  --text-2: #b4c8dc;
  --text-3: #7a98b8;
  --text-dim: #506880;
  --border: #1e3045;
  --border-2: #284058;
  --border-3: #32506a;
  --border-hover: #3c6080;
  --accent: #e5eef8;
  --accent-2: #e5eef8;
  --accent-soft: rgba(229,238,248,0.06);
  --accent-glow: transparent;
  --accent-bright: #e5eef8;
  --pink: #e5eef8;
  --pink-soft: rgba(229,238,248,0.04);
  --green: #e5eef8;
  --green-soft: rgba(229,238,248,0.04);
  --yellow: #e5eef8;
  --yellow-soft: rgba(229,238,248,0.04);
  --red: #e5eef8;
  --red-soft: rgba(229,238,248,0.04);
  --blue: #e5eef8;
  --blue-soft: rgba(229,238,248,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* === SUNSET THEME (warm dark — monochrome with warmth) === */
[data-theme="sunset"] {
  --bg: #1a0f0a;
  --bg-2: #201410;
  --bg-3: #281a14;
  --bg-elevated: #201410;
  --bg-hover: #30221a;
  --card: #201410;
  --card-hover: #281a14;
  --card-border: #3a2820;
  --text: #f0e8e5;
  --text-2: #d4c0b8;
  --text-3: #a88a7a;
  --text-dim: #7a6458;
  --border: #3a2820;
  --border-2: #4a3530;
  --border-3: #5a4540;
  --border-hover: #6a5550;
  --accent: #f0e8e5;
  --accent-2: #f0e8e5;
  --accent-soft: rgba(240,232,229,0.06);
  --accent-glow: transparent;
  --accent-bright: #f0e8e5;
  --pink: #f0e8e5;
  --pink-soft: rgba(240,232,229,0.04);
  --green: #f0e8e5;
  --green-soft: rgba(240,232,229,0.04);
  --yellow: #f0e8e5;
  --yellow-soft: rgba(240,232,229,0.04);
  --red: #f0e8e5;
  --red-soft: rgba(240,232,229,0.04);
  --blue: #f0e8e5;
  --blue-soft: rgba(240,232,229,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* === FOREST THEME (natural dark — monochrome with depth) === */
[data-theme="forest"] {
  --bg: #0a1a0f;
  --bg-2: #0f2015;
  --bg-3: #14281a;
  --bg-elevated: #0f2015;
  --bg-hover: #1a3022;
  --card: #0f2015;
  --card-hover: #14281a;
  --card-border: #1e3825;
  --text: #e5f0e8;
  --text-2: #b4d4b8;
  --text-3: #7ab880;
  --text-dim: #508a58;
  --border: #1e3825;
  --border-2: #284a30;
  --border-3: #325a3a;
  --border-hover: #3c6a44;
  --accent: #e5f0e8;
  --accent-2: #e5f0e8;
  --accent-soft: rgba(229,240,232,0.06);
  --accent-glow: transparent;
  --accent-bright: #e5f0e8;
  --pink: #e5f0e8;
  --pink-soft: rgba(229,240,232,0.04);
  --green: #e5f0e8;
  --green-soft: rgba(229,240,232,0.04);
  --yellow: #e5f0e8;
  --yellow-soft: rgba(229,240,232,0.04);
  --red: #e5f0e8;
  --red-soft: rgba(229,240,232,0.04);
  --blue: #e5f0e8;
  --blue-soft: rgba(229,240,232,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* === CUSTOM THEME (set via JS) === */
[data-theme="custom"] {
  /* Custom properties set dynamically via JavaScript */
}

/* Theme transition for smooth switching */
body, body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}