/* -----------------------------------------------------------------------------
 * UniverseZero.one — design tokens
 * Source of truth: UniverseZero-Claude-Code-Handoff-CLEAN/DESIGN.md
 * The Stitch export's own token file is subordinate to the handoff palette.
 * -------------------------------------------------------------------------- */

:root {
	/* --- Palette (DESIGN.md) --- */
	--uz-void-black: #03070D;
	--uz-midnight: #071525;
	--uz-deep-surface: #0B1B2A;
	--uz-electric-cyan: #43D8FF;
	--uz-orbit-blue: #1599D2;
	--uz-subtle-violet: #865DFF;
	/*
	 * The DESIGN.md violet measures 4.39:1 against the midnight card surface —
	 * just under the 4.5:1 WCAG 2.2 AA needs for small text. This is the same
	 * hue and saturation lifted 3% in lightness, which clears AA on void
	 * (5.57:1), midnight (5.07:1) and deep surface (4.81:1). It is used only
	 * where violet carries small TEXT; fills, strokes, glows and the pathway
	 * motif keep the palette value above, where the 3:1 non-text rule applies
	 * and it passes comfortably.
	 */
	--uz-subtle-violet-text: #916CFF;
	--uz-human-amber: #F4A949;
	--uz-warm-white: #F4F2ED;
	--uz-muted-text: #9AA8B5;
	--uz-hairline: rgba(125, 196, 230, 0.22);

	/* --- Semantic roles --- */
	--uz-bg: var(--uz-void-black);
	--uz-bg-raised: var(--uz-midnight);
	--uz-bg-card: var(--uz-deep-surface);
	--uz-text: var(--uz-warm-white);
	--uz-text-muted: var(--uz-muted-text);
	--uz-accent: var(--uz-electric-cyan);
	--uz-accent-deep: var(--uz-orbit-blue);
	--uz-introspective: var(--uz-subtle-violet);
	--uz-warm: var(--uz-human-amber);
	--uz-border: var(--uz-hairline);
	--uz-border-strong: rgba(125, 196, 230, 0.42);
	/*
	 * Boundary for controls whose outline is the only thing that identifies them
	 * — form fields above all. WCAG 2.2 SC 1.4.11 requires 3:1 against the
	 * adjacent surface for that, and the decorative hairline above reaches only
	 * 1.5:1 on void black. This alpha measures 3.63:1 on void, 3.53:1 on card and
	 * 3.60:1 on midnight. The hairline itself is unchanged: it comes from
	 * DESIGN.md and is used for section rules and card outlines, which carry no
	 * information a reader has to perceive.
	 */
	--uz-border-control: rgba(125, 196, 230, 0.55);
	--uz-focus: var(--uz-electric-cyan);

	/* Translucent surfaces (headers, drawer, bottom nav) */
	--uz-surface-translucent: rgba(3, 7, 13, 0.72);
	--uz-surface-translucent-home: rgba(3, 7, 13, 0.40);
	--uz-glow-cyan: 0 0 20px rgba(67, 216, 255, 0.10);
	--uz-glow-cyan-strong: 0 0 50px rgba(67, 216, 255, 0.15);

	/* --- Typography --- */
	/*
	 * Bee Three, served by Adobe Fonts. Sets every H1 and H2 site-wide. The
	 * fallbacks are condensed faces so the headings keep their narrow
	 * proportions if the Adobe kit is unavailable.
	 */
	--uz-font-bee: "bee", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

	--uz-font-display: "Anybody", "Hanken Grotesk", "Arial Narrow", system-ui, sans-serif;
	--uz-font-heading: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--uz-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--uz-text-xs: 0.75rem;    /* 12px — metadata only */
	--uz-text-sm: 0.875rem;   /* 14px — captions */
	--uz-text-base: 1rem;     /* 16px — minimum body size */
	--uz-text-lg: 1.125rem;   /* 18px — article body */
	--uz-text-xl: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
	--uz-text-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	--uz-text-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--uz-text-display: clamp(3rem, 1.8rem + 6vw, 7.5rem);

	--uz-leading-tight: 1.05;
	--uz-leading-snug: 1.25;
	--uz-leading-normal: 1.6;
	--uz-leading-relaxed: 1.75;
	--uz-tracking-caps: 0.14em;
	--uz-tracking-tight: -0.02em;

	/* --- Spacing --- */
	--uz-space-2xs: 0.25rem;
	--uz-space-xs: 0.5rem;
	--uz-space-sm: 0.75rem;
	--uz-space-md: 1rem;
	--uz-space-lg: 1.5rem;
	--uz-space-xl: 2rem;
	--uz-space-2xl: 3rem;
	--uz-space-3xl: 4rem;
	--uz-section: clamp(4rem, 2.5rem + 6vw, 10rem);   /* 64px mobile → 160px desktop */
	--uz-gutter: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);

	/* --- Layout --- */
	--uz-content-max: 1320px;
	--uz-editorial-max: 760px;
	--uz-grid-columns: 12;

	/* --- Shape --- */
	--uz-radius-sm: 8px;
	--uz-radius-md: 14px;
	--uz-radius-lg: 20px;
	--uz-radius-pill: 999px;

	/* --- Chrome --- */
	--uz-header-height: 4.5rem;
	--uz-bottom-nav-height: 4.5rem;
	--uz-touch-target: 44px;

	/* --- Motion --- */
	--uz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--uz-duration-fast: 150ms;
	--uz-duration: 300ms;

	--uz-z-drawer: 100;
	--uz-z-header: 90;
	--uz-z-bottom-nav: 80;
}