/* ==========================================================================
   TEAM360 — Design tokens & base reset
   ========================================================================== */

:root {
	/* Brand palette */
	--c-bg: #050816;
	--c-bg-alt: #080b1e;
	--c-card: #0D1224;
	--c-card-hover: #121834;
	--c-primary: #4F46E5;
	--c-primary-rgb: 79, 70, 229;
	--c-secondary: #00E5FF;
	--c-secondary-rgb: 0, 229, 255;
	--c-accent: #8B5CF6;
	--c-accent-rgb: 139, 92, 246;
	--c-success: #22C55E;
	--c-text: #FFFFFF;
	--c-text-muted: #B5B5B5;
	--c-border: rgba(255, 255, 255, .08);
	--c-border-strong: rgba(255, 255, 255, .16);

	--gradient-primary: linear-gradient(135deg, var(--c-primary), var(--c-accent));
	--gradient-brand: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 50%, var(--c-secondary) 100%);
	--gradient-text: linear-gradient(90deg, var(--c-secondary), var(--c-accent) 60%, var(--c-primary));
	--gradient-glow: radial-gradient(circle at center, rgba(var(--c-primary-rgb), .35), transparent 70%);

	/* Typography */
	--font-display: 'Space Grotesk', 'Inter', sans-serif;
	--font-heading: 'Poppins', 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;

	--fs-xs: clamp(.75rem, .72rem + .1vw, .8125rem);
	--fs-sm: clamp(.875rem, .84rem + .15vw, .9375rem);
	--fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
	--fs-lg: clamp(1.125rem, 1.06rem + .3vw, 1.3rem);
	--fs-xl: clamp(1.4rem, 1.3rem + .5vw, 1.75rem);
	--fs-2xl: clamp(1.8rem, 1.6rem + 1vw, 2.5rem);
	--fs-3xl: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
	--fs-4xl: clamp(2.8rem, 2.1rem + 3.2vw, 5rem);

	/* Spacing scale */
	--space-3xs: .25rem;
	--space-2xs: .5rem;
	--space-xs: .75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 9rem;

	/* Layout */
	--container-max: 1280px;
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-full: 999px;

	/* Motion */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-fast: .25s;
	--dur-base: .45s;
	--dur-slow: .8s;

	--navbar-h: 88px;
	--navbar-h-scrolled: 68px;

	color-scheme: dark;
}

/* Reduced-motion / theme-toggle escape hatch used by main.js */
.reduce-motion,
.reduce-motion * {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	:root:not(.force-motion) * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

html.has-lenis {
	scroll-behavior: auto;
}

body {
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.65;
	overflow-x: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Ambient background: subtle grid + noise, purely decorative (aria-hidden via ::before) */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%);
	pointer-events: none;
}

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

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p {
	color: var(--c-text-muted);
}

::selection {
	background: var(--c-primary);
	color: #fff;
}

/* Accessible focus states everywhere — never remove outline without a visible replacement. */
:focus-visible {
	outline: 2px solid var(--c-secondary);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 9999;
	background: var(--c-primary);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: var(--radius-sm);
	transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	top: 1rem;
}

/* Custom scrollbar (progressive enhancement) */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--c-bg);
}

::-webkit-scrollbar-thumb {
	background: var(--c-border-strong);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--c-primary);
}