/* ==========================================================================
   ScaleProfessionals Design System
   v0.1.0 — Mei 2026
   Gemaakt voor scaleprofessionals.nl
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM FONTS
   Plaats font files in /wp-content/uploads/fonts/ op de server.
   Verwachte filenames staan in design/fonts/README.md.
   ========================================================================== */

/* --- Gilroy (UI / body) — WOFF formaat --- */
/* Filenames aangepast aan jouw FTP upload. Verwijder weights die je niet hebt. */
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gilroy';
	src: url('/wp-content/uploads/fonts/Gilroy-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* --- Dyson Sans Modern (display / headings) — TTF single weight --- */
/* Eén bestand voor alle weights. Browser past synthetic bold/light toe waar nodig. */
@font-face {
	font-family: 'Dyson';
	src: url('/wp-content/uploads/fonts/Dyson%20Sans%20Modern.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. DESIGN TOKENS
   Centrale plek voor kleuren, spacing, radius, shadow.
   ========================================================================== */

:root {
	/* --- Brand kleuren --- */
	--sp-red-900: #1F0000;
	--sp-red-800: #2D0000;
	--sp-red-700: #4A0000;
	--sp-red-600: #5A0000;
	--sp-red-500: #8B0000;
	--sp-red-400: #A00505;
	--sp-red-300: #C03030;
	--sp-red-200: #E27575;
	--sp-red-100: #FFE5E5;
	--sp-red-50:  #FFF5F5;

	/* --- Neutrals --- */
	--sp-ink-900: #0A0A0B;
	--sp-ink-800: #18181B;
	--sp-ink-700: #27272A;
	--sp-ink-600: #3F3F46;
	--sp-ink-500: #52525B;
	--sp-ink-400: #71717A;
	--sp-ink-300: #A1A1AA;
	--sp-ink-200: #D4D4D8;
	--sp-ink-100: #E4E4E7;
	--sp-ink-50:  #F4F4F5;
	--sp-paper:   #FAFAF9;
	--sp-white:   #FFFFFF;

	/* --- Accents --- */
	--sp-accent-warm:  #C05530;
	--sp-accent-gold:  #D4A05B;
	--sp-accent-blue:  #446084;
	--sp-success:      #627D47;
	--sp-alert:        #B20000;

	/* --- Semantic --- */
	--sp-bg:           var(--sp-paper);
	--sp-surface:      var(--sp-white);
	--sp-text:         var(--sp-ink-800);
	--sp-text-muted:   var(--sp-ink-500);
	--sp-border:       var(--sp-ink-100);
	--sp-primary:      var(--sp-red-500);
	--sp-primary-hover:var(--sp-red-700);
	--sp-on-primary:   var(--sp-white);

	/* --- Typografie --- */
	--sp-font-display: 'Dyson', 'Futura PT', 'Futura', 'Trebuchet MS', sans-serif;
	--sp-font-body:    'Gilroy', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sp-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--sp-text-xs:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--sp-text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--sp-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--sp-text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--sp-text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--sp-text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
	--sp-text-3xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
	--sp-text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
	--sp-text-5xl:  clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
	--sp-text-6xl:  clamp(3.5rem, 2.5rem + 5vw, 6rem);

	--sp-lh-tight:  1.1;
	--sp-lh-snug:   1.25;
	--sp-lh-normal: 1.5;
	--sp-lh-relaxed:1.7;

	--sp-tracking-tight:  -0.02em;
	--sp-tracking-snug:   -0.01em;
	--sp-tracking-normal: 0;
	--sp-tracking-wide:   0.04em;
	--sp-tracking-widest: 0.12em;

	/* --- Spacing scale (8px base) --- */
	--sp-space-0:   0;
	--sp-space-1:   0.25rem;  /* 4 */
	--sp-space-2:   0.5rem;   /* 8 */
	--sp-space-3:   0.75rem;  /* 12 */
	--sp-space-4:   1rem;     /* 16 */
	--sp-space-5:   1.25rem;  /* 20 */
	--sp-space-6:   1.5rem;   /* 24 */
	--sp-space-8:   2rem;     /* 32 */
	--sp-space-10:  2.5rem;   /* 40 */
	--sp-space-12:  3rem;     /* 48 */
	--sp-space-16:  4rem;     /* 64 */
	--sp-space-20:  5rem;     /* 80 */
	--sp-space-24:  6rem;     /* 96 */
	--sp-space-32:  8rem;     /* 128 */
	--sp-space-40:  10rem;    /* 160 */

	/* --- Radius --- */
	--sp-radius-xs:   4px;
	--sp-radius-sm:   8px;
	--sp-radius-md:   12px;
	--sp-radius-lg:   16px;
	--sp-radius-xl:   24px;
	--sp-radius-2xl:  32px;
	--sp-radius-full: 999px;

	/* --- Shadows --- */
	--sp-shadow-sm:  0 1px 2px rgba(15, 15, 17, 0.06);
	--sp-shadow-md:  0 4px 12px rgba(15, 15, 17, 0.08), 0 1px 3px rgba(15, 15, 17, 0.04);
	--sp-shadow-lg:  0 12px 32px rgba(15, 15, 17, 0.12), 0 4px 8px rgba(15, 15, 17, 0.06);
	--sp-shadow-xl:  0 24px 60px rgba(15, 15, 17, 0.16), 0 8px 16px rgba(15, 15, 17, 0.08);
	--sp-shadow-glow:0 0 0 1px rgba(139, 0, 0, 0.1), 0 8px 24px rgba(139, 0, 0, 0.18);

	/* --- Easings --- */
	--sp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--sp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--sp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* --- Containers --- */
	--sp-container-sm: 640px;
	--sp-container-md: 800px;
	--sp-container-lg: 1080px;
	--sp-container-xl: 1280px;
	--sp-container-2xl: 1440px;

	/* --- Z-index --- */
	--sp-z-base:    1;
	--sp-z-raised:  10;
	--sp-z-sticky:  100;
	--sp-z-overlay: 1000;
	--sp-z-modal:   9000;
	--sp-z-toast:   9999;
}


/* ==========================================================================
   3. BASE
   Lichte resets en sane defaults.
   ========================================================================== */

.sp-scope, .sp-scope * {
	box-sizing: border-box;
}

.sp-scope {
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-base);
	line-height: var(--sp-lh-normal);
	color: var(--sp-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.sp-scope ::selection {
	background: var(--sp-red-500);
	color: var(--sp-white);
}


/* ==========================================================================
   4. TYPOGRAPHY
   Klassen om handmatig toe te passen, ipv globale h1/h2 override.
   ========================================================================== */

.sp-display {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: var(--sp-text-6xl);
	line-height: var(--sp-lh-tight);
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-text);
	margin: 0 0 var(--sp-space-6);
}

.sp-headline {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: var(--sp-text-5xl);
	line-height: var(--sp-lh-tight);
	letter-spacing: var(--sp-tracking-tight);
	margin: 0 0 var(--sp-space-5);
}

.sp-h1 {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: var(--sp-text-4xl);
	line-height: var(--sp-lh-tight);
	letter-spacing: var(--sp-tracking-tight);
	margin: 0 0 var(--sp-space-4);
}

.sp-h2 {
	font-family: var(--sp-font-display);
	font-weight: 500;
	font-size: var(--sp-text-3xl);
	line-height: var(--sp-lh-snug);
	letter-spacing: var(--sp-tracking-snug);
	margin: 0 0 var(--sp-space-4);
}

.sp-h3 {
	font-family: var(--sp-font-display);
	font-weight: 500;
	font-size: var(--sp-text-2xl);
	line-height: var(--sp-lh-snug);
	margin: 0 0 var(--sp-space-3);
}

.sp-h4 {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-xl);
	line-height: var(--sp-lh-snug);
	margin: 0 0 var(--sp-space-3);
}

.sp-eyebrow {
	display: inline-block;
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-xs);
	letter-spacing: var(--sp-tracking-widest);
	text-transform: uppercase;
	color: var(--sp-red-500);
	margin: 0 0 var(--sp-space-3);
}

.sp-lead {
	font-family: var(--sp-font-body);
	font-weight: 400;
	font-size: var(--sp-text-xl);
	line-height: var(--sp-lh-relaxed);
	color: var(--sp-text-muted);
	margin: 0 0 var(--sp-space-6);
}

.sp-body {
	font-size: var(--sp-text-base);
	line-height: var(--sp-lh-normal);
	color: var(--sp-text);
}

.sp-small {
	font-size: var(--sp-text-sm);
	color: var(--sp-text-muted);
}

.sp-caption {
	font-size: var(--sp-text-xs);
	letter-spacing: var(--sp-tracking-wide);
	color: var(--sp-text-muted);
	text-transform: uppercase;
}

.sp-quote {
	font-family: var(--sp-font-display);
	font-weight: 400;
	font-size: var(--sp-text-3xl);
	line-height: var(--sp-lh-snug);
	letter-spacing: var(--sp-tracking-tight);
	color: var(--sp-text);
	border-left: 4px solid var(--sp-red-500);
	padding-left: var(--sp-space-6);
	margin: var(--sp-space-8) 0;
}


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */

.sp-container {
	width: 100%;
	max-width: var(--sp-container-xl);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.sp-container-sm  { max-width: var(--sp-container-sm); }
.sp-container-md  { max-width: var(--sp-container-md); }
.sp-container-lg  { max-width: var(--sp-container-lg); }
.sp-container-2xl { max-width: var(--sp-container-2xl); }

.sp-stack-2  > * + * { margin-top: var(--sp-space-2); }
.sp-stack-3  > * + * { margin-top: var(--sp-space-3); }
.sp-stack-4  > * + * { margin-top: var(--sp-space-4); }
.sp-stack-6  > * + * { margin-top: var(--sp-space-6); }
.sp-stack-8  > * + * { margin-top: var(--sp-space-8); }
.sp-stack-12 > * + * { margin-top: var(--sp-space-12); }

.sp-grid {
	display: grid;
	gap: var(--sp-space-6);
}
.sp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.sp-flex      { display: flex; gap: var(--sp-space-3); }
.sp-flex-col  { display: flex; flex-direction: column; gap: var(--sp-space-3); }
.sp-flex-center { display: flex; align-items: center; justify-content: center; }
.sp-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sp-flex-wrap { flex-wrap: wrap; }

.sp-text-center { text-align: center; }
.sp-text-left   { text-align: left; }
.sp-text-right  { text-align: right; }


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-space-2);
	padding: var(--sp-space-3) var(--sp-space-5);
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-base);
	letter-spacing: var(--sp-tracking-snug);
	border-radius: var(--sp-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s var(--sp-ease-spring),
				background 0.25s var(--sp-ease-out),
				color 0.25s var(--sp-ease-out),
				border-color 0.25s var(--sp-ease-out),
				box-shadow 0.25s var(--sp-ease-out);
}
.sp-btn:active { transform: translateY(1px) scale(0.98); }
.sp-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.3);
}

