/*
 * SEALCOIN base styles (Phase 4 design-system foundation).
 *
 * theme.json is the single source of truth for design tokens. This file only
 * covers what theme.json cannot express: short token aliases (docs/05), a
 * visible focus ring, balanced heading wrapping, motion-safe scrolling and
 * accessibility utilities. It contains no colour or size literals; every value
 * comes from a theme.json preset or custom property.
 *
 * Breakpoints (docs/05 §3.1; CSS custom properties cannot be used inside
 * media queries, so components repeat these literal values):
 *   lg 1080px · md 900px (navigation drawer) · sm 760px · xs 520px
 */

:root {
	color-scheme: dark;

	/* Colour aliases. */
	--c-orange: var(--wp--preset--color--orange);
	--c-orange-hover: var(--wp--preset--color--orange-hover);
	--c-orange-line: var(--wp--preset--color--orange-line);
	--c-black: var(--wp--preset--color--black);
	--c-navy: var(--wp--preset--color--navy);
	--c-panel: var(--wp--preset--color--panel);
	--c-panel-2: var(--wp--preset--color--panel-2);
	--c-ink-deep: var(--wp--preset--color--ink-deep);
	--c-text: var(--wp--preset--color--text);
	--c-muted: var(--wp--preset--color--muted);
	--c-faint: var(--wp--preset--color--faint);
	--c-paper: var(--wp--preset--color--paper);
	--c-ink: var(--wp--preset--color--ink);
	--c-ink-muted: var(--wp--preset--color--ink-muted);
	--c-on-orange: var(--wp--preset--color--on-orange);
	--c-blue: var(--wp--preset--color--blue-accent);
	--c-gold: var(--wp--preset--color--gold-accent);
	--c-ok: var(--wp--preset--color--ok);
	--c-bad: var(--wp--preset--color--bad);
	--gradient-brand: var(--wp--preset--gradient--brand);

	/* Derived lines (PoC --line / --line-soft), computed from tokens. */
	--line: color-mix(in srgb, var(--wp--preset--color--orange) 30%, transparent);
	--line-soft: color-mix(in srgb, var(--wp--preset--color--slate) 12%, transparent);

	/* Typography aliases. */
	--f-display: var(--wp--preset--font-family--display);
	--f-body: var(--wp--preset--font-family--body);

	/* Shape, elevation and motion aliases. */
	--r-input: var(--wp--preset--border-radius--input);
	--r-sm: var(--wp--preset--border-radius--sm);
	--r-card: var(--wp--preset--border-radius--card);
	--r-builder: var(--wp--preset--border-radius--builder);
	--r-pill: var(--wp--preset--border-radius--pill);
	--shadow-glow: var(--wp--preset--shadow--glow);
	--shadow-lift: var(--wp--preset--shadow--lift);
	--shadow-dialog: var(--wp--preset--shadow--dialog);
	--motion-fast: var(--wp--custom--motion--fast);
	--motion-base: var(--wp--custom--motion--base);
	--motion-slow: var(--wp--custom--motion--slow);
	--motion-easing: var(--wp--custom--motion--easing);
}

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

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

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

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

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

/* Visible focus for every interactive element (WCAG 2.4.7, docs/13). */
:focus-visible {
	outline: 2px solid var(--c-orange-hover);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}