/* ==========================================================================
   Anas Portfolio Widgets — design tokens
   Values taken 1:1 from the production portfolio's design system
   (Next.js build): one source of truth for every widget. Widgets
   must use these variables, never raw hex values of their own.
   ========================================================================== */

/* Box sizing reset — matches the Next.js (Tailwind preflight)
   baseline the design was measured against. */
*, *::before, *::after { box-sizing: border-box; }

:root {
	/* Colors */
	--apw-brand: #21d685;
	--apw-brand-deep: #1baf6d;
	--apw-brand-text: #0a7a4a; /* AA-safe green for text/links (5.39:1 on white) */
	--apw-navy: #182232;
	--apw-ink: #2f3846;
	--apw-ink-soft: #727881;
	--apw-mist: #f3f4f6;
	--apw-mint: #e8f8f0;
	--apw-paper: #ffffff;
	--apw-border: rgba(47, 56, 70, 0.14);

	/* Type — Inter only, hierarchy from size and weight (max 700) */
	--apw-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--apw-text-display: clamp(2.75rem, 1.75rem + 5vw, 3.75rem);
	--apw-text-h1: clamp(2.25rem, 1.5rem + 3.75vw, 3rem);
	--apw-text-h2: clamp(1.75rem, 1.375rem + 1.875vw, 2.25rem);
	--apw-text-h3: 1.5rem;
	--apw-text-h4: 1.125rem;
	--apw-text-lead: 1.25rem;
	--apw-text-body: 1rem;
	--apw-text-small: 0.875rem;

	/* Space */
	--apw-container: 76rem; /* 1216px */
	--apw-container-narrow: 48rem; /* 768px */
	--apw-section: clamp(2.5rem, 1.5rem + 4vw, 4rem); /* 40 -> 64px */

	/* Shape */
	--apw-radius-card: 0.75rem; /* 12px */
	--apw-radius-pill: 9999px;

	/* Shadows — two-layer, navy-based, soft (portfolio signature) */
	--apw-shadow-card: 0 1px 2px rgb(24 34 50 / 0.06), 0 8px 24px -12px rgb(24 34 50 / 0.18);
	--apw-shadow-lift: 0 2px 4px rgb(24 34 50 / 0.08), 0 16px 40px -16px rgb(24 34 50 / 0.28);
	--apw-shadow-glow: 0 0 28px -8px rgb(33 214 133 / 0.55), 0 12px 40px -16px rgb(24 34 50 / 0.55);
	--apw-shadow-glow-sm: 0 0 18px -6px rgb(33 214 133 / 0.4), 0 6px 20px -10px rgb(24 34 50 / 0.4);

	/* Motion */
	--apw-duration-instant: 100ms;
	--apw-duration-fast: 180ms;
	--apw-duration-base: 300ms;
	--apw-duration-slow: 500ms;
	--apw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--apw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Section wrapper rhythm shared by widgets that act as full sections */
.apw-section {
	padding-block: var(--apw-section);
	font-family: var(--apw-font);
	color: var(--apw-navy);
}

.apw-section--mist {
	background: var(--apw-mist);
}

.apw-wrap {
	max-width: var(--apw-container);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 640px) {
	.apw-wrap { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.apw-wrap { padding-inline: 2rem; }
}

/* Focus visibility — one rule for everything the plugin renders */
.apw-section a:focus-visible,
.apw-section button:focus-visible,
.apw-header a:focus-visible,
.apw-header button:focus-visible,
.apw-footer a:focus-visible,
.apw-case a:focus-visible,
.apw-case button:focus-visible {
	outline: 2px solid var(--apw-brand);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--apw-brand);
	color: var(--apw-navy);
}

@media (prefers-reduced-motion: reduce) {
	.apw-section *, .apw-header *, .apw-footer *, .apw-hero *, .apw-case *, .apw-marquee * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}