/*
 * Spazzio Design Tokens
 * --------------------
 * Shared CSS custom properties + scope-level typography reset.
 * Loaded BEFORE every other Spazzio stylesheet so all components share
 * the same palette, font stack, and spacing scale.
 *
 * All Spazzio components wrap their markup in a `.spz-scope` element so the
 * styles only apply where we want them — they won't leak into other parts
 * of the page, and the host theme can't bleed into us either.
 */

/* Animated-angle property used by the rotating-border effect on
 * .spz-space__promo and .spz-calc__choice-card[data-spz-flow="contract"].
 * Declared globally so any component can animate it. */
@property --spz-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.spz-scope {
	/* ----- Colour -----
	 * Brand defaults. These values are overridden at runtime by the admin
	 * settings (Spazzio Hub → Definições → Identidade visual) via an inline
	 * <style> block injected on wp_head, so changing the colour pickers in
	 * the admin takes effect site-wide without touching this file.
	 */
	--spz-color-primary:        #89BE62;   /* Spazzio green */
	--spz-color-primary-dark:   #6f9e4d;
	--spz-color-secondary:      #5E1C73;   /* Spazzio purple */
	--spz-color-secondary-soft: #7a3491;
	--spz-color-available:      var(--spz-color-primary);
	--spz-color-unavailable:    #E53935;
	--spz-color-loading:        #ffc107;

	--spz-color-text:           #0f172a;
	--spz-color-text-soft:      #475569;
	--spz-color-text-muted:     #94a3b8;
	--spz-color-border:         #e2e8f0;
	--spz-color-border-soft:    #f1f5f9;
	--spz-color-surface:        #ffffff;
	--spz-color-surface-alt:    #f8fafc;

	/* ----- Type ----- */
	--spz-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--spz-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--spz-text-xs:   12px;
	--spz-text-sm:   13px;
	--spz-text-base: 15px;
	--spz-text-md:   16px;
	--spz-text-lg:   18px;
	--spz-text-xl:   22px;
	--spz-text-2xl:  28px;
	--spz-text-3xl:  36px;

	--spz-leading-tight:  1.15;
	--spz-leading-snug:   1.35;
	--spz-leading-normal: 1.6;

	/* ----- Spacing ----- */
	--spz-space-1: 4px;
	--spz-space-2: 8px;
	--spz-space-3: 12px;
	--spz-space-4: 16px;
	--spz-space-5: 20px;
	--spz-space-6: 24px;
	--spz-space-8: 32px;
	--spz-space-10: 40px;
	--spz-space-12: 48px;

	/* ----- Shape ----- */
	--spz-radius-sm:   6px;
	--spz-radius-md:   10px;
	--spz-radius-lg:   14px;
	--spz-radius-xl:   20px;
	--spz-radius-pill: 999px;

	/* ----- Elevation ----- */
	--spz-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
	--spz-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
	--spz-shadow-md: 0 8px 22px rgba(15, 23, 42, 0.08);
	--spz-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
	--spz-shadow-xl: 0 30px 60px rgba(15, 23, 42, 0.18);

	/* ----- Motion ----- */
	--spz-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--spz-duration: 220ms;

	/* ----- Scope reset ----- */
	font-family: var(--spz-font-sans) !important;
	font-size: var(--spz-text-md);
	line-height: var(--spz-leading-normal);
	color: var(--spz-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	letter-spacing: normal;
	text-transform: none;
}

/* Defensive: kill theme-bleed inside the scope */
.spz-scope *,
.spz-scope *::before,
.spz-scope *::after {
	box-sizing: border-box;
	font-family: inherit;
}

/* Headings inside scope ALWAYS get plugin styling */
.spz-scope h1,
.spz-scope h2,
.spz-scope h3,
.spz-scope h4,
.spz-scope h5,
.spz-scope h6 {
	font-family: var(--spz-font-display) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: var(--spz-leading-tight) !important;
	color: var(--spz-color-secondary) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
	text-shadow: none !important;
	background: none !important;
	background-image: none !important;
	-webkit-text-fill-color: currentColor !important;
}

.spz-scope p,
.spz-scope li,
.spz-scope span,
.spz-scope a,
.spz-scope label {
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.spz-scope a {
	color: var(--spz-color-primary-dark);
	text-decoration: none;
	transition: color var(--spz-duration) var(--spz-ease);
	background: none;
}

.spz-scope a:hover { color: var(--spz-color-secondary); }

/* Lists reset inside scope (so theme styling doesn't add weird bullets) */
.spz-scope ul,
.spz-scope ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Buttons / inputs default to inherit fonts */
.spz-scope button,
.spz-scope input,
.spz-scope select,
.spz-scope textarea {
	font-family: inherit !important;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Section eyebrow accent — used by both grid and space layouts */
.spz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--spz-space-2);
	font-size: var(--spz-text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--spz-color-primary-dark) !important;
}

.spz-eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--spz-color-primary);
}