/* =====================================================
   BIOCHAR TOOL - COLOR THEMES
   ===================================================== */

/* CSS Custom Properties for Theme Management */
:root {
   /* Primary Brand Colors - Updated with requested green */
   --green-primary: #15B392;
   --green-secondary: #128A73;
   --green-tertiary: #0F7A66;
   --green-dark: #0C6B59;
   --green-accent: #095B4B;
   --green-light: #1AC9A3;
   
   /* Matching Brown Tones */
   --brown-primary: #B3551A;
   --brown-secondary: #A04E17;
   --brown-tertiary: #8E4614;
   --brown-dark: #7B3E11;
   --brown-accent: #68360E;
   --brown-light: #CC611E;
   
   /* Light Theme Colors */
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #f5f5f5;
   
   --text-primary: #333333;
   --text-secondary: #555555;
   --text-tertiary: #666666;
   --text-muted: #999999;
   
   --border-light: rgba(0, 0, 0, 0.1);
   --border-medium: rgba(0, 0, 0, 0.2);
   --shadow-light: rgba(0, 0, 0, 0.1);
   --shadow-medium: rgba(0, 0, 0, 0.15);
   
   /* Interactive Elements */
   --hover-overlay: rgba(255, 255, 255, 0.2);
   --hover-overlay-dark: rgba(255, 255, 255, 0.3);
   --focus-ring: rgba(21, 179, 146, 0.3);
}

/* Light theme (default) */
:root[data-theme="light"] {
   --bg-primary: #ffffff;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #f5f5f5;
   
   --text-primary: #333333;
   --text-secondary: #555555;
   --text-tertiary: #666666;
   --text-muted: #999999;
   
   --border-light: rgba(0, 0, 0, 0.1);
   --border-medium: rgba(0, 0, 0, 0.2);
   --shadow-light: rgba(0, 0, 0, 0.1);
   --shadow-medium: rgba(0, 0, 0, 0.15);
   
   --hover-overlay: rgba(255, 255, 255, 0.2);
   --hover-overlay-dark: rgba(255, 255, 255, 0.3);
}

/* Dark theme */
:root[data-theme="dark"] {
   --bg-primary: #1a1a1a;
   --bg-secondary: #2d2d2d;
   --bg-tertiary: #404040;
   
   --text-primary: #ffffff;
   --text-secondary: #e0e0e0;
   --text-tertiary: #cccccc;
   --text-muted: #999999;
   
   --border-light: rgba(255, 255, 255, 0.1);
   --border-medium: rgba(255, 255, 255, 0.2);
   --shadow-light: rgba(0, 0, 0, 0.3);
   --shadow-medium: rgba(0, 0, 0, 0.5);
   
   --hover-overlay: rgba(0, 0, 0, 0.2);
   --hover-overlay-dark: rgba(0, 0, 0, 0.3);
}

/* Theme Toggle Button */
.theme-toggle {
   background: var(--hover-overlay);
   border: 2px solid var(--border-medium);
   border-radius: 25px;
   width: 50px;
   height: 28px;
   position: relative;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-right: 15px;
}

.theme-toggle:hover {
   background: var(--hover-overlay-dark);
}

.theme-slider {
   position: absolute;
   top: 2px;
   left: 2px;
   width: 20px;
   height: 20px;
   background: white;
   border-radius: 50%;
   transition: transform 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
}

.theme-slider.dark {
   transform: translateX(22px);
}

.sun-icon {
   color: #ffa500;
}

.moon-icon {
   color: #4169e1;
}

/* =====================================================
  COMPONENT-SPECIFIC THEME APPLICATIONS
  ===================================================== */

/* Utility Bar Theme */
.utility-bar {
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   color: white;
}

.top-logo-icon {
   background: radial-gradient(circle, var(--bg-primary), var(--bg-tertiary));
}

.top-logo-icon::before {
   background: repeating-conic-gradient(
       from 0deg, 
       var(--green-primary) 0deg 60deg, 
       var(--green-secondary) 60deg 120deg
   );
}

.login-signup {
   background: var(--hover-overlay);
   border: 2px solid var(--border-medium);
   color: white;
}

.login-signup:hover {
   background: var(--hover-overlay-dark);
}

/* Main Header Theme */
.main-header {
   background: var(--bg-primary);
}

.logo-section .logo-icon {
   background: radial-gradient(circle, var(--green-primary), var(--green-secondary), var(--green-tertiary), var(--green-dark));
}

.logo-section .logo-icon::before {
   background: repeating-conic-gradient(
       from 0deg, 
       var(--green-accent) 0deg 60deg, 
       var(--green-tertiary) 60deg 120deg
   );
}

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

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

/* Navigation Theme - Brown hover as requested */
.nav-link {
   color: var(--text-secondary);
}

.nav-link:hover {
   color: var(--brown-primary);
}

.nav-link.active {
   color: var(--green-primary);
   font-weight: 600;
}

/* Content Theme */
.content {
   background-color: var(--bg-secondary);
}

.welcome-section {
   background: var(--bg-primary);
   box-shadow: 0 5px 20px var(--shadow-medium);
   border: 1px solid var(--border-light);
}

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

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

/* =====================================================
  UTILITY CLASSES FOR THEME CONSISTENCY
  ===================================================== */

/* Background Classes */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Text Color Classes */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

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

/* Background Accent Classes */
.bg-green { background-color: var(--green-primary); }
.bg-green-gradient { 
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%); 
}
.bg-brown { background-color: var(--brown-primary); }
.bg-brown-gradient { 
   background: linear-gradient(135deg, var(--brown-primary) 0%, var(--brown-secondary) 100%); 
}

/* Interactive Elements */
.btn-primary {
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   color: white;
   border: none;
}

.btn-primary:hover {
   background: linear-gradient(135deg, var(--green-secondary) 0%, var(--green-dark) 100%);
}

.btn-secondary {
   background: var(--bg-primary);
   color: var(--text-primary);
   border: 2px solid var(--green-primary);
}

.btn-secondary:hover {
   background: var(--green-primary);
   color: white;
}

/* Form Input Themes */
.form-input {
   background: var(--bg-primary);
   color: var(--text-primary);
   border: 2px solid var(--border-light);
}

.form-input:focus {
   border-color: var(--green-primary);
   box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Card Themes */
.card {
   background: var(--bg-primary);
   border: 1px solid var(--border-light);
   box-shadow: 0 2px 10px var(--shadow-light);
}

/* Footer Theme */
.footer {
   background: var(--bg-primary);
   color: var(--text-secondary);
}

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

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

.footer-links a:hover {
   color: var(--green-primary);
}

.footer-copyright {
   color: var(--text-muted);
}

.footer-meta a {
   color: var(--text-muted);
}

.footer-meta a:hover {
   color: var(--green-primary);
}