/**
 * Meanwhile in Music — design tokens.
 *
 * Ported verbatim from the design system's tokens/{colors,typography,spacing,base}.css,
 * concatenated into one file (the source ships them as an @import manifest; four
 * sequential @imports are render-blocking, the values are identical).
 *
 * Google Fonts are enqueued from functions.php rather than @import'ed here.
 *
 * Never hard-code a color/type/space value in theme CSS — reference these vars.
 */

:root {
	/* ── Color ───────────────────────────────────────────────────────────── */
	--ink-900: #1c1712;
	--ink-700: #3a3128;
	--ink-500: #5c5044;

	--paper-000: #fffdf8;
	--paper-050: #faf4e6;
	--paper-100: #f3e8d2;
	--paper-200: #ead8b8;

	--gold-300: #e8c877;
	--gold-500: #d6a438;
	--gold-700: #a97c24;
	--gold-900: #7a591a;

	--rust-500: #c1502e;
	--rust-700: #943a21;

	--maroon-600: #7a2530;
	--maroon-800: #521821;

	--denim-500: #46687a;
	--denim-700: #324e5c;

	--line-soft: rgba(28, 23, 18, .12);
	--line-strong: rgba(28, 23, 18, .28);
	--shadow-color: rgba(28, 23, 18, .16);

	--text-body: var(--ink-900);
	--text-muted: var(--ink-500);
	--text-inverse: var(--paper-050);

	--surface-page: var(--paper-050);
	--surface-card: var(--paper-000);
	--surface-sunken: var(--paper-100);
	--surface-header: var(--paper-100);
	--surface-inverse: var(--ink-900);

	--accent-primary: var(--gold-500);
	--accent-primary-hover: var(--gold-700);
	--accent-secondary: var(--rust-500);
	--accent-tertiary: var(--maroon-600);
	--accent-cool: var(--denim-500);

	--border-default: var(--line-soft);
	--border-strong: var(--line-strong);

	/* ── Type ────────────────────────────────────────────────────────────── */
	--font-display: 'Bebas Neue', impact, sans-serif;
	--font-wordmark: 'Anton', impact, sans-serif;
	--font-script: 'Yellowtail', cursive;
	--font-ui: 'Barlow', -apple-system, sans-serif;
	--font-editorial: 'PT Serif', georgia, serif;

	--text-2xs: .75rem;
	--text-xs: .8125rem;
	--text-sm: .9375rem;
	--text-base: 1.0625rem;
	--text-md: 1.25rem;
	--text-lg: 1.5rem;
	--text-xl: 2rem;
	--text-2xl: 2.75rem;
	--text-3xl: 3.75rem;
	--text-4xl: 5.5rem;
	--text-5xl: 7.5rem;

	--leading-tight: 1.05;
	--leading-snug: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;

	--tracking-tight: -.01em;
	--tracking-normal: 0;
	--tracking-wide: .04em;
	--tracking-wider: .12em;
	--tracking-widest: .22em;

	/* ── Space / shape / motion ──────────────────────────────────────────── */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 2px;
	--radius-pill: 999px;

	--shadow-card: none;
	--shadow-card-hover: 0 3px 0 var(--line-strong);
	--shadow-inset: inset 0 1px 3px rgba(28, 23, 18, .14);

	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(0, 0, .2, 1);
	--duration-fast: 120ms;
	--duration-normal: 200ms;
	--duration-slow: 340ms;

	--container-max: 1240px;
	--container-narrow: 760px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	text-wrap: pretty;
}

a {
	color: var(--rust-700);
	text-decoration: none;
}

a:hover {
	color: var(--gold-700);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	letter-spacing: var(--tracking-wide);
	font-weight: 400;
}

::selection {
	background: var(--gold-300);
	color: var(--ink-900);
}