/* ============================================================
   V3 Purple Theme — ContentHub TMA
   Dark (default) + Light mode
   ============================================================ */

:root {
  --accent: #8b5cf6;
  --accent-light: #a78bfa;
  --accent-subtle: rgba(139, 92, 246, 0.1);
  --accent-glow: rgba(139, 92, 246, 0.15);
}

/* ─── Dark Theme (default) ─────────────────────────────────── */
:root {
  --app-bg: #0c0b14;
  --app-bg-gradient: linear-gradient(170deg, #0c0b14 0%, #13111e 40%, #0e0d18 100%);
  --card-bg: rgba(255, 255, 255, 0.04);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-bg-hover: rgba(255, 255, 255, 0.06);
  --menu-bg: #1e1c2e;
  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.72);
  --text-hint: rgba(245, 245, 247, 0.48);
  --divider: rgba(255, 255, 255, 0.05);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.08);
  --toggle-off: rgba(255, 255, 255, 0.2);
  --toggle-knob: #fff;
  --neutral-bg: rgba(255, 255, 255, 0.08);
  --danger-soft-bg: rgba(248, 113, 113, 0.1);
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-success-bg: rgba(52, 211, 153, 0.08);
  --color-success-badge: rgba(52, 211, 153, 0.15);
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-danger-bg: rgba(248, 113, 113, 0.1);
  --color-danger-badge: rgba(248, 113, 113, 0.15);
  --stale-opacity: 0.35;
}

body {
  --tg-theme-bg-color: #0c0b14 !important;
  --tg-theme-secondary-bg-color: rgba(255, 255, 255, 0.04) !important;
  --tg-theme-text-color: #f5f5f7 !important;
  --tg-theme-hint-color: rgba(245, 245, 247, 0.48) !important;
  --tg-theme-link-color: #a78bfa !important;
  --tg-theme-button-color: #8b5cf6 !important;
  --tg-theme-button-text-color: #fff !important;
}

/* ─── Light Theme ──────────────────────────────────────────── */
body.theme-light {
  --app-bg: #f2f0f7 !important;
  --app-bg-gradient: linear-gradient(170deg, #f2f0f7 0%, #ece8f4 40%, #f5f3fa 100%) !important;
  --card-bg: #ffffff !important;
  --card-border: rgba(0, 0, 0, 0.08) !important;
  --card-bg-hover: rgba(0, 0, 0, 0.03) !important;
  --menu-bg: #ffffff !important;
  --text-primary: #1a1a2e !important;
  --text-secondary: rgba(26, 26, 46, 0.65) !important;
  --text-hint: rgba(26, 26, 46, 0.45) !important;
  --divider: rgba(0, 0, 0, 0.06) !important;
  --input-bg: rgba(0, 0, 0, 0.03) !important;
  --input-border: rgba(0, 0, 0, 0.1) !important;
  --toggle-off: rgba(0, 0, 0, 0.15) !important;
  --toggle-knob: #fff !important;
  --neutral-bg: rgba(0, 0, 0, 0.05) !important;
  --danger-soft-bg: rgba(220, 38, 38, 0.06) !important;
  --accent-subtle: rgba(139, 92, 246, 0.08) !important;
  --accent-glow: rgba(139, 92, 246, 0.1) !important;
  --stale-opacity: 0.5 !important;

  --tg-theme-bg-color: #f2f0f7 !important;
  --tg-theme-secondary-bg-color: #ffffff !important;
  --tg-theme-text-color: #1a1a2e !important;
  --tg-theme-hint-color: rgba(26, 26, 46, 0.45) !important;
  --tg-theme-link-color: #7c3aed !important;
  --tg-theme-button-color: #7c3aed !important;
  --tg-theme-button-text-color: #fff !important;

  --color-success: #059669 !important;
  --color-success-bg: rgba(5, 150, 105, 0.08) !important;
  --color-success-badge: rgba(5, 150, 105, 0.12) !important;
  --color-warning: #d97706 !important;
  --color-warning-bg: rgba(217, 119, 6, 0.1) !important;
  --color-danger: #dc2626 !important;
  --color-danger-bg: rgba(220, 38, 38, 0.06) !important;
  --color-danger-badge: rgba(220, 38, 38, 0.1) !important;
  --color-border: rgba(0, 0, 0, 0.1) !important;
  --color-border-light: rgba(0, 0, 0, 0.06) !important;
  --color-border-medium: rgba(0, 0, 0, 0.1) !important;

  background: var(--app-bg) !important;
  color: var(--text-primary) !important;
}

body.theme-light .card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.theme-light .modal-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}