/* ===== CSS VARIABLES ===== */
:root {
  --bg: #f6f5f2;
  --surface: #eceae7;
  --card: #ffffff;
  --card-hover: #fafaf9;
  --input: #ffffff;
  --text: #000000;
  --text-secondary: rgba(0,0,0,0.55);
  --text-tertiary: rgba(0,0,0,0.35);
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.16);
  --accent: #2a5a4a;
  --accent-light: rgba(42,90,74,0.08);
  --max-width: 1200px;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --blue: #006fff;
  --blue-light: rgba(0,111,255,0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-full: 999px;

  /* Admin/portal theme — dark by default */
  --admin-bg: #111318;
  --admin-sidebar-bg: #0d0f13;
  --admin-card: rgba(255,255,255,0.025);
  --admin-card-hover: rgba(255,255,255,0.045);
  --admin-border: rgba(255,255,255,0.06);
  --admin-border-hover: rgba(255,255,255,0.1);
  --admin-text: rgba(255,255,255,0.88);
  --admin-text-muted: rgba(255,255,255,0.50);
  --admin-text-subtle: rgba(255,255,255,0.25);
  --admin-input-bg: rgba(255,255,255,0.04);
  --admin-input-focus: rgba(255,255,255,0.06);
  --admin-nav-link: rgba(255,255,255,0.40);
  --admin-nav-active: rgba(255,255,255,0.95);
  --admin-nav-active-bg: rgba(255,255,255,0.08);
  --admin-sidebar-border: rgba(255,255,255,0.06);
  --admin-overlay: rgba(0,0,0,0.75);
  --admin-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

html[data-theme="light"] {
  --admin-bg: #f1f3f6;
  --admin-sidebar-bg: #ffffff;
  --admin-card: #ffffff;
  --admin-card-hover: #f7f8fa;
  --admin-border: rgba(0,0,0,0.09);
  --admin-border-hover: rgba(0,0,0,0.18);
  --admin-text: rgba(0,0,0,0.88);
  --admin-text-muted: rgba(0,0,0,0.52);
  --admin-text-subtle: rgba(0,0,0,0.34);
  --admin-input-bg: #f5f7fa;
  --admin-input-focus: #edf0f5;
  --admin-nav-link: rgba(0,0,0,0.45);
  --admin-nav-active: rgba(0,0,0,0.88);
  --admin-nav-active-bg: rgba(42,90,74,0.10);
  --admin-sidebar-border: rgba(0,0,0,0.08);
  --admin-overlay: rgba(0,0,0,0.45);
  --admin-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}