/* ==========================================================================
   EXTRACT LABS — BASE PRIMITIVES
   --------------------------------------------------------------------------
   Small, shared building blocks that recur across every component, built
   entirely on tokens. Enqueue AFTER el-tokens.css. A component can use these
   classes directly or restyle locally by overriding tokens in its own scope.
   Everything here is namespaced .el-* to avoid theme collisions.

   CONVENTION: a component reaches for the nearest primitive first
   (.el-h2, .el-eyebrow, .el-btn, .el-card …). When it needs a tweak it
   COMPOSES the primitive and adds a BEM modifier that overrides only via
   tokens — never re-declaring font-family or hard-coding a colour.
   e.g.  <h2 class="el-h2 split-media__heading"> … </h2>
   ========================================================================== */

/* ---- layout ---------------------------------------------------------- */

.el-section {
	padding-block: var(--el-section-y);
}
.el-section--warm { background: var(--el-color-bg-warm); }
.el-section--cool { background: var(--el-color-bg-cool); }

.el-container {
	max-width: var(--el-container);
	margin-inline: auto;
	padding-inline: var(--el-space-5);
}

/* section header: eyebrow > heading > optional sub, with explore link inline */
.el-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--el-space-5);
	flex-wrap: wrap;
	margin-bottom: var(--el-space-6);
}

/* ---- eyebrow (the uppercase letterspaced label + hairline signature) -- */

.el-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	letter-spacing: var(--el-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--el-color-text-soft);
	margin: 0 0 var(--el-space-3);
}
/* the thin rule that trails the menu-style eyebrows */
.el-eyebrow--ruled::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--el-color-rule);
	min-width: var(--el-space-6);
}

/* ---- headings -------------------------------------------------------- */

.el-h1, .el-h2, .el-h3, .el-h4, .el-h5 {
	font-family: var(--el-font-display);
	color: var(--el-color-text);
	letter-spacing: var(--el-tracking-tight);
	line-height: var(--el-leading-tight);
	margin: 0;
}
.el-h1 { font-size: var(--el-text-2xl); font-weight: var(--el-weight-bold); }
.el-h2 { font-size: var(--el-text-xl);  font-weight: var(--el-weight-bold); }
.el-h3 { font-size: var(--el-text-lg);  font-weight: var(--el-weight-semibold); letter-spacing: 0; }
.el-h4 { font-size: var(--el-text-md);  font-weight: var(--el-weight-semibold); letter-spacing: 0; line-height: var(--el-leading-snug); }
.el-h5 { font-size: var(--el-text-base); font-weight: var(--el-weight-semibold); letter-spacing: 0; line-height: var(--el-leading-snug); }

/* optional serif treatment for editorial headings (blog, story sections).
   Opt in deliberately: <h2 class="el-h2 el-h--serif"> */
.el-h--serif { font-family: var(--el-font-serif); letter-spacing: 0; font-weight: var(--el-weight-medium); }

.el-sub {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-muted);
	max-width: 60ch;
	margin: var(--el-space-2) 0 0;
}

.el-prose {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-body);
	color: var(--el-color-text-soft);
}

/* ---- buttons --------------------------------------------------------- */

.el-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--el-space-2);
	font-family: var(--el-font-display);
	font-size: var(--el-text-base);
	font-weight: var(--el-weight-semibold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	border-radius: var(--el-radius-pill);
	padding: 0.75rem 1.5rem;
	transition: background var(--el-duration) var(--el-ease),
	            color var(--el-duration) var(--el-ease),
	            transform var(--el-duration) var(--el-ease);
}
.el-btn:focus-visible {
	outline: var(--el-focus-ring);
	outline-offset: var(--el-focus-offset);
}

/* primary — solid pine, the references' default action */
.el-btn--primary {
	background: var(--el-color-action);
	color: var(--el-color-on-action);
}
.el-btn--primary:hover { background: var(--el-color-action-hover); }

/* cart — solid black, reserved for the Add to cart action only */
.el-btn--cart {
	background: var(--el-color-cart);
	color: var(--el-color-on-cart);
}
.el-btn--cart:hover { background: var(--el-color-cart-hover); }

/* secondary — outlined */
.el-btn--secondary {
	background: var(--el-color-surface);
	color: var(--el-color-text);
	border-color: var(--el-color-text);
}
.el-btn--secondary:hover {
	background: var(--el-color-text);
	color: var(--el-white);
}

/* ghost — for image overlays */
.el-btn--ghost {
	background: rgba(255, 255, 255, 0.92);
	color: var(--el-color-text);
}
.el-btn--ghost:hover { background: var(--el-white); }

.el-btn--sm  { padding: 0.5rem 1rem;   font-size: var(--el-text-sm); }
.el-btn--lg  { padding: 0.9rem 1.75rem; }
.el-btn--block { width: 100%; }

/* decorative button — a span styled like a button (non-interactive) */
.el-cta {
	display: inline-block;
	font-family: var(--el-font-display);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-semibold);
	border: 1.5px solid var(--el-color-text);
	border-radius: var(--el-radius-pill);
	padding: 0.45rem 1rem;
	color: var(--el-color-text);
	background: transparent;
	transition: background var(--el-duration) var(--el-ease),
	            color var(--el-duration) var(--el-ease);
}

/* ---- chips / badges -------------------------------------------------- */
/* The recurring pill: product badges, attribute tags, cert marks, filters.
   Compose a variant: <span class="el-chip el-chip--solid"> … </span> */
.el-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--el-space-2);
	border-radius: var(--el-radius-pill);
	padding: var(--el-space-2) var(--el-space-3);
	font-family: var(--el-font-display);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	line-height: 1;
}
/* solid pine fill — primary product/attribute badge */
.el-chip--solid {
	background: var(--el-color-action);
	color: var(--el-color-on-action);
}
/* light outline — for chips that carry their own colour mark (cert logos) */
.el-chip--outline {
	background: var(--el-color-surface-warm);
	border: 1px solid var(--el-color-border);
	color: var(--el-color-text);
	font-weight: var(--el-weight-medium);
}
/* the uppercase letterspaced label treatment, opt-in */
.el-chip--eyebrow {
	text-transform: uppercase;
	letter-spacing: var(--el-tracking-eyebrow);
}

/* ---- surfaces -------------------------------------------------------- */

.el-card {
	background: var(--el-color-surface);
	border: var(--el-card-border);
	border-radius: var(--el-radius);
	box-shadow: var(--el-card-shadow);
	transition: transform var(--el-duration) var(--el-ease),
	            box-shadow var(--el-duration) var(--el-ease);
}
.el-card--interactive:hover {
	transform: var(--el-lift);
	box-shadow: var(--el-shadow-hover);
}

/* hairline divider */
.el-rule {
	border: 0;
	border-top: 1px solid var(--el-color-rule);
	margin: 0;
}

/* ---- utility --------------------------------------------------------- */

.el-meta {
	font-family: var(--el-font-mono);
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	letter-spacing: 0.02em;
}