/* ============================================
   EDUNUDGE SCIENCE - GLOBAL THEME SYSTEM
   Premium Non-Traditional Themes
   ============================================ */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
    background: var(--bg-gradient);
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================
   THEME 1: CYAN BLACK (DEFAULT)
   ============================================ */
.theme-cyan-black {
    --bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    --bg-primary: #0a0a0f;
    --bg-secondary: #0f0f1a;
    --bg-card: rgba(20, 20, 35, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent-primary: #00d9ff;
    --accent-secondary: #00b8d4;
    --border-color: rgba(0, 217, 255, 0.3);
    --border-hover: rgba(0, 217, 255, 0.8);
    --shadow: rgba(0, 217, 255, 0.4);
    --button-bg: #00d9ff;
    --button-hover: #00b8d4;
    --button-text: #0a0a0f;
}


/* ============================================
   THEME 2: LIGHT MODE (Clear Sky — Refined)
   ============================================ */
.theme-light {
    --bg-gradient:      linear-gradient(135deg, #e8f0fe 0%, #dde8f5 50%, #e4edf7 100%);
    --bg-primary:       #f0f5fb;
    --bg-secondary:     #e4ecf5;
    --bg-card:          #ffffff;
    --text-primary:     #1a202c;
    --text-secondary:   #4a5568;
    --text-muted:       #718096;
    --accent-primary:   #2563eb;
    --accent-secondary: #1d4ed8;
    --border-color:     rgba(37, 99, 235, 0.15);
    --border-hover:     rgba(37, 99, 235, 0.6);
    --shadow:           rgba(37, 99, 235, 0.12);
    --button-bg:        #2563eb;
    --button-hover:     #1d4ed8;
    --button-text:      #ffffff;
}


/* ============================================
   THEME 3: FOREST TWILIGHT
   Deep green with amber highlights
   ============================================ */
.theme-forest-twilight {
    --bg-gradient: linear-gradient(135deg, #1a2e1a 0%, #0f1a0f 100%);
    --bg-primary: #0f1a0f;
    --bg-secondary: #1a2e1a;
    --bg-card: rgba(30, 50, 30, 0.9);
    --text-primary: #e8f5e8;
    --text-secondary: #c8e6c8;
    --text-muted: #a5c9a5;
    --accent-primary: #d4a574;
    --accent-secondary: #b8814a;
    --border-color: rgba(212, 165, 116, 0.3);
    --border-hover: rgba(212, 165, 116, 0.8);
    --shadow: rgba(212, 165, 116, 0.3);
    --button-bg: #d4a574;
    --button-hover: #b8814a;
    --button-text: #0f1a0f;
}

/* ============================================
   THEME 4: MOCHA MOUSSE
   Creamy coffee elegance
   ============================================ */
.theme-mocha-mousse {
    --bg-gradient: linear-gradient(135deg, #3d2817 0%, #2a1810 100%);
    --bg-primary: #2a1810;
    --bg-secondary: #3d2817;
    --bg-card: rgba(80, 50, 35, 0.9);
    --text-primary: #f8f3ed;
    --text-secondary: #e8d7c3;
    --text-muted: #c4b5a0;
    --accent-primary: #c9a882;
    --accent-secondary: #a68968;
    --border-color: rgba(201, 168, 130, 0.3);
    --border-hover: rgba(201, 168, 130, 0.8);
    --shadow: rgba(201, 168, 130, 0.3);
    --button-bg: #c9a882;
    --button-hover: #a68968;
    --button-text: #2a1810;
}

/* ============================================
   THEME 5: LAVENDER MIST
   Soft purple sophistication
   ============================================ */
.theme-lavender-mist {
    --bg-gradient: linear-gradient(135deg, #2d2640 0%, #1a1625 100%);
    --bg-primary: #1a1625;
    --bg-secondary: #2d2640;
    --bg-card: rgba(60, 50, 80, 0.9);
    --text-primary: #f3e6ff;
    --text-secondary: #d4c4e8;
    --text-muted: #b5a5c8;
    --accent-primary: #b18cde;
    --accent-secondary: #9370d8;
    --border-color: rgba(177, 140, 222, 0.3);
    --border-hover: rgba(177, 140, 222, 0.8);
    --shadow: rgba(177, 140, 222, 0.3);
    --button-bg: #b18cde;
    --button-hover: #9370d8;
    --button-text: #1a1625;
}

/* ============================================
   THEME 6: SAGE GREEN
   Natural calming tones
   ============================================ */
.theme-sage-green {
    --bg-gradient: linear-gradient(135deg, #1e2820 0%, #131a15 100%);
    --bg-primary: #131a15;
    --bg-secondary: #1e2820;
    --bg-card: rgba(40, 55, 45, 0.9);
    --text-primary: #e8f5e9;
    --text-secondary: #c8e6c9;
    --text-muted: #a5d6a7;
    --accent-primary: #81c784;
    --accent-secondary: #66bb6a;
    --border-color: rgba(129, 199, 132, 0.3);
    --border-hover: rgba(129, 199, 132, 0.8);
    --shadow: rgba(129, 199, 132, 0.3);
    --button-bg: #81c784;
    --button-hover: #66bb6a;
    --button-text: #131a15;
}

/* ============================================
   ENHANCED CARD HOVER EFFECTS
   ============================================ */
.card {
    border-width: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    border-width: 3px;
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 40px var(--shadow);
}

/* ============================================
   BUTTON STYLES
   ============================================ */
button, .btn, .logout-btn {
    background: var(--button-bg);
    color: var(--button-text);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

button:hover, .btn:hover, .logout-btn:hover {
    background: var(--button-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

/* ============================================
   INPUT & SELECT STYLES
   ============================================ */
input, select, textarea {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--shadow);
}

/* ============================================
   LINK STYLES
   ============================================ */
a {
    color: var(--accent-primary);
    transition: all 0.3s ease;
}

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