/**
 * HAViK design tokens + utility classes.
 *
 * Source of truth: Elementor global variables (Site Settings > Variables),
 * built from the Figma file "Havik-Home-Page" (HAViK Tokens / HAViK Type).
 * Elementor prints each variable on :root as --{label}, e.g. --color-accent.
 *
 * Everything outside this file references the --hv-* aliases only. If
 * Elementor's output ever changes, this file is the one place to update.
 * Each alias carries a fallback so it still resolves on any page where the
 * Elementor kit CSS is missing.
 *
 * Type sizes are fluid: Figma's mobile value at a 375px viewport, Figma's
 * desktop value at 1440px, scaling in between. No breakpoint needed.
 *
 * Utilities are prefixed with :root to lift specificity to (0,2,0), which
 * beats the Elementor kit's element defaults (e.g. `.elementor-kit-N h2`)
 * without !important. Styles set on an individual Elementor widget are
 * more specific still and win, as they should.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Colors — brand */
	--hv-color-accent: var(--color-accent, #fd4601);
	--hv-color-green-dark: var(--color-green-dark, #2b391b);
	--hv-color-green: var(--color-green, #687b50);
	--hv-color-texture: var(--color-texture, #828282);

	/* Colors — surfaces and lines */
	--hv-color-bg: var(--color-bg, #000000);
	--hv-color-surface: var(--color-surface, #111111);
	--hv-color-surface-raised: var(--color-surface-raised, #1c1c1c);
	--hv-color-line: var(--color-line, #333333);
	--hv-color-line-strong: var(--color-line-strong, #555555);
	--hv-color-border: var(--color-border, #828282);

	/* Colors — text */
	--hv-color-muted: var(--color-muted, #666666);
	--hv-color-text-dim: var(--color-text-dim, #999999);
	--hv-color-text: var(--color-text, #bbbbbb);
	--hv-color-text-strong: var(--color-text-strong, #ffffff);
	--hv-color-text-on-accent: var(--color-text-on-accent, #000000);

	/* Colors — status */
	--hv-color-danger: var(--color-danger, #c8102e);
	--hv-color-danger-text: var(--color-danger-text, #f87171);

	/* Font families (usable stacks: token + generic fallback) */
	--hv-font-display: var(--font-display, headline-gothic-atf-rough-n2, headline-gothic-atf), sans-serif;
	--hv-font-accent: var(--font-accent, bmx-radical), sans-serif;
	--hv-font-body: var(--font-body, "Roboto Condensed"), sans-serif;

	/* Spacing */
	--hv-space-4: var(--space-4, 4px);
	--hv-space-8: var(--space-8, 8px);
	--hv-space-12: var(--space-12, 12px);
	--hv-space-16: var(--space-16, 16px);
	--hv-space-20: var(--space-20, 20px);
	--hv-space-24: var(--space-24, 24px);
	--hv-space-32: var(--space-32, 32px);
	--hv-space-40: var(--space-40, 40px);
	--hv-space-48: var(--space-48, 48px);
	--hv-space-64: var(--space-64, 64px);
	--hv-space-96: var(--space-96, 96px);
	--hv-space-160: var(--space-160, 160px);
	--hv-space-240: var(--space-240, 240px);

	/* Type sizes — fluid (375px → 1440px) */
	--hv-size-h1: var(--size-h1, clamp(5rem, 3.9437rem + 4.507vw, 8rem));
	--hv-size-h2: var(--size-h2, clamp(2.25rem, 1.6338rem + 2.6291vw, 4rem));
	--hv-size-h3: var(--size-h3, clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem));
	--hv-size-h5: var(--size-h5, clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem));
	--hv-size-h6: var(--size-h6, clamp(0.75rem, 0.618rem + 0.5634vw, 1.125rem));
	--hv-size-label: var(--size-label, clamp(0.875rem, 0.787rem + 0.3756vw, 1.125rem));
	--hv-size-cta-lg: var(--size-cta-lg, clamp(1.5rem, 1.2359rem + 1.1268vw, 2.25rem));

	/* Type sizes — fixed (same on desktop and mobile in Figma) */
	--hv-size-cta: var(--size-cta, 1.5rem);
	--hv-size-body: var(--size-body, 1rem);
	--hv-size-body-sm: var(--size-body-sm, 0.875rem);
	--hv-size-body-xs: var(--size-body-xs, 0.75rem);

	/* Opacity */
	--hv-opacity-70: var(--opacity-70, 0.7);
	--hv-opacity-50: var(--opacity-50, 0.5);
}

/* ==========================================================================
   Headline font by heading level
   Headline Gothic ATF Rough (the display font) is for h1 and h2 only: it's
   heavy to download and hard to read small. h3–h6 that use the display
   font get Roboto Condensed ExtraBold instead: the display font's variables
   are redefined on the heading itself, so every heading built with them
   (Elementor atomic styles use var(--font-display), the CSS here
   var(--hv-font-display)) switches, and nothing else does.
   "HAViK Heading" is the Roboto Condensed file bundled in assets/fonts/
   (variable, Latin), declared at 800 only, so it renders ExtraBold whatever
   weight the heading asks for (most set 400 for the display font).
   ========================================================================== */

/* While the rough font (about 1MB) is still downloading, headings show in
   plain Headline Gothic ATF (Adobe: headline-gothic-atf, about 14KB, in the
   same kit), which looks close, instead of a generic font. Elementor
   defines --font-display as the rough family alone (the Elementor
   variable); this adds the fallbacks. html:root outranks Elementor's
   :root, whichever stylesheet loads last. */
html:root {
	--font-display: headline-gothic-atf-rough-n2, headline-gothic-atf, sans-serif;
}

/* First visit: havik-core.php holds the headlines in plain Headline Gothic
   (html.hv-font-pending) until the rough font has arrived, then switches
   and fades them up from 55% (html.hv-font-fade, 320ms), so the texture
   settles in instead of popping. Later visits, JavaScript off and reduced
   motion skip the fade. */
html.hv-font-pending:root {
	--font-display: headline-gothic-atf, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
	html.hv-font-fade :is(h1, h2, #hv-hero-title, .grunge) {
		animation: hv-font-settle 320ms ease-out;
	}
}

@keyframes hv-font-settle {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

@font-face {
	font-family: "HAViK Heading";
	src: url(../fonts/roboto-condensed-latin.woff2) format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root :is(h3, h4, h5, h6) {
	--font-display: "HAViK Heading", "Roboto Condensed", sans-serif;
	--hv-font-display: "HAViK Heading", "Roboto Condensed", sans-serif;
}

/* h3 is uppercase everywhere, including the Testimonial component's heading,
   which sets text-transform: none of its own (create-elementor-components.php).
   Elementor's atomic styles are two classes deep, so a plain h3 rule loses to
   them; the doubled :root outranks them without !important. When the
   components script is next rebuilt, drop that declaration and one :root will
   be enough. */
:root:root h3 {
	text-transform: uppercase;
}

/* ==========================================================================
   Type utilities
   Values from the Figma text styles. Line heights: 100% → 1; H5 33/24;
   Body 24/16; Label a fixed 23px at both sizes. Every Figma style has
   letter spacing 0 and no case transform. There is no h4 in Figma yet.

   On an Elementor widget, the class lands on the widget wrapper, so each
   rule also targets the heading/text element inside it.
   ========================================================================== */

:root .hv-h1,
:root .hv-h1 .elementor-heading-title {
	font-family: var(--hv-font-display);
	font-size: var(--hv-size-h1);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-h2,
:root .hv-h2 .elementor-heading-title {
	font-family: var(--hv-font-display);
	font-size: var(--hv-size-h2);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-h3,
:root .hv-h3 .elementor-heading-title {
	font-family: var(--hv-font-display);
	font-size: var(--hv-size-h3);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-h5,
:root .hv-h5 .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-h5);
	font-weight: 400;
	line-height: 1.375;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-h6,
:root .hv-h6 .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-h6);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-label,
:root .hv-label .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-label);
	font-weight: 700;
	line-height: 1.4375rem;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-body,
:root .hv-body .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-body);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-body-sm,
:root .hv-body-sm .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-body-sm);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

:root .hv-body-xs,
:root .hv-body-xs .elementor-heading-title {
	font-family: var(--hv-font-body);
	font-size: var(--hv-size-body-xs);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* ==========================================================================
   Buttons
   Figma "button": flat accent fill, black BMX Radical Bold at cta-lg,
   square corners. Padding comes from the spacing scale (space-20 top and
   bottom, space-48 sides) and the button sizes to its own text; Figma's
   98px sides belonged to one frame, not the system. background-image:
   none keeps the old grunge texture (havik-core.css) off the button.
   Figma "text button": no fill, accent BMX Radical Bold at cta, Figma's
   own arrow (assets/icons/arrow.svg) space-12 after the text. space-12
   top and bottom padding makes the link a 48px tap target. Elementor
   Component: HAViK Text Link.

   Works on plain markup (<a>, <button>) and on an Elementor Button widget
   (class in Advanced > CSS Classes; styles the inner .elementor-button).
   ========================================================================== */

:root .hv-btn:not(.elementor-widget),
:root .hv-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--hv-space-20) var(--hv-space-48);
	/* Same 2px as .hv-btn-outline's border, in the fill color, so a solid
	   and an outline button are the same height side by side. */
	border: 2px solid var(--hv-color-accent);
	border-radius: 0;
	background-color: var(--hv-color-accent);
	background-image: none;
	color: var(--hv-color-text-on-accent);
	font-family: var(--hv-font-accent);
	font-size: var(--hv-size-cta);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

:root .hv-btn-text:not(.elementor-widget),
:root .hv-btn-text .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--hv-space-12);
	padding: var(--hv-space-12) 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hv-color-accent);
	font-family: var(--hv-font-accent);
	font-size: var(--hv-size-cta);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

/* Secondary button: .hv-btn's font, size, padding and square corners, with
   no fill, a 2px accent border and accent text; fills on hover. At least
   44px tall to tap. */
:root .hv-btn-outline:not(.elementor-widget),
:root .hv-btn-outline .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: var(--hv-space-20) var(--hv-space-48);
	border: 2px solid var(--hv-color-accent);
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: var(--hv-color-accent);
	font-family: var(--hv-font-accent);
	font-size: var(--hv-size-cta);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

:root .hv-btn-outline:not(.elementor-widget):hover,
:root .hv-btn-outline .elementor-button:hover {
	background-color: var(--hv-color-accent);
	color: var(--hv-color-text-on-accent);
}

/* Arrow on plain markup only. Elementor Button widgets use their own icon.
   Drawn in currentColor through a mask. assets/icons/arrow.svg is a
   100×100 square with space around the arrow. Decorative: nothing is
   read out. */
:root .hv-btn-text:not(.elementor-widget)::after {
	content: "";
	flex-shrink: 0;
	width: var(--hv-space-32);
	aspect-ratio: 1 / 1;
	background-color: currentColor;
	-webkit-mask: url(../icons/arrow.svg) no-repeat center / contain;
	mask: url(../icons/arrow.svg) no-repeat center / contain;
}

:root .hv-btn:not(.elementor-widget):focus-visible,
:root .hv-btn .elementor-button:focus-visible,
:root .hv-btn-text:not(.elementor-widget):focus-visible,
:root .hv-btn-text .elementor-button:focus-visible,
:root .hv-btn-outline:not(.elementor-widget):focus-visible,
:root .hv-btn-outline .elementor-button:focus-visible {
	outline: 2px solid var(--hv-color-accent);
	outline-offset: 2px;
}

/* Every link's keyboard focus ring, site-wide, the same as the buttons'.
   The Hello Elementor theme's reset draws it 2px black, which can't be seen
   on the site's black pages. Only the color changes; the theme's width and
   offset stay. */
:root a:focus-visible {
	outline: 2px solid var(--hv-color-accent);
	outline-offset: 2px;
}

/* Inline links in body copy (.hv-prose): the text's own color, underlined,
   accent on hover. The theme's default link color (pink) never shows. */
:root .hv-prose a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 150ms ease-out;
}

:root .hv-prose a:hover {
	color: var(--hv-color-accent);
}

/* Hover and keyboard focus (hover behavior only; colors, padding and sizes
   are the ones above).
   Solid button: on hover and focus the orange deepens (accent + 12% black)
   and the arrow slides forward 4px, 260ms on a soft ease-out; the label
   never scales, so it stays sharp. Pressing it squeezes it to 97% for a
   moment (90ms). (legacy-overrides.css still gives the older solid button
   surfaces, like add to cart, a slight scale on hover.)
   Text link: the arrow moves forward 4px; the label doesn't move (scaled
   BMX Radical re-rasterizes and goes soft). The arrow is the ::after on
   plain markup, the widget's icon on an Elementor Button, and
   .hv-text-link-arrow in the HAViK Text Link component.
   With reduced motion nothing moves: the solid button keeps only its
   deeper orange, and the text link lightens (accent + 20% white). */
:root .hv-btn:not(.elementor-widget),
:root .hv-btn .elementor-button {
	transition:
		background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The arrow (the component's SVG, or an Elementor Button's icon). */
:root .hv-btn:not(.elementor-widget) svg,
:root .hv-btn .elementor-button-icon {
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The deeper orange on hover and focus: a color change, not movement, so
   it applies with reduced motion too. */
:root .hv-btn:not(.elementor-widget):is(:hover, :focus-visible),
:root .hv-btn .elementor-button:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--hv-color-accent) 88%, black);
	background-color: color-mix(in srgb, var(--hv-color-accent) 88%, black);
}

:root .hv-btn-text:not(.elementor-widget),
:root .hv-btn-text .elementor-button,
:root .hv-text-link > * {
	transition: color 150ms ease-out;
}

:root .hv-btn-text:not(.elementor-widget)::after,
:root .hv-btn-text .elementor-button-icon,
:root .hv-text-link-arrow {
	transition: transform 150ms ease-out, background-color 150ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
	:root .hv-btn:not(.elementor-widget):is(:hover, :focus-visible) svg,
	:root .hv-btn .elementor-button:is(:hover, :focus-visible) .elementor-button-icon {
		transform: translateX(4px);
	}

	/* The press: quick in, then back on the soft ease-out above. */
	:root .hv-btn:not(.elementor-widget):active,
	:root .hv-btn .elementor-button:active {
		transform: scale(0.97);
		transition-duration: 90ms;
	}

	:root .hv-btn-text:not(.elementor-widget):is(:hover, :focus-visible)::after,
	:root .hv-btn-text .elementor-button:is(:hover, :focus-visible) .elementor-button-icon,
	:root .hv-text-link:is(:hover, :focus-visible) .hv-text-link-arrow {
		transform: translateX(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root .hv-btn-text:not(.elementor-widget):is(:hover, :focus-visible),
	:root .hv-btn-text .elementor-button:is(:hover, :focus-visible),
	:root .hv-text-link:is(:hover, :focus-visible) > * {
		color: color-mix(in srgb, var(--hv-color-accent) 80%, white);
	}
}

/* Disabled: any of the three buttons, when it's a disabled <button>, has
   aria-disabled="true", or has .is-disabled (on the element, or on the
   Elementor widget around it). Dimmed to opacity-50 and not clickable, so
   hover (the outline's fill) doesn't react either. Matches the wizard's
   disabled Next button. */
:root :is(.hv-btn, .hv-btn-outline, .hv-btn-text):not(.elementor-widget):is(:disabled, [aria-disabled="true"], .is-disabled),
:root :is(.hv-btn, .hv-btn-outline, .hv-btn-text):is(.is-disabled) .elementor-button,
:root :is(.hv-btn, .hv-btn-outline, .hv-btn-text) .elementor-button:is([aria-disabled="true"], .is-disabled) {
	opacity: var(--hv-opacity-50);
	pointer-events: none;
	cursor: not-allowed;
}

/* ==========================================================================
   Color utilities
   .hv-text-{token}   color
   .hv-bg-{token}     background-color
   .hv-border-{token} 1px solid border in that color
   ========================================================================== */

:root .hv-text-accent { color: var(--hv-color-accent); }
:root .hv-text-green-dark { color: var(--hv-color-green-dark); }
:root .hv-text-green { color: var(--hv-color-green); }
:root .hv-text-border { color: var(--hv-color-border); }
:root .hv-text-bg { color: var(--hv-color-bg); }
:root .hv-text-surface { color: var(--hv-color-surface); }
:root .hv-text-surface-raised { color: var(--hv-color-surface-raised); }
:root .hv-text-line { color: var(--hv-color-line); }
:root .hv-text-line-strong { color: var(--hv-color-line-strong); }
:root .hv-text-muted { color: var(--hv-color-muted); }
:root .hv-text-text-dim { color: var(--hv-color-text-dim); }
:root .hv-text-text { color: var(--hv-color-text); }
:root .hv-text-text-strong { color: var(--hv-color-text-strong); }

:root .hv-bg-accent { background-color: var(--hv-color-accent); }
:root .hv-bg-green-dark { background-color: var(--hv-color-green-dark); }
:root .hv-bg-green { background-color: var(--hv-color-green); }
:root .hv-bg-border { background-color: var(--hv-color-border); }
:root .hv-bg-bg { background-color: var(--hv-color-bg); }
:root .hv-bg-surface { background-color: var(--hv-color-surface); }
:root .hv-bg-surface-raised { background-color: var(--hv-color-surface-raised); }
:root .hv-bg-line { background-color: var(--hv-color-line); }
:root .hv-bg-line-strong { background-color: var(--hv-color-line-strong); }
:root .hv-bg-muted { background-color: var(--hv-color-muted); }
:root .hv-bg-text-dim { background-color: var(--hv-color-text-dim); }
:root .hv-bg-text { background-color: var(--hv-color-text); }
:root .hv-bg-text-strong { background-color: var(--hv-color-text-strong); }

:root .hv-border-accent { border: 1px solid var(--hv-color-accent); }
:root .hv-border-green-dark { border: 1px solid var(--hv-color-green-dark); }
:root .hv-border-green { border: 1px solid var(--hv-color-green); }
:root .hv-border-border { border: 1px solid var(--hv-color-border); }
:root .hv-border-bg { border: 1px solid var(--hv-color-bg); }
:root .hv-border-surface { border: 1px solid var(--hv-color-surface); }
:root .hv-border-surface-raised { border: 1px solid var(--hv-color-surface-raised); }
:root .hv-border-line { border: 1px solid var(--hv-color-line); }
:root .hv-border-line-strong { border: 1px solid var(--hv-color-line-strong); }
:root .hv-border-muted { border: 1px solid var(--hv-color-muted); }
:root .hv-border-text-dim { border: 1px solid var(--hv-color-text-dim); }
:root .hv-border-text { border: 1px solid var(--hv-color-text); }
:root .hv-border-text-strong { border: 1px solid var(--hv-color-text-strong); }