/**
 * Pinterest First Editorial - Base styles.
 *
 * Design-system foundation only: box sizing, body defaults, typography,
 * links, selection, focus visibility and reduced-motion behaviour.
 * Component styling (header, cards, article, ads) belongs to later phases.
 *
 * All values come from tokens.css (Docs/ARCHITECTURE.md, CSS Rules).
 *
 * @package Pinterest_First_Editorial
 */

/* -------------------------------------------------------------------------
 * Box sizing
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * Body defaults
 * ---------------------------------------------------------------------- */

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

body {
	margin: 0;
	background-color: var(--pfe-color-bg);
	color: var(--pfe-color-text);
	font-family: var(--pfe-font-family);
	font-size: var(--pfe-font-size-md);
	font-weight: var(--pfe-font-weight-regular);
	line-height: var(--pfe-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Overflow safeguard: an over-long unbroken string (a title, a term name,
	 * a URL, comment text) breaks instead of forcing horizontal page scrolling
	 * at narrow widths (Docs/IMPLEMENTATION_PLAN.md, Phase 12). */
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * Headings - editorial hierarchy with generous, predictable rhythm.
 * Fluid heading sizes keep long editorial titles readable at 360px
 * without horizontal scrolling; headings are never clamped in height.
 * ---------------------------------------------------------------------- */

h1,
h2,
h3 {
	text-wrap: balance;
}

h1 {
	margin-block: var(--pfe-space-6) var(--pfe-space-4);
	font-size: var(--pfe-font-size-h1);
	font-weight: var(--pfe-font-weight-bold);
	letter-spacing: var(--pfe-tracking-tight);
	line-height: var(--pfe-leading-tight);
}

h2 {
	margin-block: var(--pfe-space-8) var(--pfe-space-4);
	font-size: var(--pfe-font-size-h2);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
}

h3 {
	margin-block: var(--pfe-space-7) var(--pfe-space-3);
	font-size: var(--pfe-font-size-h3);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
}

h4 {
	margin-block: var(--pfe-space-6) var(--pfe-space-3);
	font-size: var(--pfe-font-size-h4);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
}

h5 {
	margin-block: var(--pfe-space-5) var(--pfe-space-2);
	font-size: var(--pfe-font-size-h5);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
}

h6 {
	margin-block: var(--pfe-space-5) var(--pfe-space-2);
	font-size: var(--pfe-font-size-h6);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
}

/* -------------------------------------------------------------------------
 * Prose defaults - comfortable, scannable long-form reading.
 * ---------------------------------------------------------------------- */

p,
ul,
ol,
dl,
figure,
blockquote {
	margin-block: 0 var(--pfe-space-5);
}

p,
li {
	line-height: var(--pfe-leading-relaxed);
}

ul,
ol {
	padding-inline-start: var(--pfe-space-6);
}

figcaption {
	font-size: var(--pfe-font-size-sm);
	color: var(--pfe-color-text-secondary);
	line-height: var(--pfe-leading-normal);
}

/* -------------------------------------------------------------------------
 * Media - content images scale without layout shift.
 * Frames reserve space via ratio tokens in layout.css; component media
 * uses object-fit: cover inside those frames (Docs/DESIGN_SYSTEM.md #13).
 * ---------------------------------------------------------------------- */

img,
video {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * Links - distinguishable without color alone (Docs/DESIGN_SYSTEM.md #11).
 * ---------------------------------------------------------------------- */

a {
	color: var(--pfe-color-accent-strong);
	text-decoration-line: underline;
	text-decoration-thickness: var(--pfe-underline-thickness);
	text-underline-offset: var(--pfe-underline-offset);
	transition: color var(--pfe-transition-fast);
}

a:hover {
	color: var(--pfe-color-accent-hover);
}

/* -------------------------------------------------------------------------
 * Focus - visible keyboard focus baseline (Docs/DESIGN_SYSTEM.md #20).
 * ---------------------------------------------------------------------- */

:focus-visible {
	outline: var(--pfe-outline);
	outline-offset: var(--pfe-focus-offset);
}

:focus:not(:focus-visible) {
	outline: none;
}

/* -------------------------------------------------------------------------
 * Selection - accent-derived tint.
 * ---------------------------------------------------------------------- */

::selection {
	background-color: var(--pfe-color-selection-bg);
	color: var(--pfe-color-text);
}

/* -------------------------------------------------------------------------
 * Motion - respect reduced-motion preferences.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: var(--pfe-duration-reduced) !important;
		animation-iteration-count: 1 !important;
		transition-duration: var(--pfe-duration-reduced) !important;
		scroll-behavior: auto !important;
	}
}