/**
 * Element defaults.
 *
 * Loads after tokens.css and before any component CSS. Every value here comes
 * from a token — if you need a number that is not a token, add the token
 * first. The visual regression suite catches token drift; nothing catches a
 * magic value in a component file except review.
 *
 * @package CreativeCanvas
 */

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

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	/*
	 * Sticky footer: on a page shorter than the viewport the footer should sit
	 * at the bottom rather than leaving a band of ground colour beneath it.
	 * dvh so mobile browser chrome does not cause a jump.
	 */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background-color: var(--cc-color-page); /* the frame (header, main, footer) is Soft White on this */
	color: var(--cc-color-text);
	font-family: var(--cc-font-body);
	font-size: var(--cc-text-body);
	line-height: var(--cc-leading-body);
	letter-spacing: var(--cc-tracking-base);
	font-optical-sizing: auto; /* DM Sans carries an opsz axis */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings: Fredoka, never negatively tracked. See docs/design-tokens.md. */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	/* Full ink: body copy softened to --cc-color-text on 2026-09-11 and
	 * headings must not follow it, or every title turns grey. */
	color: var(--cc-color-ink);
	font-family: var(--cc-font-display);
	font-weight: var(--cc-weight-medium); /* Playfair Display 500, as the handoff sets every heading */
	letter-spacing: var(--cc-tracking-heading);
	letter-spacing: 0;
	line-height: var(--cc-leading-snug);
	text-wrap: balance;
}

h1 {
	font-size: var(--cc-text-xxxl); /* one page-title step on every page: Playfair 500, 38 / 24 (handoff h2 scale) */
	line-height: var(--cc-leading-tight);
	letter-spacing: var(--cc-tracking-display);
}

h2 {
	font-size: var(--cc-text-xxxl);
	line-height: var(--cc-leading-snug);
}

h3 {
	font-size: var(--cc-text-xxl);
	line-height: var(--cc-leading-normal);
	letter-spacing: var(--cc-tracking-subheading);
}

h4 {
	font-size: var(--cc-text-lg);
}

h5 {
	font-size: var(--cc-text-base);
}

h6 {
	font-size: var(--cc-text-ui);
}

p,
ul,
ol,
figure,
blockquote {
	margin: 0;
}

/* Long-form copy gets a comfortable measure and looser leading. */
.cc-prose {
	max-width: var(--cc-prose-max);
	line-height: var(--cc-leading-relaxed);
}

/*
 * Links in running text: the action colour's darker hover shade, underlined
 * (it was chosen when the action colour was Blue Grey, 4.3:1 on Soft White;
 * Espresso's hover shade is far above AA). The underline stays so a link
 * never relies on hue alone. Components (nav, cards, footer, buttons) set
 * their own colour and decoration.
 */
a {
	color: var(--cc-color-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--cc-duration-fast) var(--cc-ease);
}

a:hover {
	color: var(--cc-color-ink);
}

/* A linked heading stays ink. */
h1 a,
h2 a,
h3 a,
h4 a {
	color: inherit;
}

/* One global focus ring, in currentColor so it works on any surface. */
:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

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

/* An image is square by default. Rounded photo tiles get their radius from
 * the frame that clips them (.cc-card__media, .cc-home-tile, .cc-home-cats__tile),
 * so a bare photograph — the banner — keeps straight edges (owner, 2026-09-20). */
img {
	border-radius: 0;
}

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

hr {
	border: 0;
	border-top: var(--cc-border);
	margin-block: var(--cc-space-8);
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	text-align: left;
	padding: var(--cc-space-3) var(--cc-space-4);
	border-bottom: var(--cc-border);
}

/*
 * Wide content must scroll inside its own container so the page body never
 * scrolls sideways.
 */
.cc-scroll-x {
	overflow-x: auto;
}

/* Visible only to screen readers, until focused. */
.cc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}