/* ==========================================================================
   AI YouTube SEO Generator Pro — Shared Design System
   Loaded on every page that uses any plugin shortcode (the generator tool,
   the six essential pages, and the standalone contact form) so the whole
   site shares one font pairing, one colour system, one radius/shadow scale,
   and one theme switcher - instead of each surface inventing its own.
   ========================================================================== */

.aiysg-wrapper {
	--aiysg-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--aiysg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--aiysg-radius-lg: 22px;
	--aiysg-radius-md: 14px;
	--aiysg-radius-sm: 10px;
	--aiysg-radius-pill: 999px;

	/* Light theme (default) */
	--aiysg-bg: #ffffff;
	--aiysg-surface: #f7f7fb;
	--aiysg-surface-2: #eef0f5;
	--aiysg-border: #e7e8ef;
	--aiysg-text: #14151f;
	--aiysg-muted: #6b7280;
	--aiysg-accent: #e11d3f;
	--aiysg-accent-2: #ff6b6b;
	--aiysg-accent-dark: #a3122f;
	--aiysg-accent-soft: rgba(225, 29, 63, 0.09);
	--aiysg-glow-1: rgba(225, 29, 63, 0.16);
	--aiysg-glow-2: rgba(99, 91, 255, 0.14);
	--aiysg-shadow: 0 16px 40px rgba(20, 21, 31, 0.08);
	--aiysg-shadow-sm: 0 4px 14px rgba(20, 21, 31, 0.06);

	position: relative;
	font-family: var(--aiysg-font-body);
	color: var(--aiysg-text);
	isolation: isolate;
}

.aiysg-wrapper.aiysg-theme-red {
	--aiysg-bg: #fffaf9;
	--aiysg-surface: #fff2f1;
	--aiysg-surface-2: #ffe4e2;
	--aiysg-border: #f9d3d0;
	--aiysg-text: #2c1210;
	--aiysg-muted: #8a5852;
	--aiysg-accent: #e11d34;
	--aiysg-accent-2: #ff7a45;
	--aiysg-accent-dark: #9c0f22;
	--aiysg-accent-soft: rgba(225, 29, 52, 0.1);
	--aiysg-glow-1: rgba(225, 29, 52, 0.22);
	--aiysg-glow-2: rgba(255, 138, 61, 0.18);
	--aiysg-shadow: 0 16px 40px rgba(156, 15, 34, 0.14);
	--aiysg-shadow-sm: 0 4px 14px rgba(156, 15, 34, 0.1);
}

.aiysg-wrapper.aiysg-theme-dark {
	--aiysg-bg: #0e0f14;
	--aiysg-surface: #171922;
	--aiysg-surface-2: #1f222d;
	--aiysg-border: #2b2f3b;
	--aiysg-text: #f3f4f8;
	--aiysg-muted: #9aa0af;
	--aiysg-accent: #ff4d6d;
	--aiysg-accent-2: #ff8095;
	--aiysg-accent-dark: #c8213f;
	--aiysg-accent-soft: rgba(255, 77, 109, 0.14);
	--aiysg-glow-1: rgba(255, 77, 109, 0.28);
	--aiysg-glow-2: rgba(124, 92, 255, 0.24);
	--aiysg-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	--aiysg-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.aiysg-wrapper *,
.aiysg-wrapper *::before,
.aiysg-wrapper *::after {
	box-sizing: border-box;
}

.aiysg-wrapper h1,
.aiysg-wrapper h2,
.aiysg-wrapper h3,
.aiysg-wrapper h4 {
	font-family: var(--aiysg-font-display);
}

/* --- Ambient signature glow (shared visual identity) --------------------- */

.aiysg-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
	opacity: 0.9;
	animation: aiysg-breathe 9s ease-in-out infinite;
}

.aiysg-glow-a {
	width: 320px;
	height: 320px;
	top: -120px;
	left: -80px;
	background: radial-gradient(circle, var(--aiysg-glow-1), transparent 70%);
}

.aiysg-glow-b {
	width: 360px;
	height: 360px;
	bottom: -140px;
	right: -100px;
	background: radial-gradient(circle, var(--aiysg-glow-2), transparent 70%);
	animation-delay: 3s;
}

@keyframes aiysg-breathe {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50% { transform: scale(1.15); opacity: 1; }
}

@keyframes aiysg-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.aiysg-fade-in {
	animation: aiysg-fade-up 0.5s ease both;
	position: relative;
	z-index: 1;
}

/* --- Shared theme switch (identical on the generator tool and every
       essential page, so switching themes anywhere feels like one site) --- */

.aiysg-theme-switch {
	display: inline-flex;
	gap: 4px;
	background: var(--aiysg-surface);
	border: 1px solid var(--aiysg-border);
	padding: 4px;
	border-radius: var(--aiysg-radius-pill);
	position: relative;
	z-index: 1;
}

.aiysg-theme-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--aiysg-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.aiysg-theme-btn svg {
	width: 16px;
	height: 16px;
}

.aiysg-theme-btn:hover {
	background: var(--aiysg-accent-soft);
	color: var(--aiysg-accent);
}

.aiysg-theme-btn.is-active {
	background: linear-gradient(135deg, var(--aiysg-accent), var(--aiysg-accent-dark));
	color: #fff;
	box-shadow: 0 4px 12px var(--aiysg-glow-1);
	transform: scale(1.04);
}

/* --- Shared button recipe (generator + essential pages both build on this) */

.aiysg-btn-base {
	appearance: none;
	border: none;
	cursor: pointer;
	font-family: var(--aiysg-font-display);
	font-weight: 700;
	border-radius: var(--aiysg-radius-md);
	transition: transform 0.14s ease, box-shadow 0.2s ease, opacity 0.14s ease, background 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
}

.aiysg-btn-base:hover {
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.aiysg-glow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiysg-wrapper * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.aiysg-glow {
		animation: none;
		opacity: 0.5;
	}
}