/* ===================================
   THEME SYSTEM - Light/Dark Mode
   =================================== */

:root {
  /* Base font families */
  --font-heading: 'Signika', sans-serif;
  --font-body: 'Roboto', sans-serif;
  
  /* Spacing system (inherited from spacing-system.css) */
  --spacing-base: 8px;
  
  /* Theme transition duration */
  --theme-transition: 0.3s ease;
}

/* ===================================
   DARK THEME (DEFAULT)
   =================================== */

:root,
[data-theme="dark"] {
  /* Background colors */
  --bg-primary: #030714;
  --bg-secondary: rgba(6, 12, 30, 0.85);
  --bg-panel: rgba(6, 12, 30, 0.85);
  --bg-card: linear-gradient(145deg, rgba(18, 30, 66, 0.9), rgba(6, 12, 30, 0.85));
  --bg-navbar: rgba(0, 0, 0, 0.95);
  --bg-footer: #000000;
  
  /* Text colors */
  --text-primary: #f5f7ff;
  --text-secondary: rgba(231, 236, 255, 0.78);
  --text-muted: rgba(231, 236, 255, 0.6);
  
  /* Brand colors */
  --brand-primary: #c10000;
  --brand-secondary: #ae44ff;
  --brand-primary-hover: #e60000;
  --brand-secondary-hover: #c766ff;
  
  /* Accent colors (using brand colors) */
  --accent: var(--brand-primary);
  --accent-secondary: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  
  /* Border and divider colors */
  --border-soft: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.2);
  --border-strong: rgba(255, 255, 255, 0.3);
  
  /* Form colors */
  --form-bg: rgba(4, 10, 26, 0.65);
  --form-border: rgba(255, 255, 255, 0.18);
  --form-border-focus: var(--brand-primary);
  --form-focus-shadow: rgba(193, 0, 0, 0.25);
  
  /* Button colors */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-hover: var(--brand-primary-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-medium);
  --btn-secondary-hover: rgba(255, 255, 255, 0.1);
  
  /* Social icon colors */
  --social-bg: rgba(255, 255, 255, 0.1);
  --social-hover-bg: var(--brand-primary);
  --social-icon-color: #ffffff;
  
  /* Shadow colors */
  --shadow-light: rgba(8, 12, 30, 0.35);
  --shadow-medium: rgba(4, 10, 26, 0.45);
  --shadow-heavy: rgba(3, 6, 18, 0.4);
  --shadow-button: rgba(193, 0, 0, 0.3);
  
  /* Status colors */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.3);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.3);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --warning-border: rgba(245, 158, 11, 0.3);
  
  /* Color scheme preference */
  color-scheme: dark;
}

/* ===================================
   LIGHT THEME
   =================================== */

[data-theme="light"] {
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: rgba(248, 250, 252, 0.95);
  --bg-panel: rgba(248, 250, 252, 0.95);
  --bg-card: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.85));
  --bg-navbar: rgba(255, 255, 255, 0.95);
  --bg-footer: #f8fafc;
  
  /* Text colors */
  --text-primary: #1e293b;
  --text-secondary: rgba(30, 41, 59, 0.7);
  --text-muted: rgba(30, 41, 59, 0.5);
  
  /* Brand colors remain the same */
  --brand-primary: #c10000;
  --brand-secondary: #ae44ff;
  --brand-primary-hover: #a00000;
  --brand-secondary-hover: #9333ea;
  
  /* Accent colors (using purple accent for light theme) */
  --accent: var(--brand-secondary);
  --accent-secondary: var(--brand-secondary);
  --accent-hover: var(--brand-secondary-hover);
  
  /* Border and divider colors */
  --border-soft: rgba(30, 41, 59, 0.12);
  --border-medium: rgba(30, 41, 59, 0.2);
  --border-strong: rgba(30, 41, 59, 0.3);
  
  /* Form colors */
  --form-bg: rgba(255, 255, 255, 0.8);
  --form-border: rgba(30, 41, 59, 0.2);
  --form-border-focus: var(--brand-secondary);
  --form-focus-shadow: rgba(174, 68, 255, 0.25);
  
  /* Button colors */
  --btn-primary-bg: var(--brand-secondary);
  --btn-primary-hover: var(--brand-secondary-hover);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-medium);
  --btn-secondary-hover: rgba(30, 41, 59, 0.05);
  
  /* Social icon colors */
  --social-bg: rgba(30, 41, 59, 0.1);
  --social-hover-bg: var(--brand-secondary);
  --social-icon-color: var(--text-primary);
  
  /* Shadow colors */
  --shadow-light: rgba(30, 41, 59, 0.08);
  --shadow-medium: rgba(30, 41, 59, 0.12);
  --shadow-heavy: rgba(30, 41, 59, 0.16);
  --shadow-button: rgba(174, 68, 255, 0.3);
  
  /* Status colors (adjusted for light theme) */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.1);
  --success-border: rgba(22, 163, 74, 0.3);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.1);
  --error-border: rgba(220, 38, 38, 0.3);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.1);
  --warning-border: rgba(217, 119, 6, 0.3);
  
  /* Color scheme preference */
  color-scheme: light;
}

