/*
 * Gala — design tokens, web fonts and the base reset.
 *
 * 2026 branding, rebuilt from the event poster: the Arca red is the canvas (#E11838), gold
 * (#D4B268 / #FFD39D) carries every accent and ornament, and type is warm white (#FFFEF3).
 * There is no black in the palette — the poster's darkest tone is a deep red (#A3121F).
 * Everything downstream (main.css, woocommerce.css) styles with these variables only.
 *
 * Two flat gradients exist in the whole theme and both are the hero/poster red glow, which is
 * the brand key visual. Nothing else gradients, nothing glows.
 */

/* ---------------------------------------------------------------- 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 {
	color-scheme: light;

	/*
	 * Brand red. Minimal by design: the hero and poster glow, and error text. There are no red
	 * buttons, pills or borders anywhere in the 2026 skin.
	 */
	--c-red: #E11838;
	--c-red-dark: #A3121F;
	--c-red-tint: rgba(225, 24, 56, .08);
	--c-red-glow: rgba(225, 24, 56, .12);

	/*
	 * Gold. --c-gold is the accent fill and rule colour; --c-gold-bright is gold as type and as
	 * the hover state of a gold fill; --c-gold-dark is a deep gold for borders only — it reaches
	 * 3.9:1 on the page background, which is fine for a 1px rule and short of AA for words.
	 * Gold used as type always resolves to --c-gold-text (12.2:1 on the page).
	 */
	--c-gold: #D4B268;
	--c-gold-bright: #E8C97A;
	--c-gold-dark: #8A6A2F;
	--c-gold-text: #7A5C22;
	--c-gold-tint: rgba(212, 178, 104, .14);
	--c-gold-tint-2: rgba(212, 178, 104, .24);
	--c-gold-line: rgba(212, 178, 104, .55);

	/* Ink — foreground on the dark canvas. */
	--c-ink: #4A1218;
	--c-ink-2: #6B1C22;
	--c-muted: #7A5C22;
	--c-on-gold: #8C1220;

	/*
	 * Structure. --c-line and --c-gold-line are decorative hairlines: card edges, dividers, the
	 * invitation frame. --c-line-strong is the boundary of a form control, which WCAG 1.4.11
	 * asks to clear 3:1 against what surrounds it, so it is a solid deep gold (3.9:1 on the
	 * page, 3.7:1 on the field fill) rather than a translucent line.
	 */
	--c-line: rgba(212, 178, 104, .45);
	--c-line-strong: #B08A32;

	/*
	 * Surfaces. --c-photo is real white and belongs to product art only: the catalogue images
	 * are white-background JPGs, so their tiles stay white on the red page.
	 *
	 * --c-white / --c-cream / --c-cream-2 keep their names from the 2025 skin so no rule breaks,
	 * but here they resolve to the raised red surfaces.
	 */
	--c-paper: #FFFFFF;
	--c-surface: #FFFBF6;
	--c-surface-2: #FDF2E7;
	--c-photo: #FFFFFF;
	--c-white: var(--c-surface);
	--c-cream: var(--c-surface);
	--c-cream-2: var(--c-surface-2);

	/* Status — lifted for the dark canvas: 9.5:1, 6.9:1 and 12.2:1 on the page background. */
	--c-success: #17703F;
	--c-error: #C0172B;
	--c-warning: #A06A00;

	/* 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;

	/* The invitation's small-caps tracking, used for every eyebrow and label. */
	--track-caps: .18em;
	--track-caps-wide: .28em;

	/* 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 - depth on red is a deeper red shadow, not a neutral black one. */
	--shadow-modal: 0 24px 64px rgba(122, 6, 20, .18);
	--shadow-panel: 0 12px 32px rgba(122, 6, 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;
	background: var(--c-paper);
}

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-gold-text);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

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

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

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

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

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

/*
 * A solid gold selection turns a highlighted field into a gold slab — the redeem input, which
 * the plugin re-selects after a rejected code, is the worst case. A tint reads as a highlight.
 */
::selection {
	background: var(--c-gold-tint-2);
	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;
	}
}