/* Theme CSS - Theme-specific styles and variables */

/* Dark theme (default) */
:root {
  /* Colors */
  --primary-color: #000000;
  --secondary-color: #1a1a1a;
  --tertiary-color: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);
  --border-color: rgba(255, 255, 255, 0.1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  --gradient-secondary: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  --gradient-accent: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* Accent colors */
  --accent-primary: #3b82f6;
  --accent-secondary: #10b981;
  --accent-tertiary: #f59e0b;
  --accent-danger: #ef4444;
  --accent-warning: #f59e0b;
  --accent-success: #10b981;
  --accent-info: #3b82f6;
}

/* Light theme */
[data-theme="light"] {
  --primary-color: #ffffff;
  --secondary-color: #f5f5f5;
  --tertiary-color: #e5e5e5;
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.7);
  --text-tertiary: rgba(0, 0, 0, 0.5);
  --border-color: rgba(0, 0, 0, 0.1);

  --gradient-primary: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  --gradient-secondary: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%);
  --gradient-accent: linear-gradient(135deg, #e5e5e5 0%, #d5d5d5 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05);
}

/* Theme-specific components */
.theme-card {
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--animation-duration-normal) ease-in-out;
}

.theme-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.theme-button {
  background-color: var(--accent-primary);
  color: var(--text-primary);
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all var(--animation-duration-normal) ease-in-out;
}

.theme-button:hover {
  background-color: var(--accent-secondary);
  transform: translateY(-1px);
}

.theme-input {
  background-color: var(--secondary-color);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  transition: all var(--animation-duration-normal) ease-in-out;
}

.theme-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Theme utilities */
.bg-primary {
  background-color: var(--primary-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-tertiary {
  background-color: var(--tertiary-color);
}

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.border-primary {
  border-color: var(--border-color);
}

/* Theme transitions */
.theme-transition {
  transition:
    background-color var(--animation-duration-normal) ease-in-out,
    color var(--animation-duration-normal) ease-in-out,
    border-color var(--animation-duration-normal) ease-in-out;
}