/* ====================================
   Theme Variables & Dark Mode Styles
   ==================================== */

:root {
    --primary-color: #3F51B5;
    --secondary-color: #E91E63;
    --accent-color: #FF4081;
    --bg-color: #ffffff;
    --text-color: #333333;
    --hover-color: #f5f5f5;
    --border-color: #e0e0e0;
    --card-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --navbar-bg: #3F51B5;
    --navbar-text: #ffffff;
}

[data-theme="dark"] {
    --primary-color: #5C6BC0;
    --secondary-color: #EC407A;
    --accent-color: #FF80AB;
    --bg-color: #121212;
    --text-color: #ffffff;
    --hover-color: #2c3034;
    --border-color: #333333;
    --card-bg: #1e1e1e;
    --shadow-color: rgba(255, 255, 255, 0.05);
    --navbar-bg: #303F9F;
    --navbar-text: #ffffff;
}

/* Dark mode transition */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* ==================== Dark Mode Hero Section ==================== */

[data-theme="dark"] .hero-section-v2 {
    background: linear-gradient(160deg, #0c0c1d 0%, #1a1a2e 40%, #16213e 100%);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .orb-1 {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%);
    opacity: 0.6;
}

[data-theme="dark"] .orb-2 {
    background: radial-gradient(circle, rgba(236, 72, 153, 0.45), transparent 70%);
    opacity: 0.6;
}

[data-theme="dark"] .orb-3 {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 70%);
    opacity: 0.5;
}

[data-theme="dark"] .hero-noise {
    opacity: 0.05;
}

[data-theme="dark"] .hero-badge-label {
    background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .hero-name {
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 40%, #fb923c 80%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(236, 72, 153, 0.3));
}

[data-theme="dark"] .hero-description {
    color: #94a3b8;
}

[data-theme="dark"] .cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cta-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .avatar-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, rgba(236, 72, 153, 0.3) 50%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
}

[data-theme="dark"] .avatar-border-ring::before {
    border-color: rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .avatar-image {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
                0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ==================== Dark Mode Cards ==================== */

.mdui-theme-layout-dark .interest-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mdui-theme-layout-dark .interest-item {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mdui-theme-layout-dark .interest-item:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.mdui-theme-layout-dark .mdui-card {
    background-color: var(--card-bg);
}

.mdui-theme-layout-dark .mdui-drawer {
    background-color: var(--card-bg);
}

.mdui-theme-layout-dark .mdui-list-item:hover {
    background-color: var(--hover-color);
}

.mdui-theme-layout-dark .mdui-list-item.mdui-list-item-active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==================== Dark Mode Tool Cards ==================== */

[data-theme="dark"] .tool-card {
    background-color: #1e1e1e;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

[data-theme="dark"] .tool-card .result-value {
    color: #64b5f6;
}

[data-theme="dark"] .tool-card .password-display {
    background-color: rgba(255,255,255,0.05);
    color: #64b5f6;
    border-color: #4f5aa8;
}

[data-theme="dark"] .tool-card .result-container {
    background-color: rgba(63, 81, 181, 0.1);
    border-color: #4f5aa8;
}

[data-theme="dark"] .tool-card .mdui-textfield-input {
    color: rgba(255,255,255,0.87);
}

[data-theme="dark"] .tool-card .mdui-textfield-label {
    color: rgba(255,255,255,0.7);
}

/* ==================== Dark Mode Clock Widget ==================== */

[data-theme="dark"] .clock-widget-card {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ==================== Dark Mode Weather Widget ==================== */

[data-theme="dark"] .weather-widget {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .weather-widget:hover {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .weather-icon {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .weather-unit-toggle {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .weather-unit-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ==================== Dark Mode Contact Section ==================== */

[data-theme="dark"] .contact-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .social-card {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .social-name {
    color: #cbd5e1;
}

/* ==================== Dark Mode SPA ==================== */

[data-theme="dark"] .mdui-drawer .spa-nav-active {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .spa-transition-overlay {
    background-color: var(--bg-color, #121212);
}

/* ==================== Dark Mode Scrollbar ==================== */

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e1e1e;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #444;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}