.sp-btn-primary {
	background: var(--sp-primary);
	color: var(--sp-on-primary);
}
.sp-btn-primary:hover {
	background: var(--sp-primary-hover);
	box-shadow: var(--sp-shadow-glow);
}

.sp-btn-secondary {
	background: transparent;
	color: var(--sp-primary);
	border-color: var(--sp-primary);
}
.sp-btn-secondary:hover {
	background: var(--sp-red-50);
}

.sp-btn-ghost {
	background: transparent;
	color: var(--sp-text);
}
.sp-btn-ghost:hover {
	background: var(--sp-ink-50);
}

.sp-btn-dark {
	background: var(--sp-ink-900);
	color: var(--sp-white);
}
.sp-btn-dark:hover {
	background: var(--sp-ink-700);
}

.sp-btn-lg { padding: var(--sp-space-4) var(--sp-space-8); font-size: var(--sp-text-lg); }
.sp-btn-sm { padding: var(--sp-space-2) var(--sp-space-4); font-size: var(--sp-text-sm); }

.sp-btn-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--sp-radius-full);
}


/* ==========================================================================
   7. CARDS
   ========================================================================== */

.sp-card {
	background: var(--sp-surface);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	padding: var(--sp-space-6);
	transition: transform 0.3s var(--sp-ease-out), box-shadow 0.3s var(--sp-ease-out);
}
.sp-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sp-shadow-md);
}