/* ===================================
   THEME TRANSITIONS
   =================================== */

/* Apply smooth transitions to all theme-aware elements */
*,
*::before,
*::after {
  transition: 
    background-color var(--theme-transition),
    border-color var(--theme-transition),
    color var(--theme-transition),
    box-shadow var(--theme-transition);
}

/* Disable transitions during theme switching to prevent flash */
.theme-switching * {
  transition: none !important;
}

/* ===================================
   BASE ELEMENT STYLING
   =================================== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

/* ===================================
   COMPONENT THEME STYLING
   =================================== */

/* Navigation */
.navbar {
  background: var(--bg-navbar);
  backdrop-filter: blur(10px);
}

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

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--accent);
}

.navbar .nav-link.active::after {
  background: var(--accent);
}

.navbar-cta .join-btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.navbar-cta .join-btn:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 8px 24px var(--shadow-button);
}

/* Cards and panels */
.metric-card,
.event-card,
.update-card,
.contact-form {
  background: var(--bg-panel);
  border-color: var(--border-soft);
  box-shadow: 0 16px 28px var(--shadow-light);
}

.event-card {
  background: var(--bg-card);
  box-shadow: 0 20px 36px var(--shadow-medium);
}

.update-card {
  box-shadow: 0 18px 32px var(--shadow-heavy);
}

.contact-form {
  box-shadow: 0 22px 38px var(--shadow-medium);
}

/* Text colors */
.metric-card h3,
.update-card time {
  color: var(--accent);
}

.metric-card p,
.event-card p,
.update-card p,
.event-card ul {
  color: var(--text-secondary);
}

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

/* Links */
.primary-link {
  color: var(--accent);
}

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

.secondary-link {
  color: var(--accent-secondary);
}

.secondary-link:hover {
  color: var(--accent-hover);
}

.contact-details a {
  color: var(--accent);
}

.contact-details a:hover {
  color: var(--accent-hover);
}

/* Forms */
.form-group input,
.form-group textarea {
  background: var(--form-bg);
  border-color: var(--form-border);
  color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 3px var(--form-focus-shadow);
}

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

/* Buttons */
.join-btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.join-btn:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 18px 32px var(--shadow-button);
}

/* Social icons */
.socialicons li a {
  background: var(--social-bg);
}

.socialicons li a::before {
  background: linear-gradient(135deg, var(--social-hover-bg), var(--accent-hover));
}

.socialicons li a:hover {
  box-shadow: 0 8px 24px var(--shadow-button);
}

.footer .row i {
  color: var(--social-icon-color);
}

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

/* Status messages */
.form-feedback.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.form-feedback.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error);
}



/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root,
  [data-theme="dark"] {
    --border-soft: rgba(255, 255, 255, 0.3);
    --border-medium: rgba(255, 255, 255, 0.5);
    --text-secondary: rgba(231, 236, 255, 0.9);
  }
  
  [data-theme="light"] {
    --border-soft: rgba(30, 41, 59, 0.3);
    --border-medium: rgba(30, 41, 59, 0.5);
    --text-secondary: rgba(30, 41, 59, 0.9);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  

}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-panel: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent: #000000;
    --border-soft: #cccccc;
  }
  

}