/*
 * Base layer — reset, document defaults, layout primitives, shared controls.
 *
 * The document rules below are transcribed from the <style> block in the
 * design source (handoff/source/*.dc.html), which is the rendering ground
 * truth the visual QA harness diffs against.
 *
 * Two deliberate deviations from the source, both flagged in the build log:
 *   1. A visible :focus-visible ring. The approved design defines no focus
 *      state at all, which is a WCAG 2.4.7 failure. Added rather than omitted.
 *   2. prefers-reduced-motion support. The design has no such branch.
 * Neither changes the default rendering, so neither affects pixel fidelity.
 */

/* ---------------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--al-ivory);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ---------------------------------------------------------------------------
 * Document
 *
 * Weight is intentionally left at the 400 default. DESIGN-SYSTEM.md describes
 * the body as 300, but the design source sets only font-family on <body> and
 * opts individual elements into 300. The rendered design wins.
 * ------------------------------------------------------------------------ */

body {
	font-family: var(--al-font-sans);
	color: var(--al-body);
	-webkit-font-smoothing: antialiased;
	min-width: var(--al-min-width);
}

a {
	color: var(--al-body);
	text-decoration: none;
	transition: color var(--al-transition);
}

a:hover {
	color: var(--al-lavender);
}

::selection {
	background: var(--al-selection);
}

/* Deviation 1: the approved design ships no focus state. */
:focus-visible {
	outline: 2px solid var(--al-lavender);
	outline-offset: 2px;
	border-radius: 2px;
}

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

/* Visually hidden but available to assistive tech. */
.al-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.al-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--al-cream);
	color: var(--al-heading);
	font-size: var(--al-button-size);
	transform: translateY(-120%);
}

.al-skip-link:focus {
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------ */

.al-container {
	max-width: var(--al-max-width);
	margin-inline: auto;
}

.al-container--checkout {
	max-width: var(--al-max-width-checkout);
}

.al-container--narrow {
	max-width: var(--al-max-width-narrow);
}

.al-pad {
	padding-inline: var(--al-page-padding);
}

.al-stack {
	display: flex;
	flex-direction: column;
}

.al-row {
	display: flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * Shared type roles
 * ------------------------------------------------------------------------ */

.al-eyebrow {
	font-family: var(--al-font-sans);
	font-weight: var(--al-weight-regular);
	font-size: var(--al-eyebrow-size);
	letter-spacing: var(--al-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--al-eyebrow);
}

/* The 40x1 rule that sits under centred section headings. */
.al-rule {
	width: 40px;
	height: 1px;
	background: var(--al-border-rule);
	border: 0;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Buttons and chips
 * ------------------------------------------------------------------------ */

.al-btn {
	display: inline-block;
	font-family: var(--al-font-sans);
	font-weight: var(--al-weight-regular);
	font-size: var(--al-button-size);
	letter-spacing: var(--al-button-tracking);
	border-radius: var(--al-radius-pill);
	padding: 13px 30px;
	text-align: center;
	transition: background var(--al-transition), border-color var(--al-transition), color var(--al-transition);
}

/* Cart and checkout CTAs are the one documented size exception. */
.al-btn--lg {
	padding: 15px 32px;
}

.al-btn--primary {
	background: var(--al-lavender);
	color: var(--al-on-primary);
}

.al-btn--primary:hover {
	background: var(--al-lavender-hover);
	color: var(--al-on-primary);
}

.al-btn--secondary {
	background: transparent;
	border: 1px solid var(--al-border-secondary);
	color: var(--al-plum-deep);
}

.al-btn--secondary:hover {
	border-color: var(--al-lavender);
	color: var(--al-plum-light);
}

.al-chip {
	display: inline-block;
	border: 1px solid var(--al-border-control);
	background: var(--al-cream);
	color: var(--al-body-mid);
	font-size: var(--al-caption-lg);
	border-radius: var(--al-radius-pill);
	padding: 9px 20px;
	transition: background var(--al-transition), border-color var(--al-transition), color var(--al-transition);
}

.al-chip[aria-pressed='true'],
.al-chip.is-selected {
	border-color: var(--al-lavender);
	background: var(--al-lavender-t2);
}

/*
 * Category filters differ from the tinted chips on two counts: they rest on
 * the page rather than on a fill, and their active state is a solid lavender
 * rather than a tint. They also transition at 0.3s, not 0.35s.
 */
.al-chip--filter {
	background: transparent;
	transition: all var(--al-transition-fast);
}

.al-chip--filter.is-selected {
	background: var(--al-lavender);
	border-color: var(--al-lavender);
	color: var(--al-on-primary);
}
