/**
 * MaxCloud Theme Design Tokens (CSS Custom Properties)
 *
 * This file defines design tokens as CSS variables.
 * Tailwind CSS will consume these tokens in Milestone 3 & 4.
 * Do NOT add component styles or utility class frameworks to this file.
 */

:root {
	/* Typography - Font Stacks */
	--font-family-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--font-family-heading: var(--font-family-body);
	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	/* Typography - Font Size Scale */
	--font-size-xs: 0.75rem;     /* 12px */
	--font-size-sm: 0.875rem;    /* 14px */
	--font-size-base: 1rem;      /* 16px */
	--font-size-lg: 1.125rem;    /* 18px */
	--font-size-xl: 1.25rem;     /* 20px */
	--font-size-2xl: 1.5rem;     /* 24px */
	--font-size-3xl: 1.875rem;   /* 30px */
	--font-size-4xl: 2.25rem;    /* 36px */
	--font-size-5xl: 3rem;       /* 48px */

	/* Typography - Font Weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Typography - Line Heights */
	--line-height-none: 1;
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* Spacing Scale (Values only) */
	--spacing-0: 0px;
	--spacing-1: 0.25rem;  /* 4px */
	--spacing-2: 0.5rem;   /* 8px */
	--spacing-3: 0.75rem;  /* 12px */
	--spacing-4: 1rem;     /* 16px */
	--spacing-5: 1.25rem;  /* 20px */
	--spacing-6: 1.5rem;   /* 24px */
	--spacing-8: 2rem;     /* 32px */
	--spacing-10: 2.5rem;  /* 40px */
	--spacing-12: 3rem;    /* 48px */
	--spacing-16: 4rem;    /* 64px */
	--spacing-20: 5rem;    /* 80px */
	--spacing-24: 6rem;    /* 96px */

	/* Border Radius */
	--radius-none: 0px;
	--radius-sm: 0.25rem;  /* 4px */
	--radius-md: 0.5rem;   /* 8px */
	--radius-lg: 18px;
	--radius-xl: 24px;
	--radius-2xl: 28px;
	--radius-full: 9999px;

	/* Container Widths (Values only) */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1536px;
	--container-max: 1400px;

	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Shadows */
	--shadow-sm: 0 4px 12px rgba(22, 33, 61, 0.04);
	--shadow-md: 0 10px 30px rgba(22, 33, 61, 0.06);
	--shadow-lg: 0 20px 60px rgba(22, 33, 61, 0.08);
	--shadow-xl: 0 30px 80px rgba(101, 87, 255, 0.18);

	/* Dark-Zone Neon Glow Presets (Marketing Sections Only) */
	--shadow-glow-primary: 0 0 25px rgba(63, 198, 240, 0.4);
	--shadow-glow-secondary: 0 0 25px rgba(139, 95, 199, 0.4);
	--shadow-glow-accent: 0 0 25px rgba(232, 87, 158, 0.4);

	/* Brand Colors */
	--color-primary: #70D6FF;
	--color-primary-hover: #85DCFF;
	--color-secondary: #9B8CFF;
	--color-secondary-hover: #AE9EFF;
	--color-accent: #FF8EC7;
	--color-accent-hover: #FFA3D2;
	--gradient-btn-primary: linear-gradient(135deg, #70D6FF 0%, #9B8CFF 50%, #FF8EC7 100%);
	--color-ink: #16213D;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F7FAFF;
	--color-background: #F7FAFF;
	--color-text-main: #16213D;
	--color-text-muted: #6B7280;
	--color-border: #E5E7EB;

	/* Dark-Zone Additive Tokens (Marketing Sections Only) */
	--color-bg-dark: #16213D;
	--color-surface-dark: #1A2645;

	/* Breakpoints (Values only) */
	--breakpoint-mobile: 480px;
	--breakpoint-tablet: 768px;
	--breakpoint-laptop: 1024px;
	--breakpoint-desktop: 1280px;

	/* Z-Index Layer Scale */
	--z-below: -1;
	--z-default: 1;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;

	/* Focus-Visible Outline Token */
	--focus-outline-color: #3FC6F0;
	--focus-outline-width: 2px;
	--focus-outline-offset: 2px;
}

/* Accessibility Utility Class - WordPress Standard */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-background);
	clip: auto !important;
	clip-path: none;
	color: var(--color-text-main);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	left: 5px;
	line-height: var(--line-height-normal);
	padding: var(--spacing-3) var(--spacing-4);
	position: fixed !important;
	top: 5px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--shadow-lg);
	border: 2px solid var(--focus-outline-color);
	border-radius: var(--radius-md);
}

