/* Theme System - Enhanced with unique fonts and better colors */
/* This file only contains theme variable definitions - no layout changes */

/* Import focused cinema-style fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@400;600;700&display=swap');

/* Dark Theme (Default) - Enhanced Cyberpunk */
:root[data-theme="dark"], :root {
  --background-primary: #0a0a0a;
  --background-secondary: #141414;
  --surface-color: #1a1a1a;
  --surface-hover: #242424;
  --accent-primary: #e50914;
  --accent-secondary: #ff4d4d;
  --accent-tertiary: #ff7a7a;
  --accent-purple: #b31217;
  --accent-orange: #ff7a00;
  --text-primary: #FFFFFF;
  --text-secondary: #E0E0E0;
  --text-muted: #666666;
  --border-color: #333333;
  --border-light: #444444;
  --success-color: #00FF88;
  --error-color: #e50914;
  --warning-color: #FFB800;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 18px rgba(229, 9, 20, 0.35);
  /* Theme fonts */
  --font-family-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-family-body: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  --gradient-shift: linear-gradient(120deg, #b31217, #e50914, #ff4d4d);
  --gradient-shift-size: 400% 400%;
}

  /* Light Theme - Clean Tech */
  :root[data-theme="light"] {
    --background-primary: #FFFFFF;
    --background-secondary: #F8F9FA;
    --surface-color: #FFFFFF;
    --surface-hover: #F0F2F5;
    --accent-primary: #e50914;
    --accent-secondary: #ff4d4d;
    --accent-tertiary: #ff7a7a;
    --accent-purple: #b31217;
    --accent-orange: #ff7a00;
    --text-primary: #212121;
    --text-secondary: #424242;
    --text-muted: #757575;
    --border-color: #E0E0E0;
    --border-light: #D0D0D0;
    --success-color: #4CAF50;
    --error-color: #F44336;
    --warning-color: #FF9800;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 14px rgba(229, 9, 20, 0.25);
    /* Theme fonts */
    --font-family-display: 'Bebas Neue', 'Arial Black', sans-serif;
    --font-family-body: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
    --gradient-shift: linear-gradient(120deg, #b31217, #e50914, #ff4d4d);
    --gradient-shift-size: 400% 400%;
  }

  /* Cyberpunk Dark */
:root[data-theme="cyberpunk-dark"] {
  --background-primary: #0a0a0a;
  --background-secondary: #0f0f0f;
  --surface-color: #1a1a1a;
  --surface-hover: #252525;
  --accent-primary: #e50914;
  --accent-secondary: #ff4d4d;
  --accent-tertiary: #ff7a7a;
  --accent-purple: #b31217;
  --accent-orange: #ff7a00;
  --text-primary: #FFFFFF;
  --text-secondary: #E0E0E0;
  --text-muted: #808080;
  --border-color: #2a2a2a;
  --border-light: #3a3a3a;
  --success-color: #00FF88;
  --error-color: #e50914;
  --warning-color: #FFB800;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 1);
  --shadow-glow: 0 0 18px rgba(229, 9, 20, 0.35);
  --font-family-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-family-body: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  --gradient-shift: linear-gradient(120deg, #b31217, #e50914, #ff4d4d);
  --gradient-shift-size: 400% 400%;
}

  /* Cyberpunk Light */
:root[data-theme="cyberpunk-light"] {
  --background-primary: #f5f5f5;
  --background-secondary: #ffffff;
  --surface-color: #ffffff;
  --surface-hover: #f0f0f0;
  --accent-primary: #e50914;
  --accent-secondary: #ff4d4d;
  --accent-tertiary: #ff7a7a;
  --accent-purple: #b31217;
  --accent-orange: #ff7a00;
  --text-primary: #1a1a1a;
  --text-secondary: #424242;
  --text-muted: #757575;
  --border-color: #e0e0e0;
  --border-light: #f0f0f0;
  --success-color: #00C853;
  --error-color: #e50914;
  --warning-color: #FFA000;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 14px rgba(229, 9, 20, 0.25);
  --font-family-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-family-body: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  --gradient-shift: linear-gradient(120deg, #b31217, #e50914, #ff4d4d);
  --gradient-shift-size: 400% 400%;
}

  /* Nature Dark */
  :root[data-theme="nature-dark"] {
    --background-primary: #0a1f0a;
    --background-secondary: #0f2d0f;
    --surface-color: #1a3a1a;
    --surface-hover: #254525;
    --accent-primary: #2e7d32;
    --accent-secondary: #43a047;
    --accent-tertiary: #66bb6a;
    --accent-purple: #8e24aa;
    --accent-orange: #ff6f00;
    --text-primary: #ffffff;
    --text-secondary: #a5d6a7;
    --text-muted: #81c784;
    --border-color: #1b5e20;
    --border-light: #2e7d32;
    --success-color: #43a047;
    --error-color: #e53935;
    --warning-color: #ff8f00;
    --shadow-sm: 0 2px 4px rgba(10, 31, 10, 0.8);
    --shadow-md: 0 4px 8px rgba(10, 31, 10, 0.9);
    --shadow-lg: 0 8px 16px rgba(10, 31, 10, 1);
    --shadow-glow: 0 0 25px rgba(46, 125, 50, 0.4);
    --font-family-display: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
    --font-family-body: 'Quicksand', 'Arial', sans-serif;
    --gradient-shift: linear-gradient(120deg, #2e7d32, #43a047, #66bb6a, #388e3c);
    --gradient-shift-size: 350% 350%;
  }

  /* Nature Light */
  :root[data-theme="nature-light"] {
    --background-primary: #f1f8e9;
    --background-secondary: #f9fbe7;
    --surface-color: #ffffff;
    --surface-hover: #e8f5e9;
    --accent-primary: #2e7d32;
    --accent-secondary: #388e3c;
    --accent-tertiary: #43a047;
    --accent-purple: #5e35b1;
    --accent-orange: #e65100;
    --text-primary: #1b5e20;
    --text-secondary: #2e7d32;
    --text-muted: #558b2f;
    --border-color: #81c784;
    --border-light: #a5d6a7;
    --success-color: #388e3c;
    --error-color: #d32f2f;
    --warning-color: #f57c00;
    --shadow-sm: 0 2px 4px rgba(46, 125, 50, 0.1);
    --shadow-md: 0 4px 8px rgba(46, 125, 50, 0.15);
    --shadow-lg: 0 8px 16px rgba(46, 125, 50, 0.2);
    --shadow-glow: 0 0 20px rgba(46, 125, 50, 0.15);
    --font-family-display: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
    --font-family-body: 'Quicksand', 'Arial', sans-serif;
    --gradient-shift: linear-gradient(120deg, #2e7d32, #388e3c, #43a047, #4caf50);
    --gradient-shift-size: 350% 350%;
  }

  /* Ocean Dark */
  :root[data-theme="ocean-dark"] {
    --background-primary: #001220;
    --background-secondary: #001a30;
    --surface-color: #002440;
    --surface-hover: #003050;
    --accent-primary: #00acc1;
    --accent-secondary: #26c6da;
    --accent-tertiary: #4dd0e1;
    --accent-purple: #7e57c2;
    --accent-orange: #ffa726;
    --text-primary: #ffffff;
    --text-secondary: #b3e5fc;
    --text-muted: #4fc3f7;
    --border-color: #01579b;
    --border-light: #0277bd;
    --success-color: #26a69a;
    --error-color: #ef5350;
    --warning-color: #ffa726;
    --shadow-sm: 0 2px 4px rgba(0, 18, 32, 0.8);
    --shadow-md: 0 4px 8px rgba(0, 18, 32, 0.9);
    --shadow-lg: 0 8px 16px rgba(0, 18, 32, 1);
    --shadow-glow: 0 0 30px rgba(0, 172, 193, 0.4);
    --font-family-display: 'Pacifico', 'Comic Sans MS', cursive;
    --font-family-body: 'Open Sans', 'Helvetica', sans-serif;
    --gradient-shift: linear-gradient(135deg, #00acc1, #26c6da, #4dd0e1, #0288d1);
    --gradient-shift-size: 300% 300%;
  }

  /* Ocean Light */
  :root[data-theme="ocean-light"] {
    --background-primary: #e1f5fe;
    --background-secondary: #f3fbff;
    --surface-color: #ffffff;
    --surface-hover: #e3f2fd;
    --accent-primary: #0288d1;
    --accent-secondary: #039be5;
    --accent-tertiary: #03a9f4;
    --accent-purple: #5e35b1;
    --accent-orange: #ef6c00;
    --text-primary: #01579b;
    --text-secondary: #0277bd;
    --text-muted: #4fc3f7;
    --border-color: #81d4fa;
    --border-light: #b3e5fc;
    --success-color: #00897b;
    --error-color: #e53935;
    --warning-color: #f57c00;
    --shadow-sm: 0 2px 4px rgba(2, 136, 209, 0.1);
    --shadow-md: 0 4px 8px rgba(2, 136, 209, 0.15);
    --shadow-lg: 0 8px 16px rgba(2, 136, 209, 0.2);
    --shadow-glow: 0 0 20px rgba(2, 136, 209, 0.15);
    --font-family-display: 'Pacifico', 'Comic Sans MS', cursive;
    --font-family-body: 'Open Sans', 'Helvetica', sans-serif;
    --gradient-shift: linear-gradient(135deg, #0288d1, #039be5, #03a9f4, #0277bd);
    --gradient-shift-size: 300% 300%;
  }

  /* Western Dark */
  :root[data-theme="western-dark"] {
    --background-primary: #1a0f0f;
    --background-secondary: #2a1a1a;
    --surface-color: #3a2525;
    --surface-hover: #4a3030;
    --accent-primary: #d4af37;
    --accent-secondary: #b8860b;
    --accent-tertiary: #daa520;
    --accent-purple: #8b4513;
    --accent-orange: #cd853f;
    --text-primary: #ffffff;
    --text-secondary: #f5deb3;
    --text-muted: #deb887;
    --border-color: #654321;
    --border-light: #8b7355;
    --success-color: #228b22;
    --error-color: #dc143c;
    --warning-color: #ffd700;
    --shadow-sm: 0 2px 4px rgba(26, 15, 15, 0.8);
    --shadow-md: 0 4px 8px rgba(26, 15, 15, 0.9);
    --shadow-lg: 0 8px 16px rgba(26, 15, 15, 1);
    --shadow-glow: 0 0 25px rgba(212, 175, 55, 0.4);
    --font-family-display: 'Special Elite', 'Courier New', monospace;
    --font-family-body: 'IM Fell English', 'Times New Roman', serif;
    --gradient-shift: linear-gradient(45deg, #d4af37, #b8860b, #daa520, #8b4513);
    --gradient-shift-size: 350% 350%;
  }

  /* Western Light */
  :root[data-theme="western-light"] {
    --background-primary: #fdf5e6;
    --background-secondary: #faf0e6;
    --surface-color: #ffffff;
    --surface-hover: #f5f5dc;
    --accent-primary: #b8860b;
    --accent-secondary: #daa520;
    --accent-tertiary: #d4af37;
    --accent-purple: #8b4513;
    --accent-orange: #cd853f;
    --text-primary: #654321;
    --text-secondary: #8b4513;
    --text-muted: #a0522d;
    --border-color: #deb887;
    --border-light: #f5deb3;
    --success-color: #228b22;
    --error-color: #dc143c;
    --warning-color: #ffd700;
    --shadow-sm: 0 2px 4px rgba(184, 134, 11, 0.1);
    --shadow-md: 0 4px 8px rgba(184, 134, 11, 0.15);
    --shadow-lg: 0 8px 16px rgba(184, 134, 11, 0.2);
    --shadow-glow: 0 0 20px rgba(184, 134, 11, 0.15);
    --font-family-display: 'Special Elite', 'Courier New', monospace;
    --font-family-body: 'IM Fell English', 'Times New Roman', serif;
    --gradient-shift: linear-gradient(45deg, #b8860b, #daa520, #d4af37, #8b4513);
    --gradient-shift-size: 350% 350%;
  }

  /* Vintage Dark */
  :root[data-theme="vintage-dark"] {
    --background-primary: #1a1a1a;
    --background-secondary: #2d2d2d;
    --surface-color: #404040;
    --surface-hover: #525252;
    --accent-primary: #e6c88c;
    --accent-secondary: #d4a574;
    --accent-tertiary: #c19a6b;
    --accent-purple: #9b59b6;
    --accent-orange: #e67e22;
    --text-primary: #ffffff;
    --text-secondary: #f0f0f0;
    --text-muted: #cccccc;
    --border-color: #666666;
    --border-light: #808080;
    --success-color: #27ae60;
    --error-color: #e74c3c;
    --warning-color: #f39c12;
    --shadow-sm: 0 2px 4px rgba(26, 26, 26, 0.8);
    --shadow-md: 0 4px 8px rgba(26, 26, 26, 0.9);
    --shadow-lg: 0 8px 16px rgba(26, 26, 26, 1);
    --shadow-glow: 0 0 25px rgba(230, 200, 140, 0.4);
    --font-family-display: 'Playfair Display', 'Georgia', serif;
    --font-family-body: 'Dancing Script', 'Brush Script MT', cursive;
    --gradient-shift: linear-gradient(135deg, #e6c88c, #d4a574, #c19a6b, #9b59b6);
    --gradient-shift-size: 300% 300%;
  }

  /* Vintage Light */
  :root[data-theme="vintage-light"] {
    --background-primary: #f8f6f0;
    --background-secondary: #f5f2e9;
    --surface-color: #ffffff;
    --surface-hover: #f0ede4;
    --accent-primary: #8b7355;
    --accent-secondary: #a0522d;
    --accent-tertiary: #cd853f;
    --accent-purple: #6a5acd;
    --accent-orange: #ff8c00;
    --text-primary: #2f2f2f;
    --text-secondary: #4a4a4a;
    --text-muted: #666666;
    --border-color: #d2b48c;
    --border-light: #e6d3b3;
    --success-color: #228b22;
    --error-color: #dc143c;
    --warning-color: #ffd700;
    --shadow-sm: 0 2px 4px rgba(139, 115, 85, 0.1);
    --shadow-md: 0 4px 8px rgba(139, 115, 85, 0.15);
    --shadow-lg: 0 8px 16px rgba(139, 115, 85, 0.2);
    --shadow-glow: 0 0 20px rgba(139, 115, 85, 0.15);
    --font-family-display: 'Playfair Display', 'Georgia', serif;
    --font-family-body: 'Dancing Script', 'Brush Script MT', cursive;
    --gradient-shift: linear-gradient(135deg, #8b7355, #a0522d, #cd853f, #6a5acd);
    --gradient-shift-size: 300% 300%;
  }

  /* Noir Dark */
  :root[data-theme="noir-dark"] {
    --background-primary: #000000;
    --background-secondary: #0a0a0a;
    --surface-color: #1a1a1a;
    --surface-hover: #2a2a2a;
    --accent-primary: #ffffff;
    --accent-secondary: #cccccc;
    --accent-tertiary: #999999;
    --accent-purple: #4a4a4a;
    --accent-orange: #666666;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #808080;
    --border-color: #333333;
    --border-light: #4a4a4a;
    --success-color: #00ff00;
    --error-color: #ff0000;
    --warning-color: #ffff00;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.9);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 1);
    --shadow-glow: 0 0 30px rgba(255, 255, 255, 0.3);
    --font-family-display: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    --font-family-body: 'Courier New', 'Monaco', monospace;
    --gradient-shift: linear-gradient(90deg, #ffffff, #cccccc, #999999, #666666);
    --gradient-shift-size: 200% 200%;
  }

  /* Noir Light */
  :root[data-theme="noir-light"] {
    --background-primary: #f5f5f5;
    --background-secondary: #e8e8e8;
    --surface-color: #ffffff;
    --surface-hover: #f0f0f0;
    --accent-primary: #000000;
    --accent-secondary: #333333;
    --accent-tertiary: #666666;
    --accent-purple: #4a4a4a;
    --accent-orange: #8b4513;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-color: #cccccc;
    --border-light: #e0e0e0;
    --success-color: #008000;
    --error-color: #ff0000;
    --warning-color: #ffa500;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.1);
    --font-family-display: 'UnifrakturMaguntia', 'Old English Text MT', serif;
    --font-family-body: 'Courier New', 'Monaco', monospace;
    --gradient-shift: linear-gradient(90deg, #000000, #333333, #666666, #999999);
    --gradient-shift-size: 200% 200%;
  }

  /* SciFi Dark */
  :root[data-theme="scifi-dark"] {
    --background-primary: #0a0a1a;
    --background-secondary: #1a1a2e;
    --surface-color: #2a2a3e;
    --surface-hover: #3a3a4e;
    --accent-primary: #00ffff;
    --accent-secondary: #ff00ff;
    --accent-tertiary: #ffff00;
    --accent-purple: #8000ff;
    --accent-orange: #ff8000;
    --text-primary: #ffffff;
    --text-secondary: #e0e0ff;
    --text-muted: #8080a0;
    --border-color: #404060;
    --border-light: #606080;
    --success-color: #00ff00;
    --error-color: #ff0000;
    --warning-color: #ffff00;
    --shadow-sm: 0 2px 4px rgba(10, 10, 26, 0.8);
    --shadow-md: 0 4px 8px rgba(10, 10, 26, 0.9);
    --shadow-lg: 0 8px 16px rgba(10, 10, 26, 1);
    --shadow-glow: 0 0 30px rgba(0, 255, 255, 0.5);
    --font-family-display: 'VT323', 'Courier New', monospace;
    --font-family-body: 'Share Tech Mono', 'Courier New', monospace;
    --gradient-shift: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #8000ff);
    --gradient-shift-size: 400% 400%;
  }

  /* SciFi Light */
  :root[data-theme="scifi-light"] {
    --background-primary: #f0f0ff;
    --background-secondary: #f8f8ff;
    --surface-color: #ffffff;
    --surface-hover: #f0f0ff;
    --accent-primary: #0066cc;
    --accent-secondary: #cc0066;
    --accent-tertiary: #cc6600;
    --accent-purple: #6600cc;
    --accent-orange: #ff6600;
    --text-primary: #000066;
    --text-secondary: #333366;
    --text-muted: #666699;
    --border-color: #ccccff;
    --border-light: #e0e0ff;
    --success-color: #006600;
    --error-color: #cc0000;
    --warning-color: #cc6600;
    --shadow-sm: 0 2px 4px rgba(229, 9, 20, 0.12);
    --shadow-md: 0 4px 8px rgba(229, 9, 20, 0.18);
    --shadow-lg: 0 8px 16px rgba(229, 9, 20, 0.22);
    --shadow-glow: 0 0 14px rgba(229, 9, 20, 0.2);
    --font-family-display: 'VT323', 'Courier New', monospace;
    --font-family-body: 'Share Tech Mono', 'Courier New', monospace;
    --gradient-shift: linear-gradient(45deg, #0066cc, #cc0066, #cc6600, #6600cc);
    --gradient-shift-size: 400% 400%;
  }

/* Apply fonts to body */
body {
  font-family: var(--font-family-body) !important;
}

/* Apply display fonts to headings */
h1, h2, h3, h4, h5, h6,
.club-name,
.section-title,
.display-text {
  font-family: var(--font-family-display) !important;
}

/* Theme-specific gradient animations for headings - disabled for readability */
h1, h2, h3, h4, h5, h6 {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Preserve all existing light theme overrides */
:root[data-theme="light"] body::before,
:root[data-theme="cyberpunk-light"] body::before,
:root[data-theme="nature-light"] body::before,
:root[data-theme="ocean-light"] body::before {
  background: radial-gradient(circle at 20% 50%, rgba(229, 9, 20, 0.04) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 77, 77, 0.04) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(179, 18, 23, 0.04) 0%, transparent 50%);
}

/* All existing light theme styles remain the same */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="cyberpunk-light"] h1,
:root[data-theme="cyberpunk-light"] h2,
:root[data-theme="cyberpunk-light"] h3,
:root[data-theme="cyberpunk-light"] h4,
:root[data-theme="cyberpunk-light"] h5,
:root[data-theme="cyberpunk-light"] h6,
:root[data-theme="nature-light"] h1,
:root[data-theme="nature-light"] h2,
:root[data-theme="nature-light"] h3,
:root[data-theme="nature-light"] h4,
:root[data-theme="nature-light"] h5,
:root[data-theme="nature-light"] h6,
:root[data-theme="ocean-light"] h1,
:root[data-theme="ocean-light"] h2,
:root[data-theme="ocean-light"] h3,
:root[data-theme="ocean-light"] h4,
:root[data-theme="ocean-light"] h5,
:root[data-theme="ocean-light"] h6 {
  background: var(--gradient-shift);
  background-size: var(--gradient-shift-size);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* All other existing styles remain unchanged */
:root[data-theme="light"] a,
:root[data-theme="cyberpunk-light"] a,
:root[data-theme="nature-light"] a,
:root[data-theme="ocean-light"] a {
  color: var(--accent-primary);
}

  :root[data-theme="light"] a:hover,
  :root[data-theme="cyberpunk-light"] a:hover,
  :root[data-theme="nature-light"] a:hover,
  :root[data-theme="ocean-light"] a:hover {
    color: var(--accent-secondary);
    text-shadow: none;
  }

/* All button styles remain the same */
:root[data-theme="light"] .btn-primary,
:root[data-theme="cyberpunk-light"] .btn-primary,
:root[data-theme="nature-light"] .btn-primary,
:root[data-theme="ocean-light"] .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
}

  :root[data-theme="light"] .btn-primary:hover,
  :root[data-theme="cyberpunk-light"] .btn-primary:hover,
  :root[data-theme="nature-light"] .btn-primary:hover,
  :root[data-theme="ocean-light"] .btn-primary:hover {
    box-shadow: 0 5px 15px rgba(229, 9, 20, 0.28);
  }

:root[data-theme="light"] .btn-secondary,
:root[data-theme="cyberpunk-light"] .btn-secondary,
:root[data-theme="nature-light"] .btn-secondary,
:root[data-theme="ocean-light"] .btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

  :root[data-theme="light"] .btn-secondary:hover,
  :root[data-theme="cyberpunk-light"] .btn-secondary:hover,
  :root[data-theme="nature-light"] .btn-secondary:hover,
  :root[data-theme="ocean-light"] .btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: inset 0 0 10px rgba(229, 9, 20, 0.12);
  }

/* Form controls remain the same */
:root[data-theme="light"] .form-control,
:root[data-theme="cyberpunk-light"] .form-control,
:root[data-theme="nature-light"] .form-control,
:root[data-theme="ocean-light"] .form-control {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

  :root[data-theme="light"] .form-control:focus,
  :root[data-theme="cyberpunk-light"] .form-control:focus,
  :root[data-theme="nature-light"] .form-control:focus,
  :root[data-theme="ocean-light"] .form-control:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
  }

/* All existing sidebar and navigation styles remain unchanged */
:root[data-theme="light"] .sidebar,
:root[data-theme="cyberpunk-light"] .sidebar,
:root[data-theme="classic-light"] .sidebar,
:root[data-theme="nature-light"] .sidebar,
:root[data-theme="ocean-light"] .sidebar {
  background-color: #F8F9FA !important;
  background-image: none !important;
  background: #F8F9FA !important;
  box-shadow: inset -1px 0 0 rgba(229, 9, 20, 0.12);
}

:root[data-theme="light"] .top-row,
:root[data-theme="cyberpunk-light"] .top-row,
:root[data-theme="classic-light"] .top-row,
:root[data-theme="nature-light"] .top-row,
:root[data-theme="ocean-light"] .top-row {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--border-color);
}

:root[data-theme="light"] .club-tagline,
:root[data-theme="cyberpunk-light"] .club-tagline,
:root[data-theme="classic-light"] .club-tagline,
:root[data-theme="nature-light"] .club-tagline,
:root[data-theme="ocean-light"] .club-tagline {
  color: #424242;
}

:root[data-theme="light"] .theme-toggle-nav-item:hover,
:root[data-theme="cyberpunk-light"] .theme-toggle-nav-item:hover,
:root[data-theme="classic-light"] .theme-toggle-nav-item:hover,
:root[data-theme="nature-light"] .theme-toggle-nav-item:hover,
:root[data-theme="ocean-light"] .theme-toggle-nav-item:hover {
  background-color: #F1F3F4 !important;
  color: var(--text-primary);
}

:root[data-theme="light"] .sidebar .nav-link.active,
:root[data-theme="cyberpunk-light"] .sidebar .nav-link.active,
:root[data-theme="classic-light"] .sidebar .nav-link.active,
:root[data-theme="nature-light"] .sidebar .nav-link.active,
:root[data-theme="ocean-light"] .sidebar .nav-link.active {
  background-color: #E9ECEF !important;
  color: var(--accent-primary);
}

  :root[data-theme="light"] .sidebar .nav-link.active::after,
  :root[data-theme="cyberpunk-light"] .sidebar .nav-link.active::after,
  :root[data-theme="classic-light"] .sidebar .nav-link.active::after,
  :root[data-theme="nature-light"] .sidebar .nav-link.active::after,
  :root[data-theme="ocean-light"] .sidebar .nav-link.active::after {
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
  }

:root[data-theme="light"] .sidebar .nav-link:hover,
:root[data-theme="cyberpunk-light"] .sidebar .nav-link:hover,
:root[data-theme="classic-light"] .sidebar .nav-link:hover,
:root[data-theme="nature-light"] .sidebar .nav-link:hover,
:root[data-theme="ocean-light"] .sidebar .nav-link:hover {
  background-color: #F1F3F4 !important;
  color: var(--text-primary);
}

:root[data-theme="light"] .sidebar .nav-link,
:root[data-theme="cyberpunk-light"] .sidebar .nav-link,
:root[data-theme="classic-light"] .sidebar .nav-link,
:root[data-theme="nature-light"] .sidebar .nav-link,
:root[data-theme="ocean-light"] .sidebar .nav-link {
  color: #424242;
}

/* Timeline styles remain the same */
:root[data-theme="light"] .timeline::before,
:root[data-theme="cyberpunk-light"] .timeline::before,
:root[data-theme="nature-light"] .timeline::before,
:root[data-theme="ocean-light"] .timeline::before {
  background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary), var(--accent-purple));
}

:root[data-theme="light"] .timeline-item::before,
:root[data-theme="cyberpunk-light"] .timeline-item::before,
:root[data-theme="nature-light"] .timeline-item::before,
:root[data-theme="ocean-light"] .timeline-item::before {
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary);
}

/* Icon styles remain the same */
:root[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="cyberpunk-light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="cyberpunk-light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="cyberpunk-light"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="nature-light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="nature-light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="nature-light"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="ocean-light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="ocean-light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="ocean-light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* Scrollbar styles remain the same */
:root[data-theme="light"] ::-webkit-scrollbar-track,
:root[data-theme="cyberpunk-light"] ::-webkit-scrollbar-track,
:root[data-theme="nature-light"] ::-webkit-scrollbar-track,
:root[data-theme="ocean-light"] ::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

:root[data-theme="light"] ::-webkit-scrollbar-thumb,
:root[data-theme="cyberpunk-light"] ::-webkit-scrollbar-thumb,
:root[data-theme="nature-light"] ::-webkit-scrollbar-thumb,
:root[data-theme="ocean-light"] ::-webkit-scrollbar-thumb {
  background: var(--border-light);
}

  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
  :root[data-theme="cyberpunk-light"] ::-webkit-scrollbar-thumb:hover,
  :root[data-theme="nature-light"] ::-webkit-scrollbar-thumb:hover,
  :root[data-theme="ocean-light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
  }

/* Theme toggle button styles remain exactly the same */
.theme-toggle {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
}

  .theme-toggle:hover {
    background-color: var(--surface-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.2);
  }

.theme-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

  .theme-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--text-secondary);
  }

.theme-toggle:hover .theme-icon svg {
  fill: var(--accent-primary);
}

.theme-toggle.switching .theme-icon {
  animation: rotateIcon 0.5s ease;
}

@keyframes rotateIcon {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Theme transition for smooth switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================= */
/* SETTINGS PAGE THEMES          */
/* ============================= */

/* Settings Section Visual Styles */
.settings-section {
  background: var(--surface-color);
}

.section-title {
  background: var(--background-secondary);
  color: var(--text-primary);
  font-family: var(--font-family-display);
}

.section-title:hover {
  background: var(--surface-hover);
}

/* Form Controls */
.form-control {
  background-color: var(--background-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.form-control:focus {
  background-color: var(--background-primary);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
}

/* Labels */
.setting-label {
  color: var(--text-primary);
  font-weight: 500;
}

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

/* Save Button */
.settings-save .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border: none;
  color: white;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.settings-save .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Theme-specific Settings */
:root[data-theme="cyberpunk-dark"] .settings-section {
  background: var(--surface-color);
  border: 1px solid var(--accent-primary);
  box-shadow: 0 0 10px rgba(229, 9, 20, 0.12);
}

:root[data-theme="cyberpunk-dark"] .section-title {
  background: linear-gradient(90deg, var(--background-secondary), var(--surface-color));
  border-bottom: 1px solid var(--accent-primary);
  color: var(--text-primary) !important;
}

/* Fix section titles in all dark themes */
:root[data-theme="dark"] .section-title,
:root[data-theme="cyberpunk-dark"] .section-title,
:root[data-theme="nature-dark"] .section-title,
:root[data-theme="ocean-dark"] .section-title,
:root[data-theme="western-dark"] .section-title,
:root[data-theme="vintage-dark"] .section-title,
:root[data-theme="noir-dark"] .section-title,
:root[data-theme="scifi-dark"] .section-title,
:root[data-theme="dark"] h1.section-title,
:root[data-theme="cyberpunk-dark"] h1.section-title,
:root[data-theme="nature-dark"] h1.section-title,
:root[data-theme="ocean-dark"] h1.section-title,
:root[data-theme="western-dark"] h1.section-title,
:root[data-theme="vintage-dark"] h1.section-title,
:root[data-theme="noir-dark"] h1.section-title,
:root[data-theme="scifi-dark"] h1.section-title,
:root[data-theme="dark"] h2.section-title,
:root[data-theme="cyberpunk-dark"] h2.section-title,
:root[data-theme="nature-dark"] h2.section-title,
:root[data-theme="ocean-dark"] h2.section-title,
:root[data-theme="western-dark"] h2.section-title,
:root[data-theme="vintage-dark"] h2.section-title,
:root[data-theme="noir-dark"] h2.section-title,
:root[data-theme="scifi-dark"] h2.section-title,
:root[data-theme="dark"] h3.section-title,
:root[data-theme="cyberpunk-dark"] h3.section-title,
:root[data-theme="nature-dark"] h3.section-title,
:root[data-theme="ocean-dark"] h3.section-title,
:root[data-theme="western-dark"] h3.section-title,
:root[data-theme="vintage-dark"] h3.section-title,
:root[data-theme="noir-dark"] h3.section-title,
:root[data-theme="scifi-dark"] h3.section-title,
:root[data-theme="dark"] h4.section-title,
:root[data-theme="cyberpunk-dark"] h4.section-title,
:root[data-theme="nature-dark"] h4.section-title,
:root[data-theme="ocean-dark"] h4.section-title,
:root[data-theme="western-dark"] h4.section-title,
:root[data-theme="vintage-dark"] h4.section-title,
:root[data-theme="noir-dark"] h4.section-title,
:root[data-theme="scifi-dark"] h4.section-title,
:root[data-theme="dark"] h5.section-title,
:root[data-theme="cyberpunk-dark"] h5.section-title,
:root[data-theme="nature-dark"] h5.section-title,
:root[data-theme="ocean-dark"] h5.section-title,
:root[data-theme="western-dark"] h5.section-title,
:root[data-theme="vintage-dark"] h5.section-title,
:root[data-theme="noir-dark"] h5.section-title,
:root[data-theme="scifi-dark"] h5.section-title,
:root[data-theme="dark"] h6.section-title,
:root[data-theme="cyberpunk-dark"] h6.section-title,
:root[data-theme="nature-dark"] h6.section-title,
:root[data-theme="ocean-dark"] h6.section-title,
:root[data-theme="western-dark"] h6.section-title,
:root[data-theme="vintage-dark"] h6.section-title,
:root[data-theme="noir-dark"] h6.section-title,
:root[data-theme="scifi-dark"] h6.section-title {
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

:root[data-theme="cyberpunk-dark"] .form-control {
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

:root[data-theme="cyberpunk-dark"] .form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 0.2rem rgba(229, 9, 20, 0.2);
}

/* Light Theme Overrides */
:root[data-theme="light"] .settings-section {
  background: var(--surface-color);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .section-title {
  background: var(--background-secondary);
  color: var(--text-primary);
}

:root[data-theme="light"] .form-control {
  background: var(--background-primary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

:root[data-theme="light"] .form-control:focus {
  border-color: var(--accent-primary);
  background: white;
}

:root[data-theme="light"] .text-muted {
  color: var(--text-secondary) !important;
}

/* Cinema typography overrides across themes */
:root,
:root[data-theme] {
  --font-family-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-family-body: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
}

:root[data-theme] h1,
:root[data-theme] h2,
:root[data-theme] h3,
:root[data-theme] h4,
:root[data-theme] h5,
:root[data-theme] h6 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important;
  text-shadow: none;
  animation: none !important;
}