.sp-card-elevated {
	border: none;
	box-shadow: var(--sp-shadow-md);
}
.sp-card-elevated:hover {
	box-shadow: var(--sp-shadow-lg);
}

.sp-card-glass {
	background: linear-gradient(135deg, rgba(31, 0, 0, 0.85), rgba(139, 0, 0, 0.85));
	color: var(--sp-white);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--sp-shadow-lg);
}

.sp-card-dark {
	background: var(--sp-ink-900);
	color: var(--sp-white);
	border-color: var(--sp-ink-700);
}

.sp-card-feature {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-3);
}
.sp-card-feature .sp-feature-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: var(--sp-radius-md);
	background: var(--sp-red-50);
	color: var(--sp-red-500);
}
.sp-card-feature.sp-card-dark .sp-feature-icon {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sp-red-200);
}


/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

.sp-section {
	padding: clamp(4rem, 8vw, 8rem) 0;
}
.sp-section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sp-section-loose { padding: clamp(6rem, 12vw, 12rem) 0; }

.sp-section-dark {
	background: var(--sp-ink-900);
	color: var(--sp-white);
}
.sp-section-dark .sp-eyebrow { color: var(--sp-red-300); }
.sp-section-dark .sp-lead    { color: var(--sp-ink-300); }

.sp-section-brand {
	background: linear-gradient(135deg, var(--sp-red-900) 0%, var(--sp-red-600) 50%, var(--sp-red-500) 100%);
	color: var(--sp-white);
	position: relative;
	overflow: hidden;
}
.sp-section-brand::before {
	content: "";
	position: absolute;
	inset: -20%;
	background: radial-gradient(ellipse at 30% 20%, rgba(255, 80, 80, 0.25), transparent 60%),
		radial-gradient(ellipse at 70% 80%, rgba(255, 200, 100, 0.12), transparent 50%);
	pointer-events: none;
}
.sp-section-brand .sp-eyebrow { color: rgba(255, 255, 255, 0.7); }
.sp-section-brand .sp-lead    { color: rgba(255, 255, 255, 0.85); }

