/* theme.css */

/* ================= */
/* LIGHT MODE DEFAULTS */
/* ================= */
:root {
  --primary: #00aaff;       
  --primary-dark: #0088cc;  
  --secondary: #04d9ff;     

  --success: #21d19f;
  --warning: #ffc857;
  --danger: #ff6b6b;

  --bg-page: #f0faff;
  --bg-card: #ffffff;
  --bg-input: #f9fafb;
  --border-color: #d1d5db;

  --text-main: #0a2540;
  --text-muted: #4b5563;

  --radius: 12px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-lg: 0 6px 12px rgba(0,0,0,0.15);
  --transition: all 0.2s ease;

  /* Chart colors */
  --chart-bg: #ffffff;
  --chart-grid: #d1d5db;
  --chart-text: #0a2540;
  --chart-drive: #3b82f6;
  --chart-charge: #06b6d4;
  --chart-cost: #10b981;
}

/* ================= */
/* DARK MODE OVERRIDES */
/* ================= */
body.dark-mode {
  --bg-page: #0d1117;
  --bg-card: #161b22;
  --bg-input: #0d1117;
  --border-color: #30363d;

  --text-main: #e6f7ff;
  --text-muted: #9caec5;

  --primary: #0ff;
  --primary-dark: #00c2c2;
  --secondary: #1de7ff;

  --chart-bg: #0d1117;
  --chart-grid: #30363d;
  --chart-text: #e6f7ff;
  --chart-drive: #3b82f6;
  --chart-charge: #00e5ff;
  --chart-cost: #21d19f;
}