/*
Theme Name: TxSoo
Theme URI: https://txsoo.com
Author: TxSoo
Author URI: https://txsoo.com
Description: TxSoo.Com store theme — premium WordPress themes, WooCommerce plugins, dashboards and digital services. A dark "electric tech" storefront with light/dark mode, built on the Underscores base.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: txsoo
Tags: e-commerce, custom-colors, custom-menu, dark-mode, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * All colors are oklch tokens with a hex fallback layer for older browsers.
 * Never hardcode colors in templates — use var(--...) instead.
 * ------------------------------------------------------------------------- */

/* ---- LIGHT THEME (default :root) ---- */
:root {
	color-scheme: light;

	/* Sticky header height — used to size full-viewport sections (e.g. hero banner) */
	--txsoo-header-h: 72px;

	/* Hex fallback layer */
	--background: #f7f9fc;
	--foreground: #302c3f;
	--card: #ffffff;
	--card-foreground: #302c3f;
	--popover: #ffffff;
	--popover-foreground: #302c3f;
	--primary: #7c3aed;
	--primary-foreground: #fdfdfe;
	--secondary: #e9ebf3;
	--secondary-foreground: #3b3749;
	--muted: #eaeaf2;
	--muted-foreground: #75788a;
	--accent: #0ea5c4;
	--accent-foreground: #fdfdfe;
	--destructive: #e0484a;
	--destructive-foreground: #fdfdfe;
	--border: #dcdee8;
	--input: #dcdee8;
	--ring: #8f5ae0;
	--surface: #ffffff;
	--surface-2: #ebedf5;
	--neon: #d84a98;
	--neon-foreground: #fdfdfe;
	--gold: #c7a028;
	--success: #0fbf8f;

	--radius: 1rem;
	--gradient-hero: radial-gradient(120% 100% at 50% 0%, rgba(165, 122, 255, 0.35) 0%, rgba(247, 249, 252, 0) 65%);
	--gradient-brand: linear-gradient(100deg, #7c3aed, #d84a98 55%, #0ea5c4);
	--gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 244, 251, 0.9));
	--shadow-glow: 0 18px 60px -18px rgba(124, 58, 237, 0.4);
	--shadow-card: 0 20px 50px -28px rgba(58, 54, 80, 0.4);
	--shadow-header: 0 10px 40px -20px rgba(0, 0, 0, 0.25);
	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--glass-border: rgba(30, 26, 48, 0.08);
	--grid-line: rgba(30, 26, 48, 0.06);

	/* oklch layer (modern browsers override) */
	--background: oklch(0.985 0.006 265);
	--foreground: oklch(0.22 0.04 268);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.22 0.04 268);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.22 0.04 268);
	--primary: oklch(0.55 0.22 274);
	--primary-foreground: oklch(0.99 0.005 260);
	--secondary: oklch(0.95 0.015 268);
	--secondary-foreground: oklch(0.28 0.045 268);
	--muted: oklch(0.95 0.012 268);
	--muted-foreground: oklch(0.52 0.03 265);
	--accent: oklch(0.58 0.14 210);
	--accent-foreground: oklch(0.99 0.005 260);
	--destructive: oklch(0.58 0.23 20);
	--destructive-foreground: oklch(0.99 0.005 260);
	--border: oklch(0.9 0.015 268);
	--input: oklch(0.9 0.015 268);
	--ring: oklch(0.62 0.2 280);
	--surface: oklch(1 0 0);
	--surface-2: oklch(0.965 0.01 268);
	--neon: oklch(0.6 0.24 330);
	--neon-foreground: oklch(0.99 0.005 260);
	--gold: oklch(0.72 0.15 78);
	--success: oklch(0.6 0.16 155);

	--gradient-hero: radial-gradient(120% 100% at 50% 0%, oklch(0.75 0.14 285 / 0.35) 0%, oklch(0.985 0.006 265 / 0) 65%);
	--gradient-brand: linear-gradient(100deg, oklch(0.55 0.22 274), oklch(0.6 0.24 330) 55%, oklch(0.62 0.15 205));
	--gradient-card: linear-gradient(160deg, oklch(1 0 0 / 0.95), oklch(0.97 0.012 268 / 0.9));
	--shadow-glow: 0 18px 60px -18px oklch(0.55 0.22 274 / 0.4);
	--shadow-card: 0 20px 50px -28px oklch(0.4 0.06 268 / 0.4);
	--shadow-header: 0 10px 40px -20px rgba(0, 0, 0, 0.25);
	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--glass-border: oklch(0.22 0.04 268 / 0.08);
	--grid-line: oklch(0.22 0.04 268 / 0.06);
}

