/* ============================================================================
   Drolosoft - Theme System
   Supports: Light, Dark, Auto (system preference)
   ============================================================================ */

/* ============================================================================
   Light Theme (Default)
   ============================================================================ */
:root,
[data-theme="light"] {
  /* Brand Identity */
  --brand-color: #64cb14;

  /* Page Background */
  --page-bg: #f5f5f5;
  --page-bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #f0f0f0 100%);

  /* Content Backgrounds */
  --content-bg: #ffffff;
  --content-bg-secondary: #f8fafc;
  --content-bg-accent: rgba(16, 185, 129, 0.05);

  /* Navigation */
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-bg-hover: rgba(255, 255, 255, 0.95);

  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-light: #9ca3af;

  /* Accent Colors */
  --accent-primary: #059669;
  --accent-primary-hover: #047857;
  --accent-secondary: #3b82f6;

  /* Borders */
  --border-color: #e5e7eb;
  --border-color-light: #f3f4f6;
  --border-accent: rgba(16, 185, 129, 0.3);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-accent: 0 10px 20px rgba(16, 185, 129, 0.15);

  /* Cards */
  --card-bg: #ffffff;
  --card-bg-hover: #fafafa;
  --card-border: #e5e7eb;
  --card-border-hover: rgba(16, 185, 129, 0.4);

  /* Footer */
  --footer-bg: #f8fafc;
  --footer-text: #374151;
  --footer-border: #e5e7eb;

  /* Buttons */
  --btn-primary-bg: #059669;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #047857;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #059669;
  --btn-secondary-border: #059669;

  /* Platform Badges */
  --badge-bg: rgba(59, 130, 246, 0.1);
  --badge-text: #2563eb;

  /* Mission Section */
  --mission-bg: rgba(248, 250, 252, 0.8);
  --mission-border: rgba(16, 185, 129, 0.15);

  /* Value Cards */
  --value-card-bg: #ffffff;
  --value-card-border: #e5e7eb;

  /* Project Cards */
  --project-card-bg: #ffffff;
  --project-card-border: #e5e7eb;
  --project-featured-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);

  /* CTA Section */
  --cta-bg: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.03) 100%);

  /* Theme Toggle */
  --toggle-bg: #e5e7eb;
  --toggle-icon: #374151;
}

/* ============================================================================
   Dark Theme
   ============================================================================ */
[data-theme="dark"] {
  /* Brand Identity */
  --brand-color: #64cb14;

  /* Page Background */
  --page-bg: #0a0a0a;
  --page-bg-gradient: linear-gradient(160deg, #0a0a0a 0%, #111827 50%, #0a0a0a 100%);

  /* Content Backgrounds */
  --content-bg: rgba(30, 41, 59, 0.7);
  --content-bg-secondary: rgba(20, 30, 48, 0.9);
  --content-bg-accent: rgba(16, 185, 129, 0.12);

  /* Navigation */
  --nav-bg: rgba(15, 23, 42, 0.7);
  --nav-bg-hover: rgba(15, 23, 42, 0.9);

  /* Text Colors */
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-muted: #94a3b8;
  --text-light: #64748b;

  /* Accent Colors */
  --accent-primary: #10b981;
  --accent-primary-hover: #059669;
  --accent-secondary: #3b82f6;

  /* Borders */
  --border-color: rgba(148, 163, 184, 0.1);
  --border-color-light: rgba(148, 163, 184, 0.05);
  --border-accent: rgba(16, 185, 129, 0.3);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 10px 40px rgba(16, 185, 129, 0.1);

  /* Cards */
  --card-bg: rgba(30, 41, 59, 0.5);
  --card-bg-hover: rgba(30, 41, 59, 0.7);
  --card-border: rgba(148, 163, 184, 0.1);
  --card-border-hover: rgba(16, 185, 129, 0.3);

  /* Footer */
  --footer-bg: rgba(15, 23, 42, 0.9);
  --footer-text: #94a3b8;
  --footer-border: rgba(16, 185, 129, 0.1);

  /* Buttons */
  --btn-primary-bg: #10b981;
  --btn-primary-text: #0f172a;
  --btn-primary-hover: #059669;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #10b981;
  --btn-secondary-border: #10b981;

  /* Platform Badges */
  --badge-bg: rgba(59, 130, 246, 0.2);
  --badge-text: #3b82f6;

  /* Mission Section */
  --mission-bg: rgba(30, 41, 59, 0.5);
  --mission-border: rgba(16, 185, 129, 0.2);

  /* Value Cards */
  --value-card-bg: rgba(20, 30, 48, 0.8);
  --value-card-border: rgba(16, 185, 129, 0.25);

  /* Project Cards */
  --project-card-bg: rgba(30, 41, 59, 0.7);
  --project-card-border: rgba(148, 163, 184, 0.15);
  --project-featured-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);

  /* CTA Section */
  --cta-bg: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);

  /* Theme Toggle */
  --toggle-bg: rgba(30, 41, 59, 0.8);
  --toggle-icon: #f9fafb;
}