/* Base Element Resets */
svg {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

/* Responsive Custom Header Logo Sizing */
.site-branding img,
.custom-logo-link img,
.custom-logo {
	max-height: 36px;
	width: auto;
	object-fit: contain;
}

@media (min-width: 768px) {
	.site-branding img,
	.custom-logo-link img,
	.custom-logo {
		max-height: 48px;
	}
}

@media (min-width: 1024px) {
	.site-branding img,
	.custom-logo-link img,
	.custom-logo {
		max-height: 56px;
	}
}

/* Sticky Header Z-Index Stack */
.site-header {
	z-index: 9999 !important;
}

/* WooCommerce Form & Buttons Token Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	border: 1px solid var(--color-border);
	background-color: var(--color-surface);
	border-radius: var(--radius-xl);
	padding: 0.625rem 1rem;
	font-size: 0.875rem;
	color: var(--color-ink);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(63, 198, 240, 0.3);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-primary);
	color: var(--color-ink);
	font-weight: 700;
	border-radius: var(--radius-xl);
	padding: 0.625rem 1.25rem;
	border: none;
	transition: background-color var(--transition-fast);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-ink);
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	background-color: var(--color-secondary) !important;
	color: var(--color-surface) !important;
	font-weight: 800 !important;
	width: 100% !important;
	padding: 0.875rem 1.5rem !important;
	border-radius: var(--radius-xl) !important;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
	background-color: var(--color-secondary-hover) !important;
}

/* ================================================================
   HOMEPAGE ANIMATION SYSTEM
   ================================================================ */

/* 1. Scroll-Triggered Reveal (IntersectionObserver) */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-on-scroll {
	opacity: 0;
	transform: translateY(28px);
	will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
	animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger delays for grid children */
.animate-on-scroll.is-visible[data-delay="1"] { animation-delay: 0.08s; }
.animate-on-scroll.is-visible[data-delay="2"] { animation-delay: 0.16s; }
.animate-on-scroll.is-visible[data-delay="3"] { animation-delay: 0.24s; }
.animate-on-scroll.is-visible[data-delay="4"] { animation-delay: 0.32s; }
.animate-on-scroll.is-visible[data-delay="5"] { animation-delay: 0.40s; }
.animate-on-scroll.is-visible[data-delay="6"] { animation-delay: 0.48s; }

/* 2. Hero Floating Cards */
@keyframes heroFloat {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
}

.hero-card-float {
	animation: heroFloat 4s ease-in-out infinite;
}

.hero-card-float-delayed {
	animation: heroFloat 4s ease-in-out infinite;
	animation-delay: -1.5s;
}

.hero-card-float-delayed-2 {
	animation: heroFloat 4s ease-in-out infinite;
	animation-delay: -3s;
}

/* 3. Aurora Gradient Background */
@keyframes auroraShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.hero-aurora {
	background: linear-gradient(
		135deg,
		rgba(63, 198, 240, 0.12) 0%,
		rgba(139, 95, 199, 0.10) 25%,
		rgba(232, 87, 158, 0.08) 50%,
		rgba(63, 198, 240, 0.12) 75%,
		rgba(139, 95, 199, 0.10) 100%
	);
	background-size: 400% 400%;
	animation: auroraShift 12s ease-in-out infinite;
}

/* 4. Shine Sweep (Product Cards) */
@keyframes shineSweep {
	0% { transform: translateX(-100%) skewX(-15deg); }
	100% { transform: translateX(200%) skewX(-15deg); }
}

.card-shine {
	position: relative;
	overflow: hidden;
}

.card-shine::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.15),
		transparent
	);
	transform: translateX(-100%) skewX(-15deg);
	z-index: 2;
	pointer-events: none;
	transition: none;
}

.card-shine:hover::before {
	animation: shineSweep 0.6s ease-out;
}

/* 5. Sale Badge Pulse */
@keyframes salePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

.sale-badge-pulse {
	animation: salePulse 2s ease-in-out infinite;
}

/* 6. Gradient Border Hover */
.gradient-border-hover {
	position: relative;
	z-index: 0;
	transition: box-shadow var(--transition-normal);
}

.gradient-border-hover:hover {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
}

/* 7. Category Card Top Accent */
.category-accent-bar {
	position: relative;
	overflow: hidden;
}

.category-accent-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
	border-radius: 0 0 4px 4px;
	transition: width var(--transition-normal);
}

.category-accent-bar:hover::after {
	width: 60%;
}

