/* Theme variables extracted from original style.css */
:root {
  --primary-color: #ED1C24;
  --primary-light: #ff4d54;
  --primary-dark: #b01419;
  /* Hero specific reds (can be overridden without touching CSS) */
  --hero-red: #cccccc;
  --hero-red-dark: #999999;
  /* Hero two-color gradient (edit these for the hero background) */
  --hero-color-1: var(--hero-red);
  --hero-color-2: var(--hero-red-dark);
  /* Hero light-mode overrides */
  --hero-bg-light: #ffffff;
  --hero-text-light: #000000;
  --secondary-color: #2c3e50;
  --accent-color: #f39c12;
  --background-color: #ffffff;
  --background-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --text-color: #2c3e50;
  --text-light: #6c757d;
  --card-bg: #ffffff;
  --card-shadow: 0 10px 30px rgba(237, 28, 36, 0.1);
  --card-shadow-hover: 0 20px 40px rgba(237, 28, 36, 0.2);
  --header-bg: rgba(255, 255, 255, 0.95);
  --footer-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --accent-bg: #f8f9fa;
  --secondary-bg: #f8f9fa;
  --hover-bg: #e9ecef;
  --border-color: #dee2e6;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 15px;
  --border-radius-small: 8px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --background-color: #1a1a1a;
  --background-gradient: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  --text-color: #f0f0f0;
  --text-light: #adb5bd;
  --card-bg: #2d3748;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
  --header-bg: rgba(42, 42, 42, 0.95);
  --footer-bg: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
  --accent-bg: #374151;
  --secondary-bg: #374151;
  --hover-bg: #4b5563;
  --border-color: #4b5563;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  /* Optional: tweak hero reds for dark mode if desired */
  --hero-red: #d61a21;
  --hero-red-dark: #5e0b0f;
  /* Dark mode hero gradient colors (can mirror reds or be independent) */
  --hero-color-1: var(--hero-red);
  --hero-color-2: var(--hero-red-dark);
}