/*
 * Design tokens — friendly custom-property aliases.
 *
 * Colors / fonts / sizes / spacing are defined canonically in theme.json (so the
 * block editor gets them too); here we alias them to short names and add the
 * tokens WordPress does not model (radii, hairline, shadows, content widths,
 * header height, transitions). Aliasing to the --wp--preset--* vars guarantees
 * the front end and editor can never drift apart. Fallbacks keep this file
 * usable if loaded standalone.
 */

:root {
	/* Ink (navy) scale */
	--ink-950: var(--wp--preset--color--ink-950, #03102b);
	--ink-900: var(--wp--preset--color--ink-900, #061741);
	--ink-800: var(--wp--preset--color--ink-800, #0a1740);
	--ink-700: var(--wp--preset--color--ink-700, #132050);
	--ink-600: var(--wp--preset--color--ink-600, #1a2661);
	--ink-card: var(--wp--preset--color--ink-card, #141f4c);

	/* Gold */
	--gold-200: var(--wp--preset--color--gold-200, #f6e3b0);
	--gold-400: var(--wp--preset--color--gold-400, #e9c275);
	--gold-600: var(--wp--preset--color--gold-600, #c08f3e);
	--gold-hairline: rgba(233, 194, 117, 0.35);
	--gold-gradient: linear-gradient(180deg, #f6e3b0 0%, #e9c275 50%, #c08f3e 100%);

	/* Pink */
	--pink-300: var(--wp--preset--color--pink-300, #f0a0c8);
	--pink-500: var(--wp--preset--color--pink-500, #c86a96);
	--pink-600: var(--wp--preset--color--pink-600, #ab4e75);

	/* Cream + text */
	--cream-100: var(--wp--preset--color--cream-100, #f6f1e6);
	--text-primary: var(--wp--preset--color--text-primary, #f7f5ef);
	--text-muted: var(--wp--preset--color--text-muted, #b9bfd6);
	--text-on-cream: var(--wp--preset--color--text-on-cream, #1a2044);
	--blue-400: var(--wp--preset--color--blue-400, #4f77a8);

	--color-focus: var(--gold-400);

	/* Fonts */
	--font-display: var(--wp--preset--font-family--display, "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif);
	--font-ui: var(--wp--preset--font-family--ui, "Jost", "Century Gothic", "Futura", system-ui, sans-serif);
	--font-mono: var(--wp--preset--font-family--mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);

	/* Type scale (fluid) */
	--step--1: var(--wp--preset--font-size--small, 0.75rem);
	--step-0: var(--wp--preset--font-size--medium, 0.9375rem);
	--step-1: var(--wp--preset--font-size--large, 1.125rem);
	--step-2: var(--wp--preset--font-size--x-large, clamp(1.375rem, 1.1rem + 1.3vw, 1.875rem));
	--step-3: var(--wp--preset--font-size--xx-large, clamp(2.25rem, 1.4rem + 3.8vw, 3.5rem));

	/* Spacing scale (px: 6 12 18 24 32 48 64 96) */
	--space-1: 0.375rem;
	--space-2: 0.75rem;
	--space-3: 1.125rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;

	/* Radii */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 14px;

	/* Elevation / seat */
	--shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 10px 30px rgba(3, 16, 43, 0.45);
	--seat: 0 0 0 1px rgba(0, 0, 0, 0.35);

	/* Content widths */
	--content-narrow: 760px;
	--content-default: 1140px;
	--content-wide: 1340px;
	--page-gutter: 18px;

	/* Header */
	--header-height: 95px;

	/* Motion */
	--transition-hover: 150ms ease-out;
	--transition-image: 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-hover: 0ms;
		--transition-image: 0ms;
	}
}