/* Theme Mode Variables - Light & Dark */

/* ============================================
   Light Mode (Default)
   ============================================ */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #6c757d;
    --text-tertiary: #adb5bd;
    
    /* Accent Colors */
    --accent-pink: #E62C7D;
    --accent-purple: #6B5CFF;
    
    /* Border & Divider */
    --border-color: #dee2e6;
    --divider-color: rgba(0, 0, 0, 0.1);
    
    /* Card & Surface */
    --card-bg: #ffffff;
    --card-hover: #f8f9fa;
    
    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0a0e27;
    --bg-secondary: #151b35;
    --bg-tertiary: #1e2640;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a8b2d1;
    --text-tertiary: #64748b;
    
    /* Accent Colors (same) */
    --accent-pink: #E62C7D;
    --accent-purple: #6B5CFF;
    
    /* Border & Divider */
    --border-color: rgba(255, 255, 255, 0.1);
    --divider-color: rgba(255, 255, 255, 0.05);
    
    /* Card & Surface */
    --card-bg: #151b35;
    --card-hover: #1e2640;
    
    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================
   Smooth Transitions
   ============================================ */
body,
.container,
.card,
section,
header,
footer {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

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

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
    color: #FDB813;
}

/* Moon icon (shown in light mode) */
.theme-toggle .moon-icon {
    color: #6B5CFF;
}

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

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

[data-theme="light"] .sun-icon,
:root:not([data-theme]) .sun-icon {
    display: none;
}

[data-theme="light"] .moon-icon,
:root:not([data-theme]) .moon-icon {
    display: block;
}

/* ============================================
   Prevent FOUC (Flash of Unstyled Content)
   ============================================ */
html:not(.theme-loaded) {
    visibility: hidden;
}

html.theme-loaded {
    visibility: visible;
}