/* =============================================================================

   COLORS — BRAND PRIMITIVES

   Cor crua. Só theme.css consome --brand-*.
   Se um --brand-* aparecer num arquivo de componente, é um furo no sistema.

   ============================================================================= */

:root {
	--brand-orange:    #FF5500;
	--brand-sand:      #EDECE1;
	--brand-black:     #151515;
	--brand-dark-sand: #8F8370;

	/* ESCALA SAND */
	--brand-sand-0:   oklch(0% 0.015 105);
	--brand-sand-10:  oklch(10% 0.015 105);
	--brand-sand-20:  oklch(20% 0.015 105);
	--brand-sand-30:  oklch(30% 0.015 105);
	--brand-sand-40:  oklch(40% 0.015 105);
	--brand-sand-50:  oklch(50% 0.015 105);
	--brand-sand-60:  oklch(60% 0.015 105);
	--brand-sand-70:  oklch(70% 0.015 105);
	--brand-sand-80:  oklch(80% 0.015 105);
	--brand-sand-90:  oklch(90% 0.015 105);
	--brand-sand-96:  oklch(96% 0.015 105);
	--brand-sand-97:  oklch(97% 0.015 105);
	--brand-sand-100: oklch(100% 0.015 105);

	/* ESCALA BLACK */
	--brand-black-0:   oklch(0% 0 0);
	--brand-black-10:  oklch(10% 0 0);
	--brand-black-20:  oklch(20% 0 0);
	--brand-black-25:  oklch(25% 0 0);
	--brand-black-23:  oklch(23% 0 0);
	--brand-black-25:  oklch(25% 0 0);
	--brand-black-30:  oklch(30% 0 0);
	--brand-black-40:  oklch(40% 0 0);
	--brand-black-50:  oklch(50% 0 0);
	--brand-black-60:  oklch(60% 0 0);
	--brand-black-70:  oklch(70% 0 0);
	--brand-black-80:  oklch(80% 0 0);
	--brand-black-90:  oklch(90% 0 0);
	--brand-black-100: oklch(100% 0 0);

	/* BLACK ALPHA */
	--brand-black-a5:  rgba(21, 21, 21, 0.05);
	--brand-black-a10: rgba(21, 21, 21, 0.1);
	--brand-black-a15: rgba(21, 21, 21, 0.15);
	--brand-black-a20: rgba(21, 21, 21, 0.2);
	--brand-black-a30: rgba(21, 21, 21, 0.3);
	--brand-black-a40: rgba(21, 21, 21, 0.4);
	--brand-black-a50: rgba(21, 21, 21, 0.5);
	--brand-black-a60: rgba(21, 21, 21, 0.6);
	--brand-black-a70: rgba(21, 21, 21, 0.7);
	--brand-black-a80: rgba(21, 21, 21, 0.8);
	--brand-black-a90: rgba(21, 21, 21, 0.9);

	/* SAND ALPHA */
	--brand-sand-a10: rgba(237, 236, 225, 0.1);
	--brand-sand-a15: rgba(237, 236, 225, 0.15);
	--brand-sand-a20: rgba(237, 236, 225, 0.2);
	--brand-sand-a30: rgba(237, 236, 225, 0.3);
	--brand-sand-a40: rgba(237, 236, 225, 0.4);
	--brand-sand-a50: rgba(237, 236, 225, 0.5);
	--brand-sand-a60: rgba(237, 236, 225, 0.6);
	--brand-sand-a70: rgba(237, 236, 225, 0.7);
	--brand-sand-a80: rgba(237, 236, 225, 0.8);
	--brand-sand-a90: rgba(237, 236, 225, 0.9);

	/* Alias semântico — entra na lista de triagem de primitivo cru:
	   existem 15 usos em componentes, mas é papel semântico ("fundo escuro")
	   disfarçado de primitivo. Mantido como --brand-gray por ora. */
	--brand-gray: var(--brand-black-25);
}