.sp-section-hero {
	padding: clamp(6rem, 14vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.sp-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-space-6);
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--sp-ink-900);
	color: var(--sp-white);
	border-radius: var(--sp-radius-2xl);
	text-align: center;
}


/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.sp-footer {
	background: var(--sp-ink-900);
	color: var(--sp-ink-300);
	padding: clamp(4rem, 7vw, 6rem) 0 0;
	font-family: var(--sp-font-body);
	font-size: var(--sp-text-sm);
}

.sp-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--sp-space-12);
	padding-bottom: var(--sp-space-12);
}

@media (max-width: 880px) {
	.sp-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-space-8);
	}
}
@media (max-width: 520px) {
	.sp-footer-grid {
		grid-template-columns: 1fr;
	}
}

.sp-footer h4 {
	font-family: var(--sp-font-body);
	font-weight: 600;
	font-size: var(--sp-text-sm);
	letter-spacing: var(--sp-tracking-wide);
	text-transform: uppercase;
	color: var(--sp-white);
	margin: 0 0 var(--sp-space-4);
}

.sp-footer a {
	color: var(--sp-ink-300);
	text-decoration: none;
	transition: color 0.2s var(--sp-ease-out);
}
.sp-footer a:hover {
	color: var(--sp-white);
}

.sp-footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-4);
	max-width: 320px;
}
.sp-footer-brand .sp-footer-logo {
	font-family: var(--sp-font-display);
	font-weight: 600;
	font-size: var(--sp-text-2xl);
	color: var(--sp-white);
	letter-spacing: var(--sp-tracking-tight);
}
.sp-footer-brand p {
	margin: 0;
	color: var(--sp-ink-300);
	line-height: var(--sp-lh-relaxed);
}

.sp-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2);
}

.sp-footer-newsletter {
	display: flex;
	gap: var(--sp-space-2);
	margin-top: var(--sp-space-3);
}
.sp-footer-newsletter input {
	flex: 1;
	padding: var(--sp-space-3) var(--sp-space-4);
	border-radius: var(--sp-radius-md);
	border: 1px solid var(--sp-ink-700);
	background: var(--sp-ink-800);
	color: var(--sp-white);
	font-family: inherit;
	font-size: var(--sp-text-sm);
}
.sp-footer-newsletter input::placeholder { color: var(--sp-ink-500); }
.sp-footer-newsletter input:focus {
	outline: none;
	border-color: var(--sp-red-500);
	box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.25);
}

.sp-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-space-6) 0;
	border-top: 1px solid var(--sp-ink-700);
	flex-wrap: wrap;
	gap: var(--sp-space-4);
}
.sp-footer-bottom .sp-footer-copy {
	color: var(--sp-ink-400);
	font-size: var(--sp-text-xs);
}

/* Juridische links in de onderbalk. Bewust even ingetogen als de copyright:
   ze horen vindbaar te zijn, maar mogen geen aandacht wegnemen van het
   footermenu erboven. */
