/*
 * base.css - element defaults.
 *
 * LAYER 2 of 5. Unopinionated element-level baseline only.
 *
 * NOT here: component styling, page layout, brand decoration. Product cards, buttons with
 * brand colour, headers and heroes belong to their own component files in
 * assets/css/components/ and to the tasks that own them.
 *
 * All directional values use logical properties - see docs/04-implementation/RTL.md.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--zahra-color-page);
	color: var(--zahra-color-ink);
	font-family: var(--zahra-font-sans);
	font-size: var(--zahra-font-size-base);
	line-height: var(--zahra-line-height-base);
}

/*
 * Headings inherit the family and keep the browser's relative sizing. No type scale is
 * imposed: the design has not formalized one (docs/01-design/tokens/typography.md).
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.5em;
	font-family: inherit;
}

p,
ul,
ol,
dl,
figure,
blockquote {
	margin-block: 0 1em;
}

/* Media defaults - responsive by default, never overflowing the container. */
img,
picture,
video,
canvas,
svg,
iframe {
	max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	height: auto;
}

/* Form controls do not inherit typography from the page by default. Make them. */
input,
button,
select,
textarea,
optgroup {
	font: inherit;
	color: inherit;
	margin: 0;
}

textarea {
	resize: vertical;
}

/*
 * Anchor baseline. Brand link colour is applied by components, not globally, so that
 * navigation, buttons and body copy are not forced to share one treatment.
 */
a {
	color: inherit;
}

/* Buttons reset to a neutral, accessible baseline. Visual variants are components. */
button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

button:disabled {
	cursor: default;
}

/* Tables keep predictable borders once components style them. */
table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--zahra-color-line);
	margin-block: 1em;
}

/*
 * Visible focus is mandatory and must never be removed.
 * docs/04-implementation/ACCESSIBILITY.md section 1.
 */
:focus-visible {
	outline: var(--zahra-focus-ring-width) solid var(--zahra-focus-ring-color);
	outline-offset: var(--zahra-focus-ring-offset);
}

/*
 * Respect a user's reduced-motion preference globally. Components that animate must not
 * undo this. The design's hero carousel has no reduced-motion handling - a known gap
 * recorded in docs/04-implementation/ACCESSIBILITY.md.
 */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}