/**
 * tcg-base.css
 * CSS variables (design tokens), a minimal reset, typography, accessibility
 * utilities, the .tcg-container system, section spacing, focus states, and
 * reduced-motion rules.
 *
 * Nothing in this file targets a bare element selector beyond the reset
 * (html, body, img, etc. — never div/a/button/input/.container/.card),
 * per the hard CSS-namespace rule: all component styling lives in
 * tcg-components.css under .tcg-* classes only.
 */

/* -----------------------------------------------------------------------
 * Design tokens
 * -------------------------------------------------------------------- */
:root {
	/* Backgrounds */
	--tcg-bg-primary: #000000;
	--tcg-bg-secondary: #080808;
	--tcg-bg-tertiary: #0D0D0D;
	--tcg-bg-elevated: #111111;
	--tcg-bg-elevated-2: #151515;

	/* Text */
	--tcg-text-primary: #FFFFFF;
	--tcg-text-secondary: #A0A0A0;

	/* Accents */
	--tcg-accent-purple: #8B5CF6;
	--tcg-accent-cyan: #22D3EE;
	--tcg-gradient-primary: linear-gradient(135deg, #8B5CF6, #22D3EE);

	/* Spacing scale (8px base unit) */
	--tcg-space-1: 8px;
	--tcg-space-2: 16px;
	--tcg-space-3: 24px;
	--tcg-space-4: 32px;
	--tcg-space-5: 48px;
	--tcg-space-6: 64px;
	--tcg-space-7: 96px;

	/* Layout */
	--tcg-container-max: 1280px;
	--tcg-container-pad: 32px;
	--tcg-radius-sm: 8px;
	--tcg-radius-md: 16px;
	--tcg-radius-lg: 24px;
	--tcg-header-height: 80px;
	--tcg-mobile-cta-height: 64px;

	/* Motion */
	--tcg-transition-fast: 150ms ease;
	--tcg-transition-base: 250ms ease;
	--tcg-transition-slow: 400ms ease;

	/* Shadows */
	--tcg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
	--tcg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
	--tcg-shadow-glow-purple: 0 0 32px rgba(139, 92, 246, 0.25);

	/* Z-index scale */
	--tcg-z-header: 100;
	--tcg-z-mobile-nav: 110;
	--tcg-z-mobile-cta: 90;
	--tcg-z-skip-link: 200;

	/* Typography */
	--tcg-font-heading: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--tcg-font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 767px) {
	:root {
		--tcg-container-pad: 16px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--tcg-container-pad: 24px;
	}
}

/* -----------------------------------------------------------------------
 * Self-hosted fonts — safe fallback if woff2 files aren't present yet.
 * The stack below (system-ui, etc.) covers the site with no layout break
 * even if @font-face never resolves; font-display: swap avoids invisible
 * text while loading. See inc/enqueue.php for the file-exists guard that
 * decides whether fonts.css even gets requested.
 * -------------------------------------------------------------------- */
@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/space-grotesk-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/space-grotesk-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------
 * Minimal reset
 * -------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--tcg-bg-primary);
	color: var(--tcg-text-primary);
	font-family: var(--tcg-font-body), system-ui, -apple-system, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tcg-font-heading), system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--tcg-space-3);
	color: var(--tcg-text-primary);
}

p {
	margin: 0 0 var(--tcg-space-3);
	color: var(--tcg-text-secondary);
}

/* -----------------------------------------------------------------------
 * Fluid type scale
 * -------------------------------------------------------------------- */
.tcg-h1, h1 {
	font-size: clamp(2.5rem, 5.5vw, 4.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tcg-h2, h2 {
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 600;
}

.tcg-h3, h3 {
	font-size: 1.5rem;
	font-weight: 600;
}

.tcg-body-lg {
	font-size: 1.125rem;
}

.tcg-body-sm {
	font-size: 0.875rem;
}

/* -----------------------------------------------------------------------
 * Container + section rhythm
 * -------------------------------------------------------------------- */
.tcg-container {
	max-width: var(--tcg-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--tcg-container-pad);
	padding-right: var(--tcg-container-pad);
}

.tcg-main {
	padding-top: var(--tcg-space-6);
	padding-bottom: var(--tcg-space-7);
}

.tcg-section {
	padding-top: var(--tcg-space-7);
	padding-bottom: var(--tcg-space-7);
}

.tcg-section--alt {
	background-color: var(--tcg-bg-secondary);
}

/* -----------------------------------------------------------------------
 * Accessibility utilities
 * -------------------------------------------------------------------- */
.tcg-skip-link {
	position: absolute;
	top: -100px;
	left: var(--tcg-space-2);
	z-index: var(--tcg-z-skip-link);
	background: var(--tcg-accent-purple);
	color: #ffffff;
	padding: var(--tcg-space-2) var(--tcg-space-3);
	border-radius: var(--tcg-radius-sm);
	text-decoration: none;
	transition: top var(--tcg-transition-fast);
}

.tcg-skip-link:focus {
	top: var(--tcg-space-2);
}

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

/* Visible, consistent focus state across every interactive TCG element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tcg-button:focus-visible,
.tcg-nav__toggle:focus-visible {
	outline: 2px solid var(--tcg-accent-cyan);
	outline-offset: 2px;
	border-radius: var(--tcg-radius-sm);
}

/* -----------------------------------------------------------------------
 * Reduced motion — disables/shortens animation, never blocks interaction.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------------------
 * Misc shared states used by templates directly
 * -------------------------------------------------------------------- */
.tcg-empty-state {
	color: var(--tcg-text-secondary);
	padding: var(--tcg-space-6) 0;
	text-align: center;
}