/* =============================================================================

   SPACING

   ============================================================================= */

:root {

	/* ── PRIMITIVES ──
	   Escala de espaçamento. O número é o multiplicador da unidade base (4px):
	   --system-space-{n} = n × 4px. Assim space-4 = 16px, space-8 = 32px, etc.
	   1–6 são consecutivos (granularidade fina para dentro de componentes).
	   Acima de 6, a escala pula os passos que ninguém usa na prática. */
	--system-space-1:   4px;
	--system-space-2:   8px;
	--system-space-3:  12px;
	--system-space-4:  16px;
	--system-space-5:  20px;
	--system-space-6:  24px;
	--system-space-8:  32px;
	--system-space-10: 40px;
	--system-space-12: 48px;
	--system-space-16: 64px;
	--system-space-20: 80px;
	--system-space-24: 96px;
	--system-space-32: 128px;
	--system-space-40: 160px;

	/* ── INSET ── */
	--system-spacing-inset-3xs: var(--system-space-1);  /*   4px */
	--system-spacing-inset-2xs: var(--system-space-2);  /*   8px */
	--system-spacing-inset-xs:  var(--system-space-3);  /*  12px */
	--system-spacing-inset-sm:  var(--system-space-4);  /*  16px */
	--system-spacing-inset-md:  var(--system-space-6);  /*  24px */
	--system-spacing-inset-lg:  var(--system-space-8);  /*  32px */
	--system-spacing-inset-xl:  var(--system-space-10); /*  40px */
	--system-spacing-inset-2xl: var(--system-space-20); /*  80px */
	--system-spacing-inset-3xl: var(--system-space-32); /* 128px */
	--system-spacing-inset-4xl: var(--system-space-40); /* 160px */

	/* ── GAP ── */
	--system-spacing-gap-3xs: var(--system-space-1);  /*  4px */
	--system-spacing-gap-2xs: var(--system-space-2);  /*  8px */
	--system-spacing-gap-xs:  var(--system-space-3);  /* 12px */
	--system-spacing-gap-sm:  var(--system-space-4);  /* 16px */
	--system-spacing-gap-md:  var(--system-space-6);  /* 24px */
	--system-spacing-gap-lg:  var(--system-space-8);  /* 32px */
	--system-spacing-gap-xl:  var(--system-space-10); /* 40px */
	--system-spacing-gap-2xl: var(--system-space-16); /* 64px */
	--system-spacing-gap-3xl: var(--system-space-20); /* 80px */

	/* ── CONTEXTUAL ── */
	--system-spacing-wrapper:        clamp(var(--system-spacing-gap-xl), 5.5cqi, var(--system-spacing-inset-4xl));
	--system-spacing-section-top:    var(--system-spacing-inset-3xl);
	--system-spacing-section:        var(--system-spacing-inset-2xl);
	--system-spacing-between-blocks: var(--system-spacing-gap-3xl);
}

@container page-root (max-width: 1800px) {
	.page-root > * {
		--system-spacing-section-top:    var(--system-spacing-inset-2xl);
		--system-spacing-between-blocks: var(--system-spacing-gap-2xl);
	}
}

@container page-root (max-width: 1500px) {
	.page-root > * {
		--system-spacing-wrapper: var(--system-spacing-inset-xl);
		--system-spacing-section: var(--system-space-16);
	}
}

@container page-root (max-width: 1240px) {
	.page-root > * {
		--system-spacing-wrapper: var(--system-spacing-inset-lg);
	}
}

@container page-root (max-width: 1024px) {
	.page-root > * {
		--system-spacing-between-blocks: var(--system-space-12);
		--system-spacing-section:        var(--system-space-12);
	}
}

@container page-root (max-width: 768px) {
	.page-root > * {
		--system-spacing-wrapper: var(--system-space-5);
	}
}




/* =============================================================================

   TYPOGRAPHY

   ============================================================================= */

