/**
 * Dark Mode Styles
 * System preference detection + manual toggle support
 */

/* ============================================
   Base Dark Mode Styles
   ============================================ */

[data-theme="dark"] {
	--color-background: #0D0D12;
	--color-surface: #16161D;
	--color-surface-glass: rgba(22, 22, 29, 0.7);
	--color-text: #E8E8ED;
	--color-text-muted: #9494B8;
	--color-primary: #A78BFA;
	--color-primary-glow: rgba(167, 139, 250, 0.4);
	color-scheme: dark;
}

[data-theme="dark"] body {
	background-color: var(--color-background);
	color: var(--color-text);
}

[data-theme="dark"] .has-background-color {
	background-color: var(--color-background);
}

[data-theme="dark"] .has-text-color {
	color: var(--color-text);
}

/* ============================================
   WordPress Block Overrides
   ============================================ */

[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-cover,
[data-theme="dark"] .wp-block-columns {
	color: var(--color-text);
}

[data-theme="dark"] .wp-block-heading {
	color: var(--color-text);
}

[data-theme="dark"] .wp-block-paragraph {
	color: var(--color-text);
}

[data-theme="dark"] a {
	color: var(--color-primary);
}

[data-theme="dark"] a:hover {
	color: #C4B5FD;
}

/* Navigation */
[data-theme="dark"] .wp-block-navigation a {
	color: var(--color-text);
}

[data-theme="dark"] .wp-block-navigation a:hover {
	color: var(--color-primary);
}

/* Text Color Overrides for Dark Mode */
[data-theme="dark"] .has-primary-color.has-text-color {
	color: var(--color-primary) !important;
}

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

[data-theme="dark"] .has-text-color.has-text-color {
	color: var(--color-text);
}

/* Buttons */
[data-theme="dark"] .wp-block-button__link {
	background-color: var(--color-primary);
	color: #ffffff;
}

[data-theme="dark"] .wp-block-button__link:hover {
	background-color: #C4B5FD;
}

[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background-color: transparent;
}

[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(167, 139, 250, 0.15);
	color: #C4B5FD;
	border-color: #C4B5FD;
}

/* Primary Gradient Button (btn-gradient) - Dark Mode */
[data-theme="dark"] .wp-block-button.btn-gradient .wp-block-button__link {
	background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
	color: #ffffff;
	border: none;
}

[data-theme="dark"] .wp-block-button.btn-gradient .wp-block-button__link:hover {
	background: linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
	box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

/* Code Blocks */
[data-theme="dark"] .wp-block-code,
[data-theme="dark"] pre {
	background-color: var(--color-surface);
	color: var(--color-text);
}

[data-theme="dark"] code {
	background-color: var(--color-surface);
	color: var(--color-primary);
}

/* Quote */
[data-theme="dark"] .wp-block-quote {
	border-color: var(--color-primary);
	color: var(--color-text);
}

/* Separator */
[data-theme="dark"] .wp-block-separator {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Theme Toggle Button
   ============================================ */

.theme-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 10px;
	border-radius: 50%;
	transition: background-color 0.3s ease, transform 0.3s ease;
	color: var(--wp--preset--color--text);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.theme-toggle:hover {
	background-color: rgba(139, 92, 246, 0.1);
	transform: scale(1.05);
}

.theme-toggle:active {
	transform: scale(0.95);
}

.theme-toggle svg {
	width: 22px;
	height: 22px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:hover svg {
	transform: rotate(15deg);
}

/* Sun Icon */
.theme-toggle .icon-sun {
	display: block;
}

.theme-toggle .icon-moon {
	display: none;
}

/* Dark Mode - Show Moon, Hide Sun */
[data-theme="dark"] .theme-toggle {
	color: var(--color-text);
}

[data-theme="dark"] .theme-toggle:hover {
	background-color: rgba(167, 139, 250, 0.15);
}

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

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

/* ============================================
   Site Header Dark Mode
   ============================================ */

[data-theme="dark"] .site-header {
	background: rgba(13, 13, 18, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .site-header .wp-block-site-title a {
	color: var(--color-text);
}

/* ============================================
   Site Footer Dark Mode
   ============================================ */

[data-theme="dark"] .site-footer {
	background-color: var(--color-surface);
	color: var(--color-text);
}

[data-theme="dark"] .site-footer a {
	color: var(--color-text-muted);
}

[data-theme="dark"] .site-footer a:hover {
	color: var(--color-primary);
}

/* ============================================
   Form Elements
   ============================================ */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
	background-color: var(--color-surface);
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--color-text);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-glow);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
	color: var(--color-text-muted);
}

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

[data-theme="dark"] ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--color-background);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--color-surface);
	border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: rgba(148, 148, 184, 0.5);
}

