/**
 * SecureTech Pro V5 - Clean & Pleasant Theme System
 * Soft, eye-friendly colors for everyday browsing
 */

/* LIGHT MODE - Clean, Soft, Professional */
:root,
:root[data-theme="light"] {
	--color-primary: #3b82f6;
	--color-primary-hover: #2563eb;
	--color-primary-soft: #eff6ff;
	--color-primary-glow: rgba(59, 130, 246, 0.18);
	--color-primary-light: #93c5fd;

	--color-accent: #14b8a6;
	--color-accent-hover: #0d9488;
	--color-accent-soft: #f0fdfa;
	--color-accent-glow: rgba(20, 184, 166, 0.18);

	--color-electric: #06b6d4;
	--color-purple: #8b5cf6;

	--bg-primary: #ffffff;
	--bg-secondary: #f8fafc;
	--bg-tertiary: #f1f5f9;
	--bg-soft: #fafbff;
	--bg-card: #ffffff;
	--bg-elevated: #ffffff;
	--bg-overlay: rgba(15, 23, 42, 0.4);

	--text-primary: #0f172a;
	--text-secondary: #334155;
	--text-tertiary: #64748b;
	--text-muted: #94a3b8;
	--text-on-primary: #ffffff;

	--border-color: #e2e8f0;
	--border-color-hover: #cbd5e1;
	--border-strong: #94a3b8;

	--surface-warm: #ffffff;
	--surface-cool: #f8fafc;

	--hero-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	--hero-text: #f8fafc;

	--color-success: #10b981;
	--color-success-soft: #ecfdf5;
	--color-error: #ef4444;
	--color-error-soft: #fef2f2;
	--color-warning: #f59e0b;
	--color-warning-soft: #fffbeb;
	--color-info: #3b82f6;
	--color-info-soft: #eff6ff;

	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 2px 6px -1px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
	--shadow-lg: 0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 3px 6px -3px rgba(15, 23, 42, 0.05);
	--shadow-xl: 0 16px 32px -8px rgba(15, 23, 42, 0.12);
	--shadow-glow: 0 0 24px rgba(59, 130, 246, 0.12);

	--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
	--gradient-accent: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%);
	--gradient-soft: linear-gradient(135deg, #eff6ff 0%, #f0fdfa 100%);

	color-scheme: light;
}

/* DARK MODE */
:root[data-theme="dark"] {
	--color-primary: #60a5fa;
	--color-primary-hover: #93c5fd;
	--color-primary-soft: #1e3a8a;
	--color-primary-glow: rgba(96, 165, 250, 0.3);

	--color-accent: #2dd4bf;
	--color-accent-hover: #5eead4;
	--color-accent-soft: #134e4a;

	--bg-primary: #0f172a;
	--bg-secondary: #1e293b;
	--bg-tertiary: #334155;
	--bg-card: #1e293b;
	--bg-elevated: #334155;
	--bg-overlay: rgba(0, 0, 0, 0.7);

	--text-primary: #f1f5f9;
	--text-secondary: #cbd5e1;
	--text-tertiary: #94a3b8;
	--text-muted: #64748b;

	--border-color: #334155;
	--border-color-hover: #475569;

	--color-success: #34d399;
	--color-success-soft: #064e3b;
	--color-error: #f87171;
	--color-error-soft: #7f1d1d;
	--color-warning: #fbbf24;
	--color-warning-soft: #78350f;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
	--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.7);
	--shadow-glow: 0 0 32px rgba(96, 165, 250, 0.25);

	--gradient-primary: linear-gradient(135deg, #60a5fa 0%, #2dd4bf 100%);

	color-scheme: dark;
}

/* GLOBAL */
html { background: var(--bg-secondary); }

body {
	background: var(--bg-secondary) !important;
	color: var(--text-primary);
	font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Disable transitions during page load */
.no-transition,
.no-transition * {
	transition: none !important;
}

/* Header */
.site-header {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .site-header {
	background: rgba(15, 23, 42, 0.92) !important;
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.98) !important;
	box-shadow: var(--shadow-md);
}

[data-theme="dark"] .site-header.is-scrolled {
	background: rgba(15, 23, 42, 0.98) !important;
}

/* Sections */
.featured-categories,
.featured-products,
.new-arrivals,
.trust-badges,
.why-us {
	background: var(--bg-secondary) !important;
}

.featured-products {
	background: var(--bg-primary) !important;
}

/* Cards */
.category-card,
.woocommerce ul.products li.product {
	background: var(--bg-card) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 16px !important;
	color: var(--text-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.section-title, .page-title, .post-title,
.category-card-title,
.woocommerce-loop-product__title {
	color: var(--text-primary) !important;
}

/* Forms */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="number"],
textarea, select {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
	border-color: var(--border-color) !important;
}

input::placeholder, textarea::placeholder {
	color: var(--text-tertiary);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px var(--color-primary-glow) !important;
	outline: none;
}

/* Theme Toggle Button */
.theme-toggle {
	position: relative;
	width: 52px;
	height: 28px;
	border-radius: 100px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-color);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	padding: 2px;
	transition: all 0.25s ease;
	overflow: hidden;
	flex-shrink: 0;
}

.theme-toggle:hover {
	border-color: var(--color-primary);
}

.theme-toggle-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--bg-primary);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}

[data-theme="dark"] .theme-toggle-thumb {
	transform: translateX(-24px);
	background: var(--color-primary);
}

.theme-toggle-icon {
	width: 13px;
	height: 13px;
	color: #f59e0b;
	transition: opacity 0.25s ease;
	position: absolute;
}

.theme-toggle .icon-sun { opacity: 1; }
.theme-toggle .icon-moon { opacity: 0; color: #fbbf24; }

[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; }

@media (max-width: 768px) {
	.theme-toggle { width: 44px; height: 24px; }
	.theme-toggle-thumb { width: 18px; height: 18px; }
	[data-theme="dark"] .theme-toggle-thumb { transform: translateX(-20px); }
}