/**
 * Vertex design tokens (Figma)
 * @package Vertex
 */
:root {
	/* Colors — primary = navy, secondary = orange (Figma) */
	--color-primary: #13284c;
	--color-primary-light: #27529d;
	--color-primary-lighter: #80adfa;
	--color-secondary: #f47726;
	--color-secondary-dark: #ea512e;
	--color-secondary-light: #ffba8e;
	--color-neutral-lightest: #ffffff;
	--color-neutral-light: #f1f1f1;
	--color-neutral-dark: #9d9d9d;
	--color-neutral-darkest: #181818;

	/* Aliases for header on dark / CTAs */
	--color-header-text: var(--color-neutral-lightest);
	--color-accent: var(--color-secondary);

	/* Typography */
	--font-family-base: "Inter", system-ui, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fs-body: 1rem;
	--lh-body: 1.5;
	--fs-small: 0.875rem;
	--fs-h3: 1.5rem;
	--fs-h2: clamp(1.75rem, 4vw, 2.5rem);
	--fs-h1: clamp(2rem, 5vw, 3.75rem);
	--lh-tight: 1.2;

	/* Breakpoints (reference widths for media queries) */
	--bp-tablet: 768px;
	--bp-desktop: 1440px;

	/* Layout */
	--container-max-width: 1440px;
	--container-padding-x: 16px;
	--container-padding-x-md: 40px;
	--container-padding-x-lg: 104px;

	--header-height: 106px;
	--header-padding-y: 16px;
	--header-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--header-z: 1000;

	--logo-width: 195px;
	--logo-height: 74px;

	--radius-sm: 8px;
	--radius-card-post: 12px;
	--radius-full: 9999px;
	--shadow-card: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);

	--section-space-y: clamp(3rem, 8vw, 5rem);
	--breadcrumb-height: 52px;

	/* Nav */
	--nav-link-gap: 8px;
	--fs-nav: 1rem;
	--lh-nav: 1.5;
	--header-actions-gap: 24px;

	/* Buttons */
	--btn-padding-y: 10px;
	--btn-padding-x: 20px;

	/* Cart badge */
	--badge-size: 20px;
	--badge-font-size: 12px;
	--badge-offset-top: -8px;
	--badge-offset-right: -10px;

	/* Hero (structural; backgrounds via scaffolding) */
	/* Ajuste fino se a arte tiver elementos importantes fora do centro (ex.: faixas à direita) */
	/* Horizontal: arte deslocada; vertical: bottom — com cover evita cortar a onda laranja na base */
	--hero-bg-object-position: 58% bottom;
	/*
	 * Arte ~1440px largura: altura mínima ~ proporcional a 100vw (cover).
	 * Em ≥1920px o teto 100svh impedia ver a onda inteira em 1080p — ver media query abaixo.
	 */
	--hero-art-width: 1440;
	--hero-art-height: 900;
	--hero-min-height: min(
		100svh,
		max(720px, calc(100vw * var(--hero-art-height) / var(--hero-art-width)))
	);
	--hero-content-max-width: 720px;
	--hero-p-max-width: 680px;
	--hero-text-gap: 2rem;
	--hero-content-padding-top: clamp(120px, 18vw, 220px);
	--hero-content-padding-bottom: clamp(3rem, 8vw, 5rem);

	/* Treinamentos fold — Home-1.png 1920×1080 */
	--trein-art-width: 1920;
	--trein-art-height: 1080;
	--trein-min-height: max(
		560px,
		calc(100vw * var(--trein-art-height) / var(--trein-art-width))
	);

	/* Phase 3 scaffolding section tints */
	--scaffold-header-bg: var(--color-primary);
	--scaffold-hero-bg: var(--color-primary-light);
	--scaffold-alt-a: var(--color-neutral-lightest);
	--scaffold-alt-b: var(--color-neutral-light);
	--scaffold-cta-bg: var(--color-secondary);
	--scaffold-placeholder: var(--color-neutral-dark);
}

@media (min-width: 768px) {
	:root {
		--container-padding-x: var(--container-padding-x-md);
	}
}

@media (min-width: 1440px) {
	:root {
		--container-padding-x: var(--container-padding-x-lg);
	}
}

/* Viewports largos: hero mais alto que 100svh se preciso — mostra onda inferior completa (scroll leve) */
@media (min-width: 1920px) {
	:root {
		--hero-art-height: 1040;
		--hero-min-height: max(
			960px,
			calc(100vw * var(--hero-art-height) / var(--hero-art-width))
		);
	}
}