/* ============================================
   Selection
   ============================================ */

[data-theme="dark"] ::selection {
	background-color: var(--color-primary-glow);
	color: var(--color-text);
}

/* ============================================
   System Preference Initial State
   ============================================ */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-background: #0D0D12;
		--color-surface: #16161D;
		--color-text: #E8E8ED;
		--color-text-muted: #9494B8;
		--color-primary: #A78BFA;
		color-scheme: dark;
	}
	
	:root:not([data-theme="light"]) body {
		background-color: var(--color-background);
		color: var(--color-text);
	}
}

/* ============================================
   Skills Section Dark Mode
   ============================================ */

[data-theme="dark"] .skills-section-animated {
	background: linear-gradient(180deg, #0D0D12 0%, #12121A 100%);
}

[data-theme="dark"] .skills-bg-bubbles .bubble {
	opacity: 0.25;
	filter: blur(100px);
}

[data-theme="dark"] .skills-bg-bubbles .bubble-1 {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(236, 72, 153, 0.4) 100%);
}

[data-theme="dark"] .skills-bg-bubbles .bubble-2 {
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(139, 92, 246, 0.4) 100%);
}

[data-theme="dark"] .skills-bg-bubbles .bubble-3 {
	background: linear-gradient(135deg, rgba(236, 72, 153, 0.4) 0%, rgba(251, 146, 60, 0.3) 100%);
}

[data-theme="dark"] .skills-bg-bubbles .bubble-4 {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(6, 182, 212, 0.3) 100%);
}

/* Skills Label in Dark Mode - More visible */
[data-theme="dark"] .skills-label {
	background: linear-gradient(135deg, #C4B5FD 0%, #F9A8D4 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Skill Cards Dark Mode */
[data-theme="dark"] .skill-card-modern {
	background: rgba(22, 22, 29, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 
		0 4px 24px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .skill-card-modern:hover {
	background: rgba(30, 30, 40, 0.7);
	border-color: rgba(167, 139, 250, 0.4);
	box-shadow: 
		0 12px 48px rgba(139, 92, 246, 0.25),
		0 0 0 1px rgba(167, 139, 250, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .skill-icon {
	color: #C4B5FD;
}

[data-theme="dark"] .skill-card-modern:hover .skill-icon {
	color: #F9A8D4;
}

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

/* System preference Dark Mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .skills-section-animated {
		background: linear-gradient(180deg, #0D0D12 0%, #12121A 100%);
	}
	
	:root:not([data-theme="light"]) .skills-bg-bubbles .bubble {
		opacity: 0.25;
		filter: blur(100px);
	}
	
	:root:not([data-theme="light"]) .skills-bg-bubbles .bubble-1 {
		background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(236, 72, 153, 0.4) 100%);
	}
	
	:root:not([data-theme="light"]) .skills-bg-bubbles .bubble-2 {
		background: linear-gradient(135deg, rgba(6, 182, 212, 0.5) 0%, rgba(139, 92, 246, 0.4) 100%);
	}
	
	:root:not([data-theme="light"]) .skills-bg-bubbles .bubble-3 {
		background: linear-gradient(135deg, rgba(236, 72, 153, 0.4) 0%, rgba(251, 146, 60, 0.3) 100%);
	}
	
	:root:not([data-theme="light"]) .skills-bg-bubbles .bubble-4 {
		background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(6, 182, 212, 0.3) 100%);
	}
	
	:root:not([data-theme="light"]) .skills-label {
		background: linear-gradient(135deg, #C4B5FD 0%, #F9A8D4 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	
	:root:not([data-theme="light"]) .skill-card-modern {
		background: rgba(22, 22, 29, 0.6);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 
			0 4px 24px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.05);
	}
	
	:root:not([data-theme="light"]) .skill-card-modern:hover {
		background: rgba(30, 30, 40, 0.7);
		border-color: rgba(167, 139, 250, 0.4);
		box-shadow: 
			0 12px 48px rgba(139, 92, 246, 0.25),
			0 0 0 1px rgba(167, 139, 250, 0.2),
			inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}
	
	:root:not([data-theme="light"]) .skill-icon {
		color: #C4B5FD;
	}
	
	:root:not([data-theme="light"]) .skill-card-modern:hover .skill-icon {
		color: #F9A8D4;
	}
	
	:root:not([data-theme="light"]) .skill-name {
		color: #E8E8ED;
	}
}