/* ============================================
   PersoShift – Theme Variables
   ============================================ */

/* --- Dark Theme (Default) --- */
:root {
  --bg: #0c1017;
  --bg-elevated: #111827;
  --card-bg: #151c28;
  --card-bg-hover: #1a2332;
  --surface: #1e2736;
  --border: #232d3b;
  --border-light: #2a3648;
  --text: #e0e4eb;
  --text-secondary: #9ca3af;
  --muted: #6b7280;
  --primary: #34d399;
  --primary-hover: #2bb886;
  --primary-muted: rgba(52, 211, 153, 0.15);
  --primary-subtle: rgba(52, 211, 153, 0.08);
  --accent: #fbbf24;
  --accent-muted: rgba(251, 191, 36, 0.15);
  --danger: #f87171;
  --danger-muted: rgba(248, 113, 113, 0.12);
  --success: #34d399;
  --info-bg: rgba(52, 211, 153, 0.06);
  --secondary-btn-bg: #1e2736;
  --secondary-btn-hover-bg: #2a3648;
  --capital-color: #3b82f6;
  --gain-color: #fbbf24;
  --payout-color-annual: rgba(52, 211, 153, 0.8);
  --tax-color-diagram: rgba(248, 113, 113, 0.7);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

/* --- Light Theme (higher specificity with html[]) --- */
html[data-theme="light"],
html[data-theme="light"] body {
  --bg: #f0f3f7;
  --bg-elevated: #ffffff;
  --card-bg: #ffffff;
  --card-bg-hover: #f8f9fb;
  --surface: #e8ecf1;
  --border: #d1d8e0;
  --border-light: #e2e8f0;
  --text: #1e3a5f;
  --text-secondary: #4a6785;
  --muted: #7a8ea3;
  --primary: #2c7a8e;
  --primary-hover: #236572;
  --primary-muted: rgba(44, 122, 142, 0.12);
  --primary-subtle: rgba(44, 122, 142, 0.06);
  --accent: #d4922a;
  --accent-muted: rgba(212, 146, 42, 0.12);
  --danger: #c0392b;
  --danger-muted: rgba(192, 57, 43, 0.08);
  --success: #27ae60;
  --info-bg: rgba(44, 122, 142, 0.05);
  --secondary-btn-bg: #e8ecf1;
  --secondary-btn-hover-bg: #d1d8e0;
  --capital-color: #2980b9;
  --gain-color: #d4922a;
  --payout-color-annual: rgba(39, 174, 96, 0.8);
  --tax-color-diagram: rgba(192, 57, 43, 0.65);
  --shadow-sm: 0 1px 4px rgba(30,58,95,0.06);
  --shadow-md: 0 2px 8px rgba(30,58,95,0.08);
  --shadow-lg: 0 4px 16px rgba(30,58,95,0.1);
}