/* ==========================================================================
   THE NEXUS — Design tokens
   Direct CSS implementation of design-system/02-foundations-tokens.md and
   03-motion-and-glass.md. Values here are not to be edited ad hoc per
   component — change the source doc first, then this file.
   ========================================================================== */

/*
 * @font-face rules intentionally live only in mu-plugins/nexus-design-tokens.php
 * (assets: uploads/fonts/nexus-fonts.css), which loads site-wide at priority 5 —
 * before this stylesheet on every nx-page. A duplicate set used to live here too;
 * it declared Montana as OTF-only with a wider (700 800) weight range, which won
 * the font-matching cascade over the canonical woff2+otf rule and made every
 * Montana heading silently load the heavier uncompressed OTF. Removed rather than
 * fixed in place — one font system, not two kept in sync by hand.
 */

:root {
	/* 2.1 — color: brand accent, Nexus Gold */
	--color-gold-100: #F1E4C4;
	--color-gold-300: #DEC17F;
	--color-gold-500: #C9A24B;
	--color-gold-700: #9C7A34;
	--color-gold-900: #5E491F;

	/* secondary accent, Ion */
	--color-ion-300: #B8DBFF;
	--color-ion-500: #6FA8FF;
	--color-ion-700: #3D6FC2;

	/* neutral / surface (dark, primary) */
	--color-void: #000000;
	--color-bg: #050506;
	--color-surface-1: #0D0D10;
	--color-surface-2: #131316;
	--color-surface-3: #1A1A1E;
	--color-glass: rgba(255,255,255,0.04);
	--color-border-subtle: rgba(255,255,255,0.08);
	--color-border-default: rgba(255,255,255,0.14);
	--color-border-strong: rgba(255,255,255,0.24);

	/* text */
	--color-text-primary: #F5F4F1;
	--color-text-secondary: rgba(245,244,241,0.72);
	--color-text-muted: rgba(245,244,241,0.48);
	--color-text-placeholder: rgba(245,244,241,0.34);
	--color-text-disabled: rgba(245,244,241,0.24);

	/* semantic */
	--color-success: #4CC38A;
	--color-warning: #E0A526;
	--color-danger: #E5484D;
	--color-info: #5B9DF5;

	/* overlay / gradient / glow */
	--overlay-scrim: rgba(0,0,0,0.6);
	--overlay-lightbox: rgba(0,0,0,0.9);
	--gradient-image-scrim: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
	--gradient-aurora: radial-gradient(ellipse at center, rgba(201,162,75,0.22) 0%, rgba(111,168,255,0.08) 45%, transparent 72%);
	--glow-gold-sm: 0 0 12px rgba(201,162,75,0.35);
	--glow-gold-md: 0 0 24px rgba(201,162,75,0.4);
	--glow-gold-lg: 0 0 48px rgba(201,162,75,0.35);
	--glow-focus: 0 0 0 4px rgba(201,162,75,0.24);

	/* shadow */
	--shadow-1: 0 1px 2px rgba(0,0,0,0.4);
	--shadow-2: 0 4px 12px rgba(0,0,0,0.45);
	--shadow-3: 0 12px 32px rgba(0,0,0,0.5);
	--shadow-4: 0 24px 64px rgba(0,0,0,0.55);

	/* 2.2 — typography */
	--font-display: 'Montana', 'Neue Haas Grotesk Display', Arial Narrow, sans-serif;
	--font-heading: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body:    'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;
	--font-mono:    'Fragment Mono', 'SF Mono', 'JetBrains Mono', monospace;

	--text-display-xl: clamp(3.5rem, 2.2rem + 5vw, 8rem);
	--text-display-l: clamp(2.75rem, 2rem + 3vw, 5.5rem);
	--text-h1: clamp(2.25rem, 1.8rem + 1.8vw, 3.75rem);
	--text-h2: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);
	--text-h3: clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
	--text-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--text-h5: 1.125rem;
	--text-h6-overline: 0.875rem;
	--text-body-l: 1.125rem;
	--text-body: 1rem;
	--text-body-s: 0.875rem;
	--text-caption: 0.75rem;
	--text-micro: 0.6875rem;

	/* 2.3 — icons */
	--icon-stroke: 1.75px;
	--icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;

	/* 2.4 — spacing (8pt grid, 4px sub-unit) */
	--space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
	--space-5: 20px; --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
	--space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px;
	/* --space-13/14 are the section-to-section rhythm used as padding-block
	   on ~17 top-level homepage sections (design-system/10-homepage-strategy
	   §Step 4: "128-160px desktop between sections"). Left as flat desktop
	   values with no mobile scaling, the same 128-160px gap was landing on
	   390px phones too — two adjacent sections stacked ~256-320px of pure
	   dead space between them, exactly the "excessive whitespace" a mobile
	   viewport can't afford. Scaled mobile-first here, same breakpoints
	   already used by --container-margin below, so the full 128/160px
	   desktop rhythm is untouched at >=1024px. */
	--space-13: 64px; --space-14: 80px; --space-15: 192px; --space-16: 240px;

	/* 2.5 — grid */
	--container-max: 1320px;
	--container-margin: 24px;

	/* 2.6 — radius */
	--radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
	--radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;

	/* 2.7 — layers */
	--z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200;
	--z-scrim: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-max: 9999;

	--blur-xs: 4px; --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; --blur-xl: 40px;

	--stroke-hairline: 1px; --stroke-default: 1.5px; --stroke-bold: 2px;

	/* 03 — motion */
	--duration-instant: 80ms;
	--duration-fast: 150ms;
	--duration-base: 240ms;
	--duration-moderate: 360ms;
	--duration-slow: 560ms;
	--duration-cinematic: 1100ms;

	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
	:root { --container-margin: 32px; --space-13: 96px; --space-14: 112px; }
}
@media (min-width: 1024px) {
	:root { --container-margin: 48px; --space-13: 128px; --space-14: 160px; }
}
@media (min-width: 1280px) {
	:root { --container-margin: 64px; }
}
@media (min-width: 1440px) {
	:root { --container-margin: 80px; }
}

/* Reduced motion — every transition/animation collapses to effectively instant. */
@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;
	}
}

::selection {
	background: rgba(201,162,75,0.28);
	color: var(--color-text-primary);
}