/* =====================================================================
 * Hidden Locations — Design system (Brand Guideline).
 * Everything is encapsulated under .hl-plugin so the plugin neither
 * affects nor is affected by the active theme. Fully tokenized.
 * ===================================================================== */

.hl-plugin {
	/* Backgrounds & surfaces */
	--hl-color-bg: #050505;
	--hl-color-bg-secondary: #0b0b0b;
	--hl-color-surface: #101010;
	--hl-color-surface-raised: #151515;

	/* Borders */
	--hl-color-border: #262626;
	--hl-color-border-strong: #3a3a3a;

	/* Text */
	--hl-color-text: #f7f7f4;
	--hl-color-text-secondary: #babab5;
	--hl-color-text-muted: #777a80;
	--hl-color-text-disabled: #505257;

	/* Accents */
	--hl-color-accent: #ff0064;
	--hl-color-accent-hover: #dc0057;
	--hl-color-accent-secondary: #00c8c8;

	/* Functional states */
	--hl-color-success: #65c18c;
	--hl-color-warning: #e4b85c;
	--hl-color-error: #e45c67;
	--hl-color-info: #58a6d8;

	/* Typography */
	--hl-font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hl-font-editorial: "Cormorant Garamond", Georgia, serif;

	/* Layout */
	--hl-container: 1600px;
	--hl-content-container: 1440px;
	--hl-reading-width: 860px;

	/* Spacing scale (×4) */
	--hl-space-1: 4px;  --hl-space-2: 8px;  --hl-space-3: 12px; --hl-space-4: 16px;
	--hl-space-5: 20px; --hl-space-6: 24px; --hl-space-8: 32px; --hl-space-10: 40px;
	--hl-space-12: 48px; --hl-space-16: 64px; --hl-space-20: 80px; --hl-space-24: 96px; --hl-space-30: 120px;

	/* Radii (sober geometry) */
	--hl-radius-sm: 2px;
	--hl-radius-md: 4px;
	--hl-radius-lg: 8px;

	/* Motion */
	--hl-transition-fast: 180ms ease;
	--hl-transition-default: 260ms cubic-bezier(0.22, 1, 0.36, 1);

	/* ---- Back-compat aliases (legacy component vars map to the brand) ---- */
	--hl-bg-primary: var(--hl-color-bg);
	--hl-bg-secondary: var(--hl-color-bg-secondary);
	--hl-bg-card: var(--hl-color-surface);
	--hl-bg-input: var(--hl-color-surface);
	--hl-border: var(--hl-color-border);
	--hl-text: var(--hl-color-text);
	--hl-text-primary: var(--hl-color-text);
	--hl-text-2: var(--hl-color-text-secondary);
	--hl-text-secondary: var(--hl-color-text-secondary);
	--hl-accent: var(--hl-color-accent);
	--hl-success: var(--hl-color-success);
	--hl-warning: var(--hl-color-warning);
	--hl-error: var(--hl-color-error);

	color: var(--hl-color-text);
	font-family: var(--hl-font-sans);
	-webkit-font-smoothing: antialiased;
}

.hl-plugin,
.hl-plugin *,
.hl-plugin *::before,
.hl-plugin *::after { box-sizing: border-box; }

/* ---- Typography ---- */
.hl-plugin h1, .hl-plugin h2, .hl-plugin h3, .hl-plugin h4 {
	font-family: var(--hl-font-sans); color: var(--hl-color-text); font-weight: 700; line-height: 1.12;
}
.hl-plugin h1 { letter-spacing: -0.02em; }
.hl-plugin .hl-editorial,
.hl-plugin .hl-single__title,
.hl-plugin .hl-plan__name { font-family: var(--hl-font-editorial); font-weight: 600; letter-spacing: 0; }
.hl-plugin p { line-height: 1.6; }
.hl-plugin a { color: var(--hl-color-text); }