/* ============================================================================
   Auto Theme (System Preference)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    /* Brand Identity */
    --brand-color: #64cb14;

    /* Page Background */
    --page-bg: #0a0a0a;
    --page-bg-gradient: linear-gradient(160deg, #0a0a0a 0%, #111827 50%, #0a0a0a 100%);

    /* Content Backgrounds */
    --content-bg: rgba(30, 41, 59, 0.7);
    --content-bg-secondary: rgba(20, 30, 48, 0.9);
    --content-bg-accent: rgba(16, 185, 129, 0.12);

    /* Navigation */
    --nav-bg: rgba(15, 23, 42, 0.7);
    --nav-bg-hover: rgba(15, 23, 42, 0.9);

    /* Text Colors */
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    /* Accent Colors */
    --accent-primary: #10b981;
    --accent-primary-hover: #059669;
    --accent-secondary: #3b82f6;

    /* Borders */
    --border-color: rgba(148, 163, 184, 0.15);
    --border-color-light: rgba(148, 163, 184, 0.08);
    --border-accent: rgba(16, 185, 129, 0.3);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 10px 40px rgba(16, 185, 129, 0.1);

    /* Cards */
    --card-bg: rgba(30, 41, 59, 0.7);
    --card-bg-hover: rgba(30, 41, 59, 0.85);
    --card-border: rgba(148, 163, 184, 0.15);
    --card-border-hover: rgba(16, 185, 129, 0.3);

    /* Footer */
    --footer-bg: rgba(15, 23, 42, 0.9);
    --footer-text: #94a3b8;
    --footer-border: rgba(16, 185, 129, 0.15);

    /* Buttons */
    --btn-primary-bg: #10b981;
    --btn-primary-text: #0f172a;
    --btn-primary-hover: #059669;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #10b981;
    --btn-secondary-border: #10b981;

    /* Platform Badges */
    --badge-bg: rgba(59, 130, 246, 0.2);
    --badge-text: #3b82f6;

    /* Mission Section */
    --mission-bg: rgba(30, 41, 59, 0.5);
    --mission-border: rgba(16, 185, 129, 0.2);

    /* Value Cards */
    --value-card-bg: rgba(20, 30, 48, 0.8);
    --value-card-border: rgba(16, 185, 129, 0.25);

    /* Project Cards */
    --project-card-bg: rgba(30, 41, 59, 0.7);
    --project-card-border: rgba(148, 163, 184, 0.1);
    --project-featured-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);

    /* CTA Section */
    --cta-bg: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);

    /* Theme Toggle */
    --toggle-bg: rgba(30, 41, 59, 0.8);
    --toggle-icon: #f9fafb;
  }
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --brand-color: #64cb14;
    /* Same as light theme */
    --page-bg: #f5f5f5;
    --page-bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 50%, #f0f0f0 100%);
    --content-bg: #ffffff;
    --content-bg-secondary: #f8fafc;
    --content-bg-accent: rgba(16, 185, 129, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --nav-bg-hover: rgba(255, 255, 255, 0.95);
    --text-primary: #1a1a1a;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --accent-primary: #059669;
    --accent-primary-hover: #047857;
    --accent-secondary: #3b82f6;
    --border-color: #e5e7eb;
    --border-color-light: #f3f4f6;
    --border-accent: rgba(16, 185, 129, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-accent: 0 10px 20px rgba(16, 185, 129, 0.15);
    --card-bg: #ffffff;
    --card-bg-hover: #fafafa;
    --card-border: #e5e7eb;
    --card-border-hover: rgba(16, 185, 129, 0.4);
    --footer-bg: #f8fafc;
    --footer-text: #374151;
    --footer-border: #e5e7eb;
    --btn-primary-bg: #059669;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #047857;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #059669;
    --btn-secondary-border: #059669;
    --badge-bg: rgba(59, 130, 246, 0.1);
    --badge-text: #2563eb;
    --mission-bg: rgba(248, 250, 252, 0.8);
    --mission-border: rgba(16, 185, 129, 0.15);
    --value-card-bg: #ffffff;
    --value-card-border: #e5e7eb;
    --project-card-bg: #ffffff;
    --project-card-border: #e5e7eb;
    --project-featured-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --cta-bg: linear-gradient(180deg, transparent 0%, rgba(16, 185, 129, 0.03) 100%);
    --toggle-bg: #e5e7eb;
    --toggle-icon: #374151;
  }
}

/* ============================================================================
   Fixed Button Stack (bottom-right): BMC → Back-to-top → Theme toggle
   ============================================================================ */

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 76px;
  right: var(--spacing-md);
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-accent);
  background: var(--toggle-bg);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  color: var(--toggle-icon);
  font-size: 1.25rem;
}

.back-to-top:hover {
  transform: scale(1.1);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-accent);
}

.back-to-top:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-accent);
  background: var(--toggle-bg);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}

.theme-toggle:hover {
  transform: scale(1.1);
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-accent);
}

.theme-toggle:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--toggle-icon);
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Theme icons - show based on current theme */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-auto {
  display: none;
  position: absolute;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

[data-theme="auto"] .theme-toggle .icon-auto {
  display: block;
}

/* Smooth transitions for theme changes */
body,
body * {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Exclude elements that shouldn't transition (or have their own) */
.spinner,
.theme-toggle svg,
.nav-primary {
  transition: none;
}