/* Theme Variables */
:root {
  /* Light Theme Colors */
  --bg-primary-light: #f5f5f5;
  --bg-secondary-light: #ffffff;
  --bg-tertiary-light: #e5e7eb;
  --text-primary-light: #333333;
  --text-secondary-light: #666666;
  --text-tertiary-light: #9ca3af;
  --border-light: #e0e0e0;
  --shadow-light: rgba(0, 0, 0, 0.1);
  
  /* Dark Theme Colors */
  --bg-primary-dark: #030712;
  --bg-secondary-dark: #1e293b;
  --bg-tertiary-dark: #334155;
  --text-primary-dark: #ffffff;
  --text-secondary-dark: #d1d5db;
  --text-tertiary-dark: #9ca3af;
  --border-dark: rgba(255, 103, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.3);
  
  /* Accent Colors */
  --accent-primary: #0d253f;
  --accent-primary-hover: #ff8533;
  --accent-secondary: #567a68;
  --accent-secondary-hover: #6a9180;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  
  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.05);
  --overlay-medium: rgba(255, 255, 255, 0.08);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-backdrop: rgba(3, 7, 18, 0.9);
  --overlay-backdrop-light: rgba(245, 245, 245, 0.9);
  
  /* Backdrop Effects */
  --backdrop-blur: blur(10px);
  
  /* Opacity */
  --opacity-hover: 0.8;
  --opacity-disabled: 0.6;
  
  /* Border Accent */
  --border-accent: rgba(255, 103, 0, 0.2);
  --border-accent-hover: rgba(255, 103, 0, 0.3);
  
  /* Tag/Badge Background */
  --tag-bg: rgba(255, 103, 0, 0.2);
}

/* Light Theme */
body.light,
[data-theme="light"] {
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --border-color: var(--border-light);
  --shadow-color: var(--shadow-light);
}

/* Dark Theme */
body.dark,
[data-theme="dark"] {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --border-color: var(--border-dark);
  --shadow-color: var(--shadow-dark);
}

/* Apply theme colors to common elements */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card styles */
.card {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 4px var(--shadow-color);
}

/* Input styles */
input,
textarea,
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Button styles */
button {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

button:hover {
  background-color: var(--accent-primary);
  color: white;
}