/**
 * QRSVP design tokens.
 *
 * The ONLY file in the public stylesheets that contains a colour value, and
 * every one of them is a last-resort fallback. Each token reads, in order:
 *
 *   1. QRSVP's own Elementor global colour (Site Settings → Global Colors →
 *      "QRSVP …"), added by the setup wizard;
 *   2. for brand colours, the site's own Elementor system colour, so a widget
 *      dropped onto an existing page follows that site's palette;
 *   3. the Neutral preset value, identical to QRSVP_Presets::neutral() —
 *      tools/check-contrast.php fails if the two drift.
 *
 * Change a global colour and everything using these tokens follows. A widget
 * that ignores the site's theme is the most common complaint about addon
 * packs; this file is why QRSVP's don't.
 *
 * Text colours deliberately do NOT fall back to Elementor's system "text"
 * colour: its out-of-the-box value (#7A7A7A) is 4.29:1 on white, under the
 * 4.5:1 floor. assets/js/qrsvp-public.js adds a runtime guard for pairs a
 * site's own palette could still break (text on buttons).
 *
 * `.qrsvp-kit` carries the same tokens: the starter page's own sections and
 * headings (Elementor widgets, outside any .qrsvp root) style from them.
 */

.qrsvp,
.qrsvp-kit {
	--qrsvp-primary: var(--e-global-color-qrsvp_primary, var(--e-global-color-primary, #B5472A));
	--qrsvp-on-primary: var(--e-global-color-qrsvp_on_primary, #FFFFFF);
	--qrsvp-accent: var(--e-global-color-qrsvp_accent, var(--e-global-color-accent, #B5472A));
	--qrsvp-band: var(--e-global-color-qrsvp_band, var(--e-global-color-secondary, #1E1B17));
	--qrsvp-on-band: var(--e-global-color-qrsvp_on_band, #FFFCF6);
	--qrsvp-on-band-muted: var(--e-global-color-qrsvp_on_band_muted, #CFC6B8);
	--qrsvp-text: var(--e-global-color-qrsvp_text, #1E1B17);
	--qrsvp-muted: var(--e-global-color-qrsvp_muted, #5B544A);
	--qrsvp-surface: var(--e-global-color-qrsvp_surface, #FFFCF6);
	--qrsvp-surface-alt: var(--e-global-color-qrsvp_surface_alt, #F4EFE6);
	--qrsvp-surface-2: var(--e-global-color-qrsvp_surface_2, #EBE4D6);
	--qrsvp-field: var(--e-global-color-qrsvp_field, #FFFFFF);
	--qrsvp-border: var(--e-global-color-qrsvp_border, #968A79);
	--qrsvp-success: var(--e-global-color-qrsvp_success, #1F4D35);
	--qrsvp-success-bg: var(--e-global-color-qrsvp_success_bg, #DCEBDF);
	--qrsvp-warning: var(--e-global-color-qrsvp_warning, #6B4700);
	--qrsvp-warning-bg: var(--e-global-color-qrsvp_warning_bg, #F6E7C1);
	--qrsvp-danger: var(--e-global-color-qrsvp_danger, #B3261E);
	--qrsvp-allergy: var(--e-global-color-qrsvp_allergy, #8C1D18);
	--qrsvp-allergy-bg: var(--e-global-color-qrsvp_allergy_bg, #FBE9E7);

	/*
	 * Derived, never carrying text on their own: hairlines, the selected
	 * option's tint (text on it stays near-black, ~15:1), the focus halo.
	 */
	--qrsvp-line: color-mix(in srgb, var(--qrsvp-border) 38%, var(--qrsvp-surface));
	--qrsvp-soft: color-mix(in srgb, var(--qrsvp-primary) 9%, var(--qrsvp-field));
	--qrsvp-halo: color-mix(in srgb, var(--qrsvp-primary) 22%, transparent);

	/* Global Fonts: QRSVP's own first, then the site's, then the system. */
	--qrsvp-font-heading: var(--e-global-typography-qrsvp_heading-font-family, var(--e-global-typography-primary-font-family, system-ui));
	/* Two headline roles, as the Halloween reference had them: `heading` is
	   the display face (the hero title, the poster's date, section and
	   big-status titles); `title` is what must stay readable at 16–24px —
	   card values, questions, step titles, totals. With one face for both,
	   a display theme (Alfa Slab One) made the ticket card hard to read. */
	--qrsvp-font-title: var(--e-global-typography-qrsvp_title-font-family, var(--e-global-typography-qrsvp_heading-font-family, var(--e-global-typography-primary-font-family, system-ui)));
	--qrsvp-font-body: var(--e-global-typography-qrsvp_body-font-family, var(--e-global-typography-text-font-family, system-ui));
	--qrsvp-font-ui: var(--e-global-typography-qrsvp_ui-font-family, var(--e-global-typography-accent-font-family, system-ui));
	--qrsvp-font-mono: var(--e-global-typography-qrsvp_mono-font-family, ui-monospace);

	/* Radii: pills for actions, 10 fields, 12 options, 16 guest cards,
	   22 ticket/form/dialog (the widget "Corner radius" control), 24 media. */
	--qrsvp-radius: 22px;
	--qrsvp-r-field: 10px;
	--qrsvp-r-option: 12px;
	--qrsvp-r-card: 16px;
	--qrsvp-r-media: 24px;

	--qrsvp-gap: 16px;
	/* 44px minimum hit target everywhere; the door uses 64px. */
	--qrsvp-hit: 50px;
	--qrsvp-gutter: clamp(20px, 4vw, 48px);
}

/* On a dark band (the register section, the footer): text follows the band. */
.qrsvp--on-dark {
	--qrsvp-text: var(--qrsvp-on-band);
	--qrsvp-muted: var(--qrsvp-on-band-muted);
	--qrsvp-accent: var(--qrsvp-on-band);
}