/* =============================================================================
   WebTech Design System — Tokens
   Source: Stitch DESIGN.md (verbatim)
   ========================================================================== */

:root {
	/* ---- Color: Surface family ---- */
	--wt-surface: #faf8ff;
	--wt-surface-dim: #d2d9f4;
	--wt-surface-bright: #faf8ff;
	--wt-surface-container-lowest: #ffffff;
	--wt-surface-container-low: #f2f3ff;
	--wt-surface-container: #eaedff;
	--wt-surface-container-high: #e2e7ff;
	--wt-surface-container-highest: #dae2fd;
	--wt-surface-variant: #dae2fd;

	/* ---- Color: On-surface (text) ---- */
	--wt-on-surface: #131b2e;
	--wt-on-surface-variant: #444653;
	--wt-inverse-surface: #283044;
	--wt-inverse-on-surface: #eef0ff;

	/* ---- Color: Outline (borders) ---- */
	--wt-outline: #757684;
	--wt-outline-variant: #c4c5d5;

	/* ---- Color: Primary (Royal Blue) ---- */
	--wt-primary: #00288e;
	--wt-on-primary: #ffffff;
	--wt-primary-container: #1e40af;
	--wt-on-primary-container: #a8b8ff;
	--wt-inverse-primary: #b8c4ff;
	--wt-primary-fixed: #dde1ff;
	--wt-primary-fixed-dim: #b8c4ff;
	--wt-on-primary-fixed: #001453;
	--wt-on-primary-fixed-variant: #173bab;
	--wt-surface-tint: #3755c3;
	--wt-bright-royal: #3b82f6;

	/* ---- Color: Secondary ---- */
	--wt-secondary: #4059aa;
	--wt-on-secondary: #ffffff;
	--wt-secondary-container: #8fa7fe;
	--wt-on-secondary-container: #1d3989;
	--wt-secondary-fixed: #dce1ff;
	--wt-secondary-fixed-dim: #b6c4ff;
	--wt-on-secondary-fixed: #00164e;
	--wt-on-secondary-fixed-variant: #264191;

	/* ---- Color: Tertiary (Amber accent) ---- */
	--wt-tertiary: #4c2e00;
	--wt-on-tertiary: #ffffff;
	--wt-tertiary-container: #6b4200;
	--wt-on-tertiary-container: #ffa929;
	--wt-tertiary-fixed: #ffddb8;
	--wt-tertiary-fixed-dim: #ffb95f;
	--wt-on-tertiary-fixed: #2a1700;
	--wt-on-tertiary-fixed-variant: #653e00;
	--wt-amber: #ffa929;

	/* ---- Color: Error ---- */
	--wt-error: #ba1a1a;
	--wt-on-error: #ffffff;
	--wt-error-container: #ffdad6;
	--wt-on-error-container: #93000a;

	/* ---- Color: Background ---- */
	--wt-background: #faf8ff;
	--wt-on-background: #131b2e;

	/* ---- Typography ---- */
	--wt-font-display: "Sora", system-ui, -apple-system, sans-serif;
	--wt-font-body: "Inter", system-ui, -apple-system, sans-serif;
	--wt-font-icons: "Material Symbols Outlined";

	/* Type scale */
	--wt-fs-display-hero: 72px;
	--wt-fs-display-hero-mobile: 44px;
	--wt-fs-stat-lg: 96px;
	--wt-fs-stat-md: 48px;
	--wt-fs-headline-lg: 48px;
	--wt-fs-headline-md: 32px;
	--wt-fs-body-lg: 18px;
	--wt-fs-body-md: 16px;
	--wt-fs-label-caps: 12px;

	/* Line heights */
	--wt-lh-tight: 1.1;
	--wt-lh-snug: 1.2;
	--wt-lh-normal: 1.3;
	--wt-lh-body: 1.5;
	--wt-lh-relaxed: 1.6;

	/* Letter spacing */
	--wt-tracking-tight: -0.04em;
	--wt-tracking-snug: -0.02em;
	--wt-tracking-tightish: -0.01em;
	--wt-tracking-wide: 0.05em;

	/* Weights */
	--wt-fw-regular: 400;
	--wt-fw-medium: 500;
	--wt-fw-semibold: 600;
	--wt-fw-bold: 700;
	--wt-fw-extrabold: 800;

	/* ---- Radius ---- */
	--wt-radius-sm: 0.25rem;   /* 4px */
	--wt-radius-md: 0.5rem;    /* 8px */
	--wt-radius-lg: 0.75rem;   /* 12px — inputs */
	--wt-radius-xl: 1rem;      /* 16px — cards */
	--wt-radius-2xl: 1.5rem;   /* 24px */
	--wt-radius-full: 9999px;

	/* ---- Spacing (Stack scale) ---- */
	--wt-stack-xs: 4px;
	--wt-stack-sm: 8px;
	--wt-stack-md: 16px;
	--wt-stack-lg: 24px;
	--wt-stack-xl: 48px;
	--wt-stack-2xl: 96px;
	--wt-gutter: 32px;
	--wt-margin-mobile: 20px;
	--wt-container-max: 1280px;

	/* ---- Shadows ---- */
	--wt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--wt-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--wt-shadow-lg: 0 12px 32px rgba(0, 40, 142, 0.08), 0 4px 12px rgba(15, 23, 42, 0.06);
	--wt-shadow-xl: 0 24px 64px rgba(0, 40, 142, 0.12), 0 8px 24px rgba(15, 23, 42, 0.08);
	--wt-shadow-primary: 0 12px 32px rgba(0, 40, 142, 0.20);

	/* ---- Transitions ---- */
	--wt-transition-fast: 150ms ease;
	--wt-transition-base: 250ms ease;
	--wt-transition-slow: 400ms ease;

	/* ---- Z-index scale ---- */
	--wt-z-base: 1;
	--wt-z-dropdown: 100;
	--wt-z-sticky-header: 500;
	--wt-z-mobile-menu: 800;
	--wt-z-mobile-menu-overlay: 799;
	--wt-z-modal: 900;
	--wt-z-accessibility-widget: 1000;
	--wt-z-skip-link: 10000;

	/* ---- Focus ring (WCAG 2.2 AA) ---- */
	--wt-focus-ring-color: var(--wt-amber);
	--wt-focus-ring-width: 3px;
	--wt-focus-ring-offset: 2px;
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wt-transition-fast: 0ms;
		--wt-transition-base: 0ms;
		--wt-transition-slow: 0ms;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}