/*
 * Gala — design tokens, web fonts and the base reset.
 *
 * Everything downstream (main.css, woocommerce.css) styles with these variables only.
 * No gradients, no glow shadows: one soft shadow token exists and it is for the modal
 * and the mobile menu panel.
 */

/* ---------------------------------------------------------------- Fonts */

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Book.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gotham';
	src: url('../fonts/Gotham-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------- Tokens */

:root {
	/* Brand */
	--c-red: #E61336;
	--c-red-dark: #B80E2A;
	--c-red-tint: #FDECEF;
	--c-gold: #E8BC58;
	--c-gold-dark: #A87F1F;
	--c-gold-tint: #FBF3DE;
	/*
	 * --c-gold-dark reaches 3.7:1 on the light surfaces, which is fine for rules and borders
	 * but short of WCAG AA for small text. --c-gold-text is the same hue taken far enough
	 * down to clear 4.5:1 on paper, cream and gold-tint; use it whenever gold is type.
	 */
	--c-gold-text: #8A6A14;

	/* Ink and structure */
	--c-ink: #141414;
	--c-ink-2: #3B3B3B;
	--c-muted: #6B6B6B;
	--c-line: #E6E1D8;
	--c-line-strong: #CDC6BA;

	/* Surfaces */
	--c-paper: #FFFDFA;
	--c-white: #FFFFFF;
	--c-cream: #F8F4EC;
	--c-cream-2: #F1EBDF;

	/* Status */
	--c-success: #1E7B4D;
	--c-error: #B3261E;
	--c-warning: #8A6D00;

	/* Type */
	--font: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-display: clamp(2.5rem, 5vw, 4.25rem);
	--fs-h1: clamp(2rem, 3.5vw, 3rem);
	--fs-h2: clamp(1.75rem, 3vw, 2.5rem);
	--fs-h3: 1.375rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.75rem;

	/* Spacing — 4/8 scale */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	/* Shape */
	--radius-s: 6px;
	--radius-m: 12px;
	--radius-pill: 999px;

	/* Layout */
	--container: 72rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--section-y: clamp(4rem, 8vw, 7rem);
	--header-h: 4.5rem;

	/* Motion */
	--ease: cubic-bezier(.2, .7, .2, 1);
	--dur: 180ms;

	/* Elevation — the only shadow in the theme */
	--shadow-modal: 0 24px 64px rgba(20, 20, 20, .18);
	--shadow-panel: 0 12px 32px rgba(20, 20, 20, .12);

	/* z-index scale: header 20 · dropdown / floating pills 30 · modal 100 */
	--z-header: 20;
	--z-dropdown: 30;
	--z-modal: 100;
}

/* ---------------------------------------------------------------- Reset */

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

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

body {
	margin: 0;
	background: var(--c-paper);
	color: var(--c-ink-2);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	color: var(--c-ink);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--fs-h2);
	letter-spacing: -0.015em;
}

h3 {
	font-size: var(--fs-h3);
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 500;
}

p {
	text-wrap: pretty;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

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

a {
	color: var(--c-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--c-red-dark);
}

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

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

:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * WooCommerce moves focus to notice containers so screen readers announce them. They are not
 * interactive, and a red ring around a success message reads as an error.
 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
	outline: none;
}

::selection {
	background: var(--c-gold-tint);
	color: var(--c-ink);
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* Motion is opt-out here; the override has to beat component rules. */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}