/* ==========================================================================
   ZA APEX — DESIGN TOKENS
   --------------------------------------------------------------------------
   These are fallbacks. inc/dynamic-css.php overrides every one of them with
   the current Customizer value in an inline block, and customizer-preview.js
   rewrites individual properties live. Nothing else in the theme hard-codes
   a colour or a size.
   ========================================================================== */

:root {
	/* ---- Palette (lime-on-black heroic) ---- */
	--za-void:        #08090A;
	--za-surface:     #101214;
	--za-surface-2:   #171A1D;
	--za-line:        #24282C;
	--za-bone:        #F4F2ED;
	--za-muted:       #8B9196;
	--za-primary:     #D6F32F;
	--za-accent:      #E4322B;
	--za-teal:        #1F4E4A;
	--za-amber:       #E9A23B;
	--za-on-primary:  #08090A;

	--za-primary-rgb: 214, 243, 47;
	--za-accent-rgb:  228, 50, 43;
	--za-bone-rgb:    244, 242, 237;
	--za-void-rgb:    8, 9, 10;
	--za-hdr-bg-rgb:  8, 9, 10;

	/* ---- Typography ---- */
	--za-font-display: "Marcellus", Georgia, "Times New Roman", serif;
	--za-font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--za-fw-display:   400;
	--za-fw-body:      400;

	--za-scale:        1;
	--za-h1:           88px;
	--za-h2:           60px;
	--za-h3:           36px;
	--za-fs-body:      17px;
	--za-fs-small:     13px;

	--za-ls-display:   -1.5px;
	--za-ls-eyebrow:   3.2px;
	--za-lh-display:   0.96;
	--za-lh-body:      1.68;

	/* ---- Rhythm ---- */
	--za-container:    1360px;
	--za-gutter:       32px;
	--za-sec-y:        148px;
	--za-sec-y-m:      84px;
	--za-radius:       2px;
	--za-grid-gap:     28px;

	/* ---- Header ---- */
	--za-logo-w:       148px;
	--za-logo-w-m:     112px;
	--za-logo-gap:     14px;
	--za-hdr-bg:       #08090A;
	--za-hdr-alpha:    0.72;
	--za-hdr-blur:     18px;
	--za-hdr-y:        26px;
	--za-hdr-y-stuck:  14px;
	--za-hdr-x:        40px;
	--za-hdr-link:     #F4F2ED;
	--za-hdr-link-h:   #D6F32F;
	--za-hdr-link-fs:  13px;
	--za-hdr-link-gap: 34px;
	--za-hdr-link-tt:  uppercase;
	--za-hdr-h:        84px;             /* measured at runtime by app.js */
	--za-bp:           1024px;

	/* ---- Hero ---- */
	--za-hero-h:       100vh;
	--za-hero-h-m:     92vh;
	--za-hero-fs:      108px;
	--za-hero-fs-m:    46px;
	--za-hero-pt:      0px;
	--za-hero-ov:      #08090A;
	--za-hero-ov-a:    0.58;
	--za-hero-g1:      #08090A;
	--za-hero-g2:      #101214;
	--za-hero-ga:      168deg;
	--za-cape:         #E4322B;
	--za-cape-a:       0.9;
	--za-grain-a:      0.05;
	--za-deck-persp:   1200px;

	/* ---- Sections ---- */
	--za-gal-gap:      20px;
	--za-gal-cols:     3;
	--za-svc-cols:     3;
	--za-mq-fs:        92px;
	--za-mq-speed:     34s;
	--za-cta-bg:       #D6F32F;
	--za-cta-fg:       #08090A;
	--za-map-h:        460px;

	/* ---- Footer ---- */
	--za-ftr-bg:       #08090A;
	--za-ftr-fg:       #8B9196;
	--za-ftr-head:     #F4F2ED;
	--za-ftr-y:        96px;
	--za-ftr-gap:      40px;
	--za-ftr-cols:     4;
	--za-bigmark:      190px;

	/* ---- Motion ---- */
	--za-dur:          1.05s;
	--za-ease:         cubic-bezier(.16, 1, .3, 1);
	--za-ease-in-out:  cubic-bezier(.65, .05, .36, 1);

	/* ---- Elevation & effects ---- */
	--za-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
	--za-shadow-md:    0 18px 50px -22px rgba(0, 0, 0, .85);
	--za-shadow-lg:    0 42px 110px -30px rgba(0, 0, 0, .9);
	--za-glow:         0 0 0 1px rgba(var(--za-primary-rgb), .28),
	                   0 22px 70px -28px rgba(var(--za-primary-rgb), .35);

	/* ---- Z-index ladder. Named once so nothing guesses. ---- */
	--za-z-base:       1;
	--za-z-sticky:     40;
	--za-z-header:     60;
	--za-z-mobile:     70;
	--za-z-float:      80;
	--za-z-lightbox:   90;
	--za-z-cursor:     100;

	/* ---- Section-scoped overrides. The builder writes these per section. --- */
	--za-sec-pt:       var(--za-sec-y);
	--za-sec-pb:       var(--za-sec-y);
	--za-sec-bg:       transparent;
	--za-sec-fg:       var(--za-bone);
	--za-sec-mw:       var(--za-container);
	--za-sec-align:    left;
	--za-sec-text-align: left;

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   FLUID TYPE
   Every heading is clamp()ed between a mobile floor and the Customizer value.
   This is the guarantee that no slider position can produce a broken layout:
   the user controls the ceiling, the theme owns the floor.
   -------------------------------------------------------------------------- */
:root {
	--za-h1-fluid: clamp(2rem, 1.2rem + 5.2vw, calc(var(--za-h1) * var(--za-scale)));
	--za-h2-fluid: clamp(1.75rem, 1.1rem + 3.4vw, calc(var(--za-h2) * var(--za-scale)));
	--za-h3-fluid: clamp(1.25rem, 1rem + 1.4vw, calc(var(--za-h3) * var(--za-scale)));
	--za-body-fluid: clamp(0.95rem, 0.9rem + 0.22vw, calc(var(--za-fs-body) * var(--za-scale)));
	--za-hero-fluid: clamp(
		var(--za-hero-fs-m),
		2rem + 7vw,
		calc(var(--za-hero-fs) * var(--za-scale))
	);
	--za-sec-y-fluid: clamp(var(--za-sec-y-m), 6vw + 1rem, var(--za-sec-y));
	--za-mq-fluid: clamp(2.25rem, 1rem + 7vw, var(--za-mq-fs));
	--za-bigmark-fluid: clamp(2.5rem, 0.5rem + 14vw, var(--za-bigmark));
}