/*
 * Transformohu Shpi — Design Tokens (v2 — Senior Designer Direction)
 *
 * All visual decisions cascade from this file. Never hardcode values
 * elsewhere — always reference var(--*).
 *
 * When real brand navy/red hex codes arrive, only the two variables
 * marked PLACEHOLDER need updating. Cascade does the rest.
 */

:root {
	/* === Color tokens === */
	--color-primary-dark: #131A2B;     /* PLACEHOLDER — deep navy */
	--color-primary-accent: #C8302D;   /* PLACEHOLDER — red */
	--color-white: #FFFFFF;
	--color-off-white: #FAFAF7;
	--color-text-primary: #131A2B;
	--color-text-secondary: #4A4F5C;
	--color-text-muted: #6B7280;
	--color-border-light: #E5E7EB;
	--color-border-strong: #D1D5DB;
	--color-success: #16A34A;
	--color-error: #DC2626;
	--color-warning: #F59E0B;

	/* Decoded RGB triplets for rgba() composition */
	--rgb-primary-dark: 19, 26, 43;
	--rgb-primary-accent: 200, 48, 45;
	--rgb-white: 255, 255, 255;

	/* === Typography === */
	--font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-family-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Fluid type scale via clamp(min, preferred, max). */
	--text-hero: clamp(44px, 5vw, 72px);
	--text-h1: clamp(36px, 4vw, 52px);
	--text-h2: clamp(30px, 3.5vw, 44px);
	--text-h3: clamp(22px, 2.6vw, 28px);
	--text-h4: clamp(20px, 2.2vw, 22px);
	--text-body-lg: clamp(18px, 2vw, 20px);
	--text-body: 16px;
	--text-body-sm: 14px;
	--text-caption: 13px;
	--text-eyebrow: 12px;

	/* Specific display sizes for stat callouts (authority deep-dive blocks) */
	--text-stat-giant: clamp(64px, 8vw, 96px);
	--text-step-num: clamp(64px, 7vw, 96px);
	--text-offer-num: clamp(56px, 6vw, 80px);
	--text-tier-price: clamp(48px, 5vw, 64px);
	--text-tier-price-small: clamp(40px, 4.5vw, 56px);

	--line-height-hero: 1.05;
	--line-height-h1: 1.1;
	--line-height-h2: 1.15;
	--line-height-h3: 1.25;
	--line-height-h4: 1.35;
	--line-height-body-lg: 1.55;
	--line-height-body: 1.6;
	--line-height-body-sm: 1.5;
	--line-height-caption: 1.4;

	--letter-spacing-hero: -0.02em;
	--letter-spacing-h1: -0.01em;
	--letter-spacing-h2: -0.01em;
	--letter-spacing-default: 0;
	--letter-spacing-uppercase: 0.05em;
	--letter-spacing-uppercase-wide: 0.1em;

	/* === Spacing scale === */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;
	--space-5xl: 128px;

	/* Section padding — golden-ratio rhythm 64-96-128 */
	--section-py-tight: var(--space-2xl);    /* 48px — authority strip */
	--section-py-default: var(--space-4xl);  /* 96px — most sections */
	--section-py-emphasis: var(--space-5xl); /* 128px — pricing, final CTA */

	/* Mobile reduces ~30%. */
	--section-py-tight-mobile: var(--space-xl);    /* 32px */
	--section-py-default-mobile: var(--space-3xl); /* 64px */
	--section-py-emphasis-mobile: var(--space-4xl); /* 96px */

	/* Section padding (horizontal) */
	--section-px-mobile: 16px;
	--section-px-tablet: 20px;
	--section-px-desktop: 24px;

	/* === Container widths === */
	--container-narrow: 720px;
	--container-default: 1024px;
	--container-wide: 1280px;

	/* === Border radii === */
	--radius-pill: 9999px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* === Shadow tokens === */
	--shadow-sm: 0 1px 2px rgba(19, 26, 43, 0.05);
	--shadow-md: 0 4px 8px rgba(19, 26, 43, 0.08);
	--shadow-lg: 0 8px 24px rgba(19, 26, 43, 0.08);
	--shadow-xl: 0 16px 48px rgba(19, 26, 43, 0.12);
	--shadow-accent: 0 4px 16px rgba(200, 48, 45, 0.20);
	--shadow-accent-lg: 0 12px 32px rgba(200, 48, 45, 0.15);
	--shadow-navy-lg: 0 12px 32px rgba(19, 26, 43, 0.15);

	/* === Transitions === */
	--transition-fast: 150ms ease-out;
	--transition-default: 200ms ease-out;
	--transition-slow: 300ms ease-out;
	--transition-section: 400ms ease-out;
	--transition-card: 250ms ease-out;
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* === Body baseline === */
	font-family: var(--font-family-base);
	font-size: var(--text-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Honor reduced motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Smooth scroll for in-page anchor links. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

/* Resets — minimal, opinionated. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-primary-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

*:focus-visible {
	outline: 2px solid var(--color-primary-accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Skip link — visible on focus only */
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-primary-dark);
	color: var(--color-white);
	padding: var(--space-sm) var(--space-md);
	z-index: 100;
	border-radius: 0 0 var(--radius-md) 0;
	font-weight: var(--font-weight-medium);
}

.skip-link:focus {
	top: 0;
}

/* Visually hidden helper */
.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;
}

/* Default scroll-reveal initial state — overridden by IntersectionObserver
   adding the .is-visible class. */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--transition-section), transform var(--transition-section);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered reveal child delays. */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 500ms; }