/* ==========================================================================
   THEMES
   Color schemes and theme-specific styles
   ========================================================================== */

:root {
  --bg: #1c1c1c;
  --text: #f3f3f3;
  --accent-green: #a8cfa2;
  --accent-blue: #9bbfd4;
  --card-bg: #2a2a2a;
  --border: #444;
  --font-body: 'Lexend', sans-serif;
  --btn-bg: var(--accent-green);
  --btn-bg-hover: #bfdcc0;
  --btn-text: #1c1c1c;
  --input-bg: #232323;
  --input-border: #444;
  --input-placeholder: #ccc;
    --color-text: #f0f0f0;
    --color-text-muted: #a0a0a0;
    --color-primary: #a8c48a;
    --color-primary-dark: #8aa870;
    --color-accent: #b8a7c2;
    --color-border: #444;
    --color-card-bg: #2d2d2d;
    --color-card-shadow: rgba(0, 0, 0, 0.3);
    
    --color-button-text: #1a1a1a;
    --color-button-bg: var(--color-primary);
    --color-button-hover: #9bb57d;
    --color-button-secondary-text: var(--color-primary);
    --color-button-secondary-border: var(--color-primary);
    --color-button-secondary-hover: rgba(168, 196, 138, 0.1);
    
    --color-input-bg: #333;
    --color-input-border: #444;
    --color-input-focus: var(--color-primary);
    --color-input-text: #f0f0f0;
    --color-input-placeholder: #777;
    
    --color-success: #5cb85c;
    --color-warning: #f0ad4e;
    --color-error: #d9534f;
    --color-info: #5bc0de;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    --color-bg: #000;
    --color-bg-alt: #111;
    --color-text: #fff;
    --color-text-muted: #ccc;
    --color-primary: #ffff00;
    --color-primary-dark: #cccc00;
    --color-accent: #00ffff;
    --color-border: #fff;
    --color-card-bg: #111;
    --color-card-shadow: 0 0 0 2px #fff;
    
    --color-button-text: #000;
    --color-button-bg: #ffff00;
    --color-button-hover: #ffff99;
    --color-button-secondary-text: #ffff00;
    --color-button-secondary-border: #ffff00;
    
    --color-input-bg: #000;
    --color-input-border: #fff;
    --color-input-focus: #ffff00;
    --color-input-text: #fff;
    --color-input-placeholder: #999;
    
    --color-success: #00ff00;
    --color-warning: #ffa500;
    --color-error: #ff0000;
    --color-info: #00ffff;
}

/* Apply theme colors to elements */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Card styles */
.card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px var(--color-card-shadow);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--color-card-shadow);
}

/* Button styles */
.btn-primary {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-button-hover);
}

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

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-button-secondary-hover);
}

/* Form elements */
input[type="text"],
input[type="email"],
textarea,
select {
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    color: var(--color-input-text);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-input-focus);
    box-shadow: 0 0 0 2px rgba(156, 175, 136, 0.3);
}

::placeholder {
    color: var(--color-input-placeholder);
    opacity: 1;
}

/* Apply reduced motion when requested */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}