/* CSS Variables for Canadian Retirement Calculator */

:root {
  --primary: #d32f2f;
  --primary-dark: #b71c1c;
  --primary-rgb: 211, 47, 47;
  --secondary: #1976d2;
  --secondary-dark: #1565c0;
  --success: #2e7d32;
  --warning: #f57c00;
  --info: #0288d1;
  --purple: #7b1fa2;
  --amber: #ff9800;
  --cyan: #00bcd4;
  --bg: #f8f9fa;
  --card-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.85);
  --text: #1a1a1a;
  --text-muted: #666666;
  --border: #e0e0e0;
  --input-bg: #ffffff;
  --input-border: #ddd;
  --shadow: rgba(0, 0, 0, 0.1);
  --chart-grid: #e0e0e0;
  --chart-text: #666666;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #e0e0e0;
  --z-index-overlay: 100;
  --z-index-mobile-nav: 101;
  --transition-speed: 0.25s;
  --transition-easing: ease;
  --nav-height: 60px;
}

[data-theme="dark"] {
  --bg: #0f172a;           /* Deep slate/navy instead of stark black */
  --card-bg: #1e293b;      /* Lighter slate for cards */
  --header-bg: rgba(30, 41, 59, 0.85);
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --border: #334155;
  --input-bg: #0f172a;
  --input-border: #475569;
  --shadow: rgba(0, 0, 0, 0.4);
  --primary: #ef5350;
  --primary-dark: #e53935;
  --primary-rgb: 239, 83, 80;
  --secondary: #60a5fa;    /* Slightly softer blue for dark mode */
  --secondary-dark: #3b82f6;
  --success: #4ade80;
  --warning: #fbbf24;
  --info: #38bdf8;
  --purple: #c084fc;
  --amber: #fcd34d;
  --cyan: #22d3ee;
  --chart-grid: #334155;
  --chart-text: #94a3b8;
  --chart-tooltip-bg: #1e293b;
  --chart-tooltip-border: #475569;
  --z-index-overlay: 100;
  --z-index-mobile-nav: 101;
  --transition-speed: 0.25s;
  --transition-easing: ease;
  --nav-height: 60px;
}