/* 8. Testimonial Quote Decoration */
.testimonial-card-quote {
	position: relative;
}

.testimonial-card-quote::before {
	content: '\201C';
	position: absolute;
	top: -4px;
	right: 16px;
	font-size: 5rem;
	line-height: 1;
	font-family: Georgia, serif;
	color: var(--color-primary);
	opacity: 0.07;
	pointer-events: none;
	z-index: 0;
}

/* 9. Testimonial Left Border Accent on Hover */
.testimonial-border-accent {
	border-left: 3px solid transparent;
	transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.testimonial-border-accent:hover {
	border-left-color: var(--color-primary);
}

/* 10. Newsletter Animated Gradient */
@keyframes newsletterGradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.newsletter-animated-bg {
	background: linear-gradient(
		135deg,
		#1A1E4D 0%,
		#311440 25%,
		#1A1E4D 50%,
		#2A0E3A 75%,
		#1A1E4D 100%
	);
	background-size: 400% 400%;
	animation: newsletterGradient 10s ease infinite;
}

/* 11. Form Input Focus Glow */
.input-glow:focus {
	box-shadow: 0 0 0 3px rgba(63, 198, 240, 0.25), 0 0 20px rgba(63, 198, 240, 0.10);
	border-color: var(--color-primary) !important;
}

/* 12. Scroll Down Indicator */
@keyframes scrollBounce {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(8px); opacity: 1; }
}

.scroll-indicator {
	animation: scrollBounce 2s ease-in-out infinite;
}

/* 13. Gradient Text */
.gradient-text {
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* 14. Image Hover Zoom */
.img-hover-zoom {
	overflow: hidden;
}

.img-hover-zoom img {
	transition: transform var(--transition-normal);
}

.img-hover-zoom:hover img {
	transform: scale(1.06);
}

/* 15. Animated Store Badge */
@keyframes badgeFloat {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-6px) rotate(0deg); }
}

.floating-badge {
	animation: badgeFloat 3s ease-in-out infinite;
}

/* 16. Animated Gradient Border for Store Image */
@keyframes borderGlow {
	0%, 100% { border-color: var(--color-primary); box-shadow: 0 0 15px rgba(63, 198, 240, 0.2); }
	33% { border-color: var(--color-secondary); box-shadow: 0 0 15px rgba(139, 95, 199, 0.2); }
	66% { border-color: var(--color-accent); box-shadow: 0 0 15px rgba(232, 87, 158, 0.2); }
}

.animated-border-glow {
	border: 2px solid var(--color-primary);
	animation: borderGlow 6s ease-in-out infinite;
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll {
		opacity: 1;
		transform: none;
	}

	.animate-on-scroll.is-visible {
		animation: none;
	}

	.hero-card-float,
	.hero-card-float-delayed,
	.hero-card-float-delayed-2,
	.hero-aurora,
	.sale-badge-pulse,
	.scroll-indicator,
	.floating-badge,
	.animated-border-glow,
	.newsletter-animated-bg {
		animation: none;
	}

	.card-shine:hover::before {
		animation: none;
	}
}

/* ================================================================
   NEW: PREMIUM GLASSMORPHISM THEME SYSTEM
   ================================================================ */

.page-mesh-bg {
	background: #ffffff !important;
}

.glass-card {
	background: #ffffff !important;
	border: 1px solid rgba(226, 232, 240, 0.9) !important;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
	transition: all var(--transition-normal);
}

.glass-card:hover {
	background: #ffffff !important;
	box-shadow: 0 12px 32px rgba(147, 51, 234, 0.12) !important;
	border-color: rgba(147, 51, 234, 0.3) !important;
	transform: translateY(-4px);
}

.glass-panel-inner {
	background: #f8fafc !important;
	border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

.glass-section-dark {
	background: linear-gradient(135deg, #1A1E4D 0%, #311440 100%) !important;
	position: relative;
	overflow: hidden;
}

.glass-section-dark::before {
	content: '';
	position: absolute;
	top: -50%; left: -50%; width: 200%; height: 200%;
	background: radial-gradient(circle at 50% 50%, rgba(232, 87, 158, 0.15), transparent 60%);
	pointer-events: none;
}

.glass-card-dark {
	background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.glow-button,
.product-action .button {
	box-shadow: 0 4px 15px rgba(63, 198, 240, 0.4) !important;
	transition: all var(--transition-normal);
}
.glow-button:hover,
.product-action .button:hover {
	box-shadow: 0 6px 20px rgba(63, 198, 240, 0.6) !important;
}