/* ════════════════════════════════════════════════════════════════
   Bruna design tokens — single source of truth for the public site.
   Edit a value here and every page picks it up. The CMS has its own
   token system (intentional — different product, different scale).

   Audit policy: if a token sits here with zero usage, it's either
   stale or aspirational. Remove the stale ones and let
   aspirational/future-use ones be reintroduced when an actual
   component needs them.
   ══════════════════════════════════════════════════════════════════ */
:root {

	/* ── Fonts ─────────────────────────────────────────────────── */
	/* Single typeface system-wide: the OS system font stack. SF Pro
	   Display on Mac/iOS (premium feel, no webfont weight), Segoe UI
	   on Windows, Roboto on Android. Zero load cost.
	   The three roles (--font-body, --font-display, --font-label) all
	   point to the SAME stack — intentional simplification away from
	   the previous editorial trio (Inter / Barlow Condensed / Libre
	   Franklin). When elements feel too uniform, address with weight
	   + size + tracking instead of switching families. */
	--font-system:  -apple-system, BlinkMacSystemFont, 'SF Pro Display',
	                'SF Pro Text', 'SF Pro', system-ui, sans-serif;
	--font-display: var(--font-system);
	--font-body:    var(--font-system);
	--font-label:   var(--font-system);

	/* ── Colors — base ────────────────────────────────────────── */
	--color-bg:       #000000; /* page background, pure black */
	--color-surface:  #0a0a0a; /* cards, interactive tile surfaces */
	--color-text:     #f5fff8; /* primary text — pastel mint (was warm cream #f6efe8) */
	--color-white:    #ffffff; /* pure white — inverted CTAs, nav-tile bg */

	/* ── Colors — text alpha (against dark bg) ────────────────────
	   Only --55 is currently in use (muted-but-legible secondary text
	   like the "Ver menú completo" link). Add more tiers (85 / 78 /
	   65 / 45 / 30 / 20) when an actual component needs them — the
	   previous batch sat dead for months without uptake. */
	--color-text-55:  rgba(245, 255, 248, 0.55);

	/* ── Type scale — Perfect Fourth (ratio 1.333) ─────────────────
	   Baseline 16px (body copy). All other tiers derive from this with
	   a Perfect Fourth modular scale. Pick the tier that matches the
	   intent (xs = micro-label, base = read, md = secondary, etc.)
	   instead of writing px directly — keeps the whole site coherent.
	   Tiers above 2xl (3xl = 67px, 4xl = 89px) were defined but never
	   adopted; removed to keep this file honest. */
	--fs-xs:   13px;   /* eyebrow / uppercase tracked labels */
	--fs-base: 16px;   /* body copy, descriptions */
	--fs-md:   21px;   /* secondary headings, sub-nav, inactive list titles */
	--fs-lg:   28px;   /* tertiary display */
	--fs-xl:   37px;   /* focused content title (e.g. selected item).
	                      Also read at runtime by the interactive-menu list JS
	                      via getComputedStyle — keep this name stable. */
	--fs-2xl:  50px;   /* primary nav, featured words */

	/* ── Type weight scale ────────────────────────────────────────
	   4 tiers. Default size↔weight pairings:
	   • xs / base       → regular (eyebrows, body)
	   • md              → light   (refined secondary)
	   • xl / 2xl        → bold    (strong contrast in display)
	   Overrideable per component when intent differs. */
	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    600;

	/* ── EXCEPTIONS to the scale ──────────────────────────────────
	   Nav grid text lives inside 25px checker cells — its font-size
	   is dictated by the cell, NOT the type scale. Use literal px in
	   that component only (see bruna-nav.css). */

	/* ── Motion ───────────────────────────────────────────────── */
	/* Shared timing curves. Use these CSS vars (and the GSAP-equivalent
	   power* aliases noted in the comments) instead of inline
	   cubic-bezier strings so the motion language stays unified.
	   ─────────────────────────────────────────────────────────────
	   ease-standard      — generic exit/idle. GSAP equiv: power2.out
	   ease-in-out        — symmetric. GSAP equiv: power2.inOut
	   ease-out-quint     — entrance curves (block reveals, list mount,
	                        word-stack entrance). Snappy out, soft tail.
	                        GSAP equiv: power3.out / power4.out range.
	   ease-in-out-cubic  — symmetric mid-flight (list crossfades,
	                        word-stack swaps). GSAP equiv: power2.inOut. */
	--ease-standard:     cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:       cubic-bezier(0.45, 0, 0.25, 1);
	--ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

}

/* Custom cursor retirado — se volvió al cursor nativo del sistema (no
   gustó el feel). El CSS (.bruna-cursor + cursor:none) y su inyección en
   bruna-nav.js están en git history si se quiere retomar. */