/* ---- Buttons: secondary is the default; magenta only for priority ---- */
.hl-plugin .hl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 12px 24px;
	font-family: var(--hl-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em;
	text-decoration: none; cursor: pointer;
	background: transparent; color: var(--hl-color-text);
	border: 1px solid var(--hl-color-border-strong); border-radius: var(--hl-radius-sm);
	transition: background var(--hl-transition-fast), color var(--hl-transition-fast), border-color var(--hl-transition-fast);
}
.hl-plugin .hl-btn:hover { background: var(--hl-color-text); color: #000; border-color: var(--hl-color-text); }
.hl-plugin .hl-btn--accent { background: var(--hl-color-accent); border-color: var(--hl-color-accent); color: #fff; }
.hl-plugin .hl-btn--accent:hover { background: var(--hl-color-accent-hover); border-color: var(--hl-color-accent-hover); color: #fff; }
.hl-plugin .hl-btn--ghost { border-color: transparent; color: var(--hl-color-accent-secondary); min-height: auto; padding: 8px 4px; }
.hl-plugin .hl-btn--ghost:hover { background: transparent; color: var(--hl-color-text); }
.hl-plugin .hl-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 12px; }

/* ---- Inputs ---- */
.hl-plugin input[type="text"], .hl-plugin input[type="email"], .hl-plugin input[type="password"],
.hl-plugin input[type="tel"], .hl-plugin input[type="number"], .hl-plugin input[type="date"],
.hl-plugin input[type="search"], .hl-plugin input[type="url"], .hl-plugin select, .hl-plugin textarea {
	background: var(--hl-color-surface); border: 1px solid var(--hl-color-border);
	color: var(--hl-color-text); border-radius: var(--hl-radius-md);
	padding: 14px 16px; font-family: var(--hl-font-sans); font-size: 15px; min-height: 48px; width: 100%;
	transition: border-color var(--hl-transition-fast), box-shadow var(--hl-transition-fast);
}
.hl-plugin textarea { min-height: 140px; }
.hl-plugin input::placeholder, .hl-plugin textarea::placeholder { color: var(--hl-color-text-muted); }
.hl-plugin input:focus, .hl-plugin select:focus, .hl-plugin textarea:focus {
	outline: none; border-color: var(--hl-color-accent); box-shadow: 0 0 0 2px rgba(255, 0, 100, .15);
}
.hl-plugin :focus-visible { outline: 2px solid var(--hl-color-accent); outline-offset: 2px; }

/* ---- Pills / membership tags ---- */
.hl-plugin .hl-pill, .hl-plugin .hl-badge--plan {
	display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hl-color-border);
	color: var(--hl-color-text-secondary); background: transparent;
}

/* ---- Alerts ---- */
.hl-plugin .hl-notice { border-radius: var(--hl-radius-md); padding: 12px 16px; font-size: 14px; }
.hl-plugin .hl-notice--ok { background: rgba(101,193,140,.12); border: 1px solid var(--hl-color-success); color: var(--hl-color-success); }
.hl-plugin .hl-notice--error { background: rgba(228,92,103,.12); border: 1px solid var(--hl-color-error); color: var(--hl-color-error); }

/* ---- Skeleton loaders ---- */
.hl-plugin .hl-skeleton {
	aspect-ratio: 4 / 3; border-radius: var(--hl-radius-md);
	background: linear-gradient(90deg, #101010, #1a1a1a, #101010); background-size: 200% 100%;
	animation: hl-shimmer 1.2s infinite;
}
@keyframes hl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.hl-plugin .hl-empty { color: var(--hl-color-text-muted); padding: 40px 0; text-align: center; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.hl-plugin *, .hl-plugin *::before, .hl-plugin *::after {
		animation-duration: .001ms !important; transition-duration: .001ms !important;
	}
}

/* ---- Brand refinements (sober radii, editorial scale) ---- */
.hl-plugin .hl-card,
.hl-plugin .hl-auth__form,
.hl-plugin .hl-stat,
.hl-plugin .hl-plan,
.hl-plugin .hl-single__hero,
.hl-plugin .hl-specs li,
.hl-plugin .hl-account__menu a { border-radius: var(--hl-radius-md); }
.hl-plugin .hl-single__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.08; margin-top: 6px; }
/* Editorial accent line under section titles */
.hl-plugin .hl-single__section h2 { font-weight: 700; letter-spacing: .01em; }
/* Membership tags read as labels, not buttons */
.hl-plugin .hl-card__state { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

/* ---- Full-width content views with responsive side gutters (30px → 10px) ---- */
.hl-plugin.hl-catalog,
.hl-plugin.hl-single,
.hl-plugin.hl-account,
.hl-plugin.hl-pricing,
.hl-plugin.hl-checkout,
.hl-plugin.hl-thankyou {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: clamp(10px, 2.5vw, 30px);
	padding-right: clamp(10px, 2.5vw, 30px);
}