/* ---- DARK THEME ---- */
.dark {
	color-scheme: dark;

	/* Hex fallback layer */
	--background: #12131d;
	--foreground: #f4f3f8;
	--card: #1c1d2b;
	--card-foreground: #f4f3f8;
	--popover: #181a26;
	--popover-foreground: #f4f3f8;
	--primary: #8b5cf6;
	--primary-foreground: #fdfdfe;
	--secondary: #232534;
	--secondary-foreground: #f4f3f8;
	--muted: #21232f;
	--muted-foreground: #a9a9c0;
	--accent: #3ac7db;
	--accent-foreground: #14151f;
	--destructive: #ef4a42;
	--destructive-foreground: #fdfdfe;
	--border: #2b2d3d;
	--input: #272940;
	--ring: #a78bfa;
	--surface: #1a1c29;
	--surface-2: #1f2231;
	--neon: #f472b6;
	--neon-foreground: #fdfdfe;
	--gold: #d9b53a;
	--success: #27d3a0;

	--gradient-hero: radial-gradient(120% 100% at 50% 0%, rgba(139, 92, 246, 0.55) 0%, rgba(18, 19, 29, 0) 65%);
	--gradient-brand: linear-gradient(100deg, #8b5cf6, #f472b6 55%, #3ac7db);
	--gradient-card: linear-gradient(160deg, rgba(34, 36, 50, 0.9), rgba(24, 26, 38, 0.9));
	--shadow-glow: 0 18px 60px -18px rgba(139, 92, 246, 0.65);
	--shadow-card: 0 24px 60px -30px rgba(4, 4, 10, 0.9);
	--shadow-header: 0 10px 40px -20px rgba(0, 0, 0, 0.25);
	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--glass-border: rgba(255, 255, 255, 0.08);
	--grid-line: rgba(255, 255, 255, 0.045);

	/* oklch layer */
	--background: oklch(0.16 0.035 267);
	--foreground: oklch(0.97 0.008 260);
	--card: oklch(0.21 0.04 268);
	--card-foreground: oklch(0.97 0.008 260);
	--popover: oklch(0.19 0.038 268);
	--popover-foreground: oklch(0.97 0.008 260);
	--primary: oklch(0.62 0.21 274);
	--primary-foreground: oklch(0.99 0.005 260);
	--secondary: oklch(0.27 0.045 268);
	--secondary-foreground: oklch(0.97 0.008 260);
	--muted: oklch(0.25 0.04 268);
	--muted-foreground: oklch(0.72 0.03 262);
	--accent: oklch(0.78 0.16 195);
	--accent-foreground: oklch(0.17 0.04 267);
	--destructive: oklch(0.62 0.23 20);
	--destructive-foreground: oklch(0.99 0.005 260);
	--border: oklch(0.32 0.045 268);
	--input: oklch(0.3 0.045 268);
	--ring: oklch(0.7 0.18 280);
	--surface: oklch(0.2 0.038 268);
	--surface-2: oklch(0.24 0.042 268);
	--neon: oklch(0.72 0.24 330);
	--neon-foreground: oklch(0.99 0.005 260);
	--gold: oklch(0.83 0.15 85);
	--success: oklch(0.72 0.17 155);

	--gradient-hero: radial-gradient(120% 100% at 50% 0%, oklch(0.32 0.16 285 / 0.55) 0%, oklch(0.16 0.035 267 / 0) 65%);
	--gradient-brand: linear-gradient(100deg, oklch(0.62 0.21 274), oklch(0.72 0.24 330) 55%, oklch(0.78 0.16 195));
	--gradient-card: linear-gradient(160deg, oklch(0.26 0.05 272 / 0.9), oklch(0.19 0.038 268 / 0.9));
	--shadow-glow: 0 18px 60px -18px oklch(0.62 0.21 274 / 0.65);
	--shadow-card: 0 24px 60px -30px oklch(0.05 0.02 267 / 0.9);
	--shadow-header: 0 10px 40px -20px rgba(0, 0, 0, 0.25);
	--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
	--glass-border: oklch(1 0 0 / 0.08);
	--grid-line: oklch(1 0 0 / 0.045);
}

/* ---------------------------------------------------------------------------
 * 2. BASE
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: "DM Sans", "Hind Siliguri", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Space Grotesk", "Hind Siliguri", sans-serif;
	letter-spacing: -0.02em;
	margin: 0;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	color: inherit;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

::selection {
	background: oklch(0.62 0.21 274 / 0.4);
	background: rgba(139, 92, 246, 0.4);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--foreground);
	color: var(--background);
	padding: 8px 16px;
	border-radius: 0 0 8px 0;
}
.skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
 * 3. CUSTOM UTILITIES
 * ------------------------------------------------------------------------- */
.bg-hero-glow {
	background-image: var(--gradient-hero);
}

.text-gradient {
	background-image: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bg-brand-gradient {
	background-image: var(--gradient-brand);
}

.glass-card {
	background-image: var(--gradient-card);
	border: 1px solid var(--glass-border);
	box-shadow: var(--shadow-card);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.glow-ring {
	box-shadow: var(--shadow-glow);
}

.grid-lines {
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
}

.text-gradient-animate {
	background-image: linear-gradient(
		100deg,
		var(--primary),
		var(--neon) 30%,
		var(--accent) 55%,
		var(--neon) 80%,
		var(--primary)
	);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: gradient-pan 8s linear infinite;
}

.aurora-blob {
	filter: blur(70px);
	animation: aurora 16s var(--ease-smooth) infinite alternate;
}

.shimmer-sweep {
	position: relative;
	overflow: hidden;
}
.shimmer-sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 25%, oklch(1 0 0 / 0.28) 50%, transparent 75%);
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%);
	transform: translateX(-100%);
	animation: sweep 3.4s var(--ease-smooth) infinite;
}

.spin-slow {
	animation: spin 22s linear infinite;
}

.marquee-track {
	animation: marquee 26s linear infinite;
}

.float-slow {
	animation: floaty 7s var(--ease-smooth) infinite;
}

/* ---------------------------------------------------------------------------
 * 4. KEYFRAMES
 * ------------------------------------------------------------------------- */
@keyframes gradient-pan {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 250% 50%;
	}
}

@keyframes aurora {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
		opacity: 0.5;
	}
	50% {
		transform: translate3d(6%, -8%, 0) scale(1.18);
		opacity: 0.75;
	}
	100% {
		transform: translate3d(-6%, 6%, 0) scale(1.05);
		opacity: 0.55;
	}
}

@keyframes sweep {
	0%,
	60% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes floaty {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-14px);
	}
}