/* ==========================================================================
   GLOBAL ACCESSIBILITY — VISUALLY HIDDEN TEXT
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}


/* ==========================================================================
   GLOBAL ACCESSIBILITY — SKIP LINK
   ========================================================================== */

.skip-link {
	position: fixed;
	top: var(--space-3);
	inset-inline-start: var(--space-3);
	z-index: 10000;

	padding: var(--space-3) var(--space-4);

	color: var(--color-content-primary);
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-sm);

	box-shadow: var(--shadow-medium);
	transform: translateY(calc(-100% - var(--space-6)));
}

.skip-link:focus {
	transform: translateY(0);
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}


/* ==========================================================================
   PAMI — Semantic Typography Scale
   --------------------------------------------------------------------------
   Semantic aliases built on top of the primitive design tokens from
   base/variables.css and base/typography.css.

   Roles:
   - page title: top-level archive or commerce page heading;
   - product title: primary title on a single product;
   - section title: major content section heading;
   - subsection title: compact panel or sidebar heading;
   - card title: product/category card heading;
   - display price: primary price on a single product.

   Page-specific CSS should consume these roles instead of introducing
   independent clamp() scales.
   ========================================================================== */

:root {
	--font-size-page-title:
		clamp(
			2.125rem,
			4.2vw,
			3.5rem
		);

	--font-size-product-title:
		clamp(
			2rem,
			3.2vw,
			2.75rem
		);

	--font-size-section-title:
		clamp(
			1.5rem,
			2.15vw,
			2rem
		);

	--font-size-subsection-title:
		clamp(
			1.25rem,
			1.5vw,
			1.5rem
		);

	--font-size-card-title:
		clamp(
			0.9375rem,
			1vw,
			1.0625rem
		);

	--font-size-display-price:
		clamp(
			1.25rem,
			1.7vw,
			1.5rem
		);

	--line-height-page-title: 1.04;
	--line-height-product-title: 1.05;
	--line-height-section-title: 1.15;
	--line-height-subsection-title: 1.2;
	--line-height-card-title: 1.4;

	--letter-spacing-page-title: -0.035em;
	--letter-spacing-product-title: -0.035em;
	--letter-spacing-section-title: -0.025em;
	--letter-spacing-subsection-title: -0.018em;
	--letter-spacing-card-title: -0.012em;
}