/**
 * BoraVision base element styling.
 *
 * Purpose:
 * - establishes the default typography, colors and focus behaviour for the whole site
 * - defines the light vs dark interaction variables used by links and buttons
 * - normalizes core HTML elements before template-specific CSS takes over
 *
 * Edit here when:
 * - text feels wrong everywhere, not just in one component
 * - link / focus / selection behaviour must change globally
 * - the default heading and paragraph rhythm should be adjusted site-wide
 *
 * Do not use this file for product cards, WooCommerce archive layout or
 * single-product storytelling sections. Those belong in component/template files.
 */

body.boravision {
	color: var(--bv-color-text);
	background: var(--bv-color-white);
	font-family: var(--bv-font-body);
	font-size: var(--bv-font-size-body);
	font-weight: 400;
	line-height: var(--bv-line-body);
	letter-spacing: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Interaction tokens for light surfaces.
   Components inherit these values automatically inside white sections. */
body.boravision .bv-context-light {
	--bv-interaction-color: var(--bv-color-text);
	--bv-interaction-hover: var(--bv-color-black);
	--bv-interaction-focus: var(--bv-color-black);
	--bv-interaction-border: var(--bv-color-border);
	--bv-interaction-surface: var(--bv-color-surface);
	--bv-interaction-strong: var(--bv-color-black);
	--bv-interaction-strong-hover: var(--bv-color-graphite);
	--bv-interaction-on-strong: var(--bv-color-white);
}

/* Interaction tokens for dark surfaces such as the footer or dark editorial panels. */
body.boravision :is(.bv-context-dark, .bv-footer) {
	--bv-interaction-color: rgb(255 255 255 / 68%);
	--bv-interaction-hover: var(--bv-color-white);
	--bv-interaction-focus: var(--bv-color-white);
	--bv-interaction-border: rgb(255 255 255 / 24%);
	--bv-interaction-surface: rgb(255 255 255 / 10%);
	--bv-interaction-strong: var(--bv-color-white);
	--bv-interaction-strong-hover: var(--bv-color-white);
	--bv-interaction-on-strong: var(--bv-color-black);
}

/* Safe global box-model reset only inside the BoraVision front-end scope. */
body.boravision *,
body.boravision *::before,
body.boravision *::after {
	box-sizing: border-box;
}

/* Base heading system.
   Components may override sizes, but this is the default site fallback. */
body.boravision :where(h1, h2, h3, h4, h5, h6) {
	max-width: 100%;
	margin-block: 0 var(--bv-space-6);
	color: var(--bv-color-black);
	font-family: var(--bv-font-heading);
	font-style: normal;
	font-weight: 600;
	line-height: var(--bv-line-heading);
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

body.boravision h1 { font-size: var(--bv-font-size-h1); line-height: 1.02; }
body.boravision h2 { font-size: var(--bv-font-size-h2); }
body.boravision h3 { font-size: var(--bv-font-size-h3); line-height: 1.12; }
body.boravision h4 { font-size: var(--bv-font-size-h4); line-height: 1.18; }
body.boravision h5 { font-size: var(--bv-font-size-h5); line-height: 1.25; }
body.boravision h6 {
	font-family: var(--bv-font-ui);
	font-size: var(--bv-font-size-h6);
	font-weight: 600;
	line-height: 1.4;
}

/* Long-form content rhythm for regular copy blocks. */
body.boravision :where(p, ul, ol, blockquote) {
	margin-block: 0 var(--bv-space-6);
}

/* Link styling stays contextual by reading the interaction variables above. */
body.boravision :where(a) {
	color: var(--bv-interaction-color);
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--bv-transition-fast), opacity var(--bv-transition-fast);
}

body.boravision :where(a:hover) {
	color: var(--bv-interaction-hover);
}

/* Media should never overflow its container. */
body.boravision :where(img, video, svg) {
	max-width: 100%;
}

body.boravision :where(hr) {
	margin-block: var(--bv-space-12);
	border: 0;
	border-top: var(--bv-border);
}

body.boravision ::selection {
	color: var(--bv-color-white);
	background: var(--bv-color-black);
}

body.boravision :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--bv-interaction-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.boravision *,
	body.boravision *::before,
	body.boravision *::after {
		scroll-behavior: auto;
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}