/* Base Styles - CSS Variables and Body */

:root {
  --bg-primary: #f9f9f9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #222;
  --text-secondary: #555;
  --accent: #cc3333;
  --accent-hover: #aa2222;
  --border: #ddd;
  --shadow: rgba(0, 0, 0, 0.1);
  --hero-gradient-start: #ffcccc;
  --hero-gradient-end: #f9f9f9;
}

[data-theme="dark"] {
  --bg-primary: #111;
  --bg-secondary: #1b1b1b;
  --bg-card: #1b1b1b;
  --text-primary: #eee;
  --text-secondary: #aaa;
  --accent: #882222;
  --accent-hover: #aa3333;
  --border: #333;
  --shadow: rgba(136, 34, 34, 0.3);
  --hero-gradient-start: #550000;
  --hero-gradient-end: #111;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
  min-height: 100vh;
}