/* ============================================================
   PREMIUM DESIGN TOKENS — craft-level baseline
   ============================================================
   Defines the design primitives that separate "looks-OK" from
   "looks-designed":
     • spacing scale (4-px grid, golden-ratio aware)
     • type ramp (sizes + paired line-height / letter-spacing)
     • motion easings + durations (Material / Spring grade)
     • radius scale (sharp → pill, choose intent)

   Loaded BEFORE archetype CSS so archetypes can reference these
   tokens via var(--space-6), var(--text-3xl), var(--ease-emphasized).

   Mantra: every visible value in archetype CSS must come from this
   token system. If a value isn't here, it should be — propose first,
   add second, use third.

   Version: 1.1.0 (2026-06-04) — trimmed 6 entirely-unused token
   families (fw / elevation / blur / overlay / content / z-index +
   font-feature) and the dead .premium-* utility classes. Remaining
   families (space / text / ease / duration / radius) are referenced
   across 70-103 files via var(--token, fallback) syntax.
   ============================================================ */

:root {
	/* ── SPACING SCALE ──────────────────────────────────────
	   4-px grid. Includes 24 (1.5× of 16) for breathing rhythm.
	   Use --space-N as the only padding/margin/gap source.
	────────────────────────────────────────────────────────── */
	--space-0:    0;
	--space-px:   1px;
	--space-half: 2px;
	--space-1:    4px;
	--space-2:    8px;
	--space-3:    12px;
	--space-4:    16px;
	--space-5:    24px;
	--space-6:    32px;
	--space-7:    48px;
	--space-8:    64px;
	--space-9:    96px;
	--space-10:   128px;
	--space-11:   160px;
	--space-12:   240px;
	--space-13:   320px;

	/* ── TYPE RAMP ──────────────────────────────────────────
	   Each size pairs with deliberate line-height + letter-spacing.
	   Display sizes get NEGATIVE tracking (tighter = more refined);
	   small caps + labels get POSITIVE tracking (looser = legible).
	────────────────────────────────────────────────────────── */
	--text-2xs:   11px;
	--text-2xs-lh: 1.5;
	--text-2xs-ls: 0.08em;

	--text-xs:    12px;
	--text-xs-lh: 1.5;
	--text-xs-ls: 0.04em;

	--text-sm:    14px;
	--text-sm-lh: 1.55;
	--text-sm-ls: 0.01em;

	--text-base:  16px;
	--text-base-lh: 1.6;
	--text-base-ls: 0;

	--text-md:    18px;
	--text-md-lh: 1.55;
	--text-md-ls: -0.005em;

	--text-lg:    20px;
	--text-lg-lh: 1.5;
	--text-lg-ls: -0.01em;

	--text-xl:    24px;
	--text-xl-lh: 1.4;
	--text-xl-ls: -0.015em;

	--text-2xl:   32px;
	--text-2xl-lh: 1.25;
	--text-2xl-ls: -0.02em;

	--text-3xl:   48px;
	--text-3xl-lh: 1.15;
	--text-3xl-ls: -0.025em;

	--text-4xl:   64px;
	--text-4xl-lh: 1.05;
	--text-4xl-ls: -0.03em;

	--text-5xl:   88px;
	--text-5xl-lh: 1;
	--text-5xl-ls: -0.035em;

	--text-6xl:   112px;
	--text-6xl-lh: 0.95;
	--text-6xl-ls: -0.04em;

	--text-7xl:   144px;
	--text-7xl-lh: 0.9;
	--text-7xl-ls: -0.045em;

	/* ── MOTION ─────────────────────────────────────────────
	   Easings: never use 'ease' for premium motion. Pick intent.
	   Durations: shorter for micro-interactions, longer for
	   page-level reveals. Anything > 600ms must justify itself.
	────────────────────────────────────────────────────────── */
	--ease-standard:    cubic-bezier(0.2, 0, 0, 1);
	--ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
	--ease-decelerate:  cubic-bezier(0.05, 0.7, 0.1, 1.0);
	--ease-accelerate:  cubic-bezier(0.3, 0, 1, 1);
	--ease-expressive:  cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

	--duration-instant:   75ms;
	--duration-fast:      150ms;
	--duration-base:      250ms;
	--duration-medium:    350ms;
	--duration-slow:      500ms;
	--duration-slower:    700ms;
	--duration-cinematic: 1000ms;

	/* ── RADIUS ─────────────────────────────────────────────
	   Pick intent: sharp (0) for editorial, small (2-8) for soft UI,
	   pill (999) for buttons. NEVER 6 or 10 (mid-tier defaults look amateur).
	────────────────────────────────────────────────────────── */
	--radius-none: 0;
	--radius-xs:   2px;
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-2xl:  32px;
	--radius-pill: 999px;
}

/* ── UTILITY: Reduced motion respect ─────────────────────── */
@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;
	}
}