:root {

	/* ── LINE-HEIGHT (imutável) ── */
	--system-line-height-2xs: 0.85;
	--system-line-height-xs:  0.95;
	--system-line-height-sm:  1.2;
	--system-line-height-md:  1.3;
	--system-line-height-lg:  1.4;
	--system-line-height-xl:  1.6;

	/* ── LETTER-SPACING (imutável) ── */
	--system-letter-spacing-2xs: -0.04em;
	--system-letter-spacing-xs:  -0.02em;
	--system-letter-spacing-sm:  -0.01em;
	--system-letter-spacing-md:  0;
	--system-letter-spacing-lg:  0.01em;
	--system-letter-spacing-xl:  0.02em;

	/* ── DISPLAY ── Título de página (header de single produto/case) */
	--system-font-size-display-lg:      clamp(150px, 12cqi, 229px);
	--system-line-height-display-lg:    var(--system-line-height-2xs);
	--system-letter-spacing-display-lg: var(--system-letter-spacing-2xs);

	/* ── HEADING ── Título de seção dentro das páginas */
	--system-font-size-heading-lg:      clamp(38px, 3.7cqi, 65px);
	--system-line-height-heading-lg:    var(--system-line-height-xs);
	--system-letter-spacing-heading-lg: var(--system-letter-spacing-sm);

	/* ── BODY ── Texto de corpo */
	--system-font-size-body-lg:      25px;
	--system-line-height-body-lg:    var(--system-line-height-sm);
	--system-letter-spacing-body-lg: var(--system-letter-spacing-sm);

	--system-font-size-body-md:      21px;
	--system-line-height-body-md:    var(--system-line-height-md);
	--system-letter-spacing-body-md: var(--system-letter-spacing-sm);

	--system-font-size-body-sm:      18px;
	--system-line-height-body-sm:    var(--system-line-height-sm);
	--system-letter-spacing-body-sm: var(--system-letter-spacing-sm);
}

@container page-root (max-width: 1500px) {
	.page-root > * {
		--system-font-size-body-lg: 22px;
		--system-font-size-body-md: 20px;
		--system-font-size-body-sm: 17px;
	}
}

@container page-root (max-width: 1240px) {
	.page-root > * {
		--system-font-size-display-lg: clamp(140px, 12cqi, 170px);
		--system-font-size-body-lg:    20px;
		--system-font-size-body-md:    18px;
		--system-font-size-body-sm:    16px;
	}
}

@container page-root (max-width: 1024px) {
	.page-root > * {
		--system-font-size-display-lg: clamp(120px, 10cqi, 140px);
		--system-font-size-body-lg:    19px;
		--system-font-size-body-md:    17px;
		--system-font-size-body-sm:    16px;
	}
}

@container page-root (max-width: 768px) {
	.page-root > * {
		--system-font-size-display-lg: 68px;
	}
}

@container page-root (max-width: 500px) {
	.page-root > * {
		--system-font-size-display-lg: 59px;
	}
}




/* =============================================================================

   COMPONENTS

   ============================================================================= */

:root {
	--system-menu-h:      80px;
	--system-mini-menu-h: 90px;
	--system-mini-menu-w: 440px;
}

@media (max-width: 1024px) {
	:root {
		--system-mini-menu-h: 80px;
		--system-mini-menu-w: 400px;
	}
}

@media (max-width: 768px) {
	:root {
		--system-menu-h:      60px;
		--system-mini-menu-h: 90px;
		--system-mini-menu-w: calc(100vw - 20px);
	}
}




/* =============================================================================

   RADIUS

   ============================================================================= */

:root {
	--system-border-radius-xs: 8px;
	--system-border-radius-sm: 10px;
	--system-border-radius-md: 15px;
	--system-border-radius-lg: 20px;
}

@container page-root (max-width: 1024px) {
	.page-root > * {
		--system-border-radius-md: 10px;
	}
}