.sp-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-2) var(--sp-space-5);
}

.sp-footer-legal a {
	color: var(--sp-ink-400);
	font-size: var(--sp-text-xs);
	text-decoration: none;
	transition: color 0.25s var(--sp-ease-out);
}

.sp-footer-legal a:hover,
.sp-footer-legal a:focus-visible {
	color: var(--sp-white);
}

/* Onder de 700px vallen de drie blokken onder elkaar; dan links uitlijnen in
   plaats van uit elkaar geduwd worden. */
@media (max-width: 700px) {
	.sp-footer-bottom {
		justify-content: flex-start;
	}
}

.sp-footer-socials {
	display: flex;
	gap: var(--sp-space-2);
}
.sp-footer-socials a {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: var(--sp-radius-full);
	border: 1px solid var(--sp-ink-700);
	color: var(--sp-ink-300);
	transition: all 0.25s var(--sp-ease-out);
}
.sp-footer-socials a:hover {
	background: var(--sp-red-500);
	border-color: var(--sp-red-500);
	color: var(--sp-white);
	transform: translateY(-2px);
}


/* ==========================================================================
   10. LUCIDE ICONS
   Lucide laadt SVG iconen. Onderstaande regels stylen ze.
   ========================================================================== */

[data-lucide],
.sp-icon,
.lucide {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.2em;
	stroke-width: 2;
	stroke: currentColor;
	fill: none;
	flex-shrink: 0;
}

.sp-icon-sm  { width: 1em;    height: 1em; }
.sp-icon-md  { width: 1.5em;  height: 1.5em; }
.sp-icon-lg  { width: 2em;    height: 2em; }
.sp-icon-xl  { width: 3em;    height: 3em; }


/* ==========================================================================
   11. BADGES / TAGS
   ========================================================================== */

.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-space-2);
	padding: var(--sp-space-1) var(--sp-space-3);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-wide);
	text-transform: uppercase;
	border-radius: var(--sp-radius-full);
	background: var(--sp-red-50);
	color: var(--sp-red-700);
}

.sp-badge-glass {
	background: rgba(255, 255, 255, 0.1);
	color: var(--sp-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.sp-badge-dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}


/* ==========================================================================
   12. ANIMATIONS
   ========================================================================== */

@keyframes sp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes sp-slide-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes sp-scale-in {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

.sp-fade-in   { animation: sp-fade-in 0.6s var(--sp-ease-out) both; }
.sp-slide-up  { animation: sp-slide-up 0.6s var(--sp-ease-out) both; }
.sp-scale-in  { animation: sp-scale-in 0.6s var(--sp-ease-spring) both; }

.sp-delay-1 { animation-delay: 0.1s; }
.sp-delay-2 { animation-delay: 0.2s; }
.sp-delay-3 { animation-delay: 0.3s; }
.sp-delay-4 { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.sp-fade-in, .sp-slide-up, .sp-scale-in {
		animation: none;
	}
}


/* ==========================================================================
   13. UTILITIES
   ========================================================================== */

.sp-mt-0  { margin-top: 0; }
.sp-mt-4  { margin-top: var(--sp-space-4); }
.sp-mt-8  { margin-top: var(--sp-space-8); }
.sp-mt-12 { margin-top: var(--sp-space-12); }

.sp-mb-0  { margin-bottom: 0; }
.sp-mb-4  { margin-bottom: var(--sp-space-4); }
.sp-mb-8  { margin-bottom: var(--sp-space-8); }
.sp-mb-12 { margin-bottom: var(--sp-space-12); }

.sp-text-primary { color: var(--sp-primary); }
.sp-text-muted   { color: var(--sp-text-muted); }
.sp-text-white   { color: var(--sp-white); }

.sp-rounded-sm { border-radius: var(--sp-radius-sm); }
.sp-rounded-md { border-radius: var(--sp-radius-md); }
.sp-rounded-lg { border-radius: var(--sp-radius-lg); }
.sp-rounded-xl { border-radius: var(--sp-radius-xl); }
.sp-rounded-full { border-radius: var(--sp-radius-full); }

.sp-shadow-sm { box-shadow: var(--sp-shadow-sm); }
.sp-shadow-md { box-shadow: var(--sp-shadow-md); }
.sp-shadow-lg { box-shadow: var(--sp-shadow-lg); }

.sp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}