/*
 * Guest-flow design tokens. Source of truth: Figma file 82czIdavj992v8AI7D1Qkg, Foundations sheet (node 22:2).
 * Names match the WEB code syntax of the Figma variables.
 *
 * Everything is scoped to .ef-guest (set on <html> by the guest pages) so the organizer console, crew
 * app and scanner keep the old tokens in tokens.css. Two names exist in both sets with different values
 * (--ef-accent-hover, --ef-border-strong), which is why this file must not use :root.
 */

@font-face {
	font-family: "Instrument Serif";
	src: url("/assets/eventflow/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.ef-guest {
	/* Primitives */
	--ef-neutral-0: #ffffff;
	--ef-neutral-50: #faf8f5;
	--ef-neutral-100: #f4f1ec;
	--ef-neutral-200: #e8e3db;
	--ef-neutral-300: #d6cfc4;
	--ef-neutral-400: #b0a89b;
	--ef-neutral-500: #8a8275;
	--ef-neutral-600: #6b6458;
	--ef-neutral-700: #4f4a41;
	--ef-neutral-800: #34312b;
	--ef-neutral-900: #1f1d19;
	--ef-neutral-950: #141310;

	--ef-maroon-50: #fbeff2;
	--ef-maroon-100: #f5d9e0;
	--ef-maroon-200: #e9afbf;
	--ef-maroon-300: #d67c96;
	--ef-maroon-400: #c4506f;
	--ef-maroon-500: #a8274d;
	--ef-maroon-600: #8a1538;
	--ef-maroon-700: #6e102d;
	--ef-maroon-800: #520c22;
	--ef-maroon-900: #3a0818;

	--ef-success-100: #e4f3eb;
	--ef-success-600: #2e9e6b;
	--ef-success-700: #1e6b47;
	--ef-success-900: #10301f;

	--ef-warning-100: #fcf1d9;
	--ef-warning-600: #e0a100;
	--ef-warning-700: #8a5a00;
	--ef-warning-900: #3a2800;

	--ef-danger-100: #fbe4e2;
	--ef-danger-600: #d93a30;
	--ef-danger-700: #b3261e;
	--ef-danger-900: #3f0f0c;

	--ef-info-100: #e3eefa;
	--ef-info-600: #2f7fd6;
	--ef-info-700: #1f5fa8;
	--ef-info-900: #0f2a4a;

	/* Colour, Light mode */
	--ef-bg-canvas: var(--ef-neutral-50);
	--ef-bg-surface: var(--ef-neutral-0);
	--ef-bg-subtle: var(--ef-neutral-100);
	--ef-bg-inverse: var(--ef-neutral-900);
	--ef-border-default: var(--ef-neutral-200);
	--ef-border-strong: var(--ef-neutral-300);
	--ef-text-primary: var(--ef-neutral-900);
	--ef-text-secondary: var(--ef-neutral-700);
	--ef-text-tertiary: var(--ef-neutral-600);
	--ef-text-inverse: var(--ef-neutral-0);
	--ef-text-on-accent: var(--ef-neutral-0);
	--ef-text-accent: var(--ef-maroon-600);
	--ef-accent-default: var(--ef-maroon-600);
	--ef-accent-hover: var(--ef-maroon-700);
	--ef-accent-subtle: var(--ef-maroon-50);
	--ef-success-bg: var(--ef-success-100);
	--ef-success-fg: var(--ef-success-700);
	--ef-success-solid: var(--ef-success-600);
	--ef-warning-bg: var(--ef-warning-100);
	--ef-warning-fg: var(--ef-warning-700);
	--ef-warning-solid: var(--ef-warning-600);
	--ef-danger-bg: var(--ef-danger-100);
	--ef-danger-fg: var(--ef-danger-700);
	--ef-danger-solid: var(--ef-danger-600);
	--ef-info-bg: var(--ef-info-100);
	--ef-info-fg: var(--ef-info-700);
	--ef-info-solid: var(--ef-info-600);

	/* Spacing */
	--ef-space-4: 4px;
	--ef-space-8: 8px;
	--ef-space-12: 12px;
	--ef-space-16: 16px;
	--ef-space-20: 20px;
	--ef-space-24: 24px;
	--ef-space-32: 32px;
	--ef-space-40: 40px;
	--ef-space-48: 48px;
	--ef-space-64: 64px;

	/* Radius */
	--ef-radius-sm: 6px;
	--ef-radius-md: 10px;
	--ef-radius-lg: 16px;
	--ef-radius-xl: 24px;
	--ef-radius-full: 999px;

	/* Elevation/1..3 */
	--ef-elevation-1: 0 1px 2px rgba(31, 28, 26, 0.06);
	--ef-elevation-2: 0 4px 12px rgba(31, 28, 26, 0.08);
	--ef-elevation-3: 0 12px 32px rgba(31, 28, 26, 0.14);

	/* Font families. The Arabic face is IBM Plex Sans Arabic (already bundled); the Figma file uses Noto Sans Arabic as a stand-in. */
	--ef-font-display: "Instrument Serif", "IBM Plex Sans Arabic", serif;
	--ef-font-ui: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--ef-font-ar: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;

	background: var(--ef-bg-canvas);
	color: var(--ef-text-primary);
	font-family: var(--ef-font-ui);
}

/* The page frame: canvas colour, and a footer that sits at the bottom of short pages. */
.ef-guest body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
	background: var(--ef-bg-canvas);
	color: var(--ef-text-primary);
	line-height: 1.5;
}

.ef-guest main {
	flex: 1;
}

.ef-guest img {
	display: block;
	max-width: 100%;
}

.ef-guest a {
	color: inherit;
}

/*
 * Colour, Dark mode. Same names, new values. data-theme is set on <html> (frontend/src/theme.js and
 * templates/guest/theme_boot.html), so the second selector covers .ef-guest blocks inside the PWA.
 */
.ef-guest[data-theme="dark"],
[data-theme="dark"] .ef-guest {
	color-scheme: dark;
	--ef-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--ef-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.45);
	--ef-elevation-3: 0 12px 32px rgba(0, 0, 0, 0.55);
	--ef-bg-canvas: var(--ef-neutral-950);
	--ef-bg-surface: var(--ef-neutral-900);
	--ef-bg-subtle: var(--ef-neutral-800);
	--ef-bg-inverse: var(--ef-neutral-50);
	--ef-border-default: var(--ef-neutral-700);
	--ef-border-strong: var(--ef-neutral-600);
	--ef-text-primary: var(--ef-neutral-50);
	--ef-text-secondary: var(--ef-neutral-300);
	--ef-text-tertiary: var(--ef-neutral-400);
	--ef-text-inverse: var(--ef-neutral-900);
	--ef-text-on-accent: var(--ef-neutral-0);
	--ef-text-accent: var(--ef-maroon-300);
	--ef-accent-default: var(--ef-maroon-500);
	--ef-accent-hover: var(--ef-maroon-400);
	--ef-accent-subtle: var(--ef-maroon-900);
	--ef-success-bg: var(--ef-success-900);
	--ef-success-fg: var(--ef-success-100);
	--ef-warning-bg: var(--ef-warning-900);
	--ef-warning-fg: var(--ef-warning-100);
	--ef-danger-bg: var(--ef-danger-900);
	--ef-danger-fg: var(--ef-danger-100);
	--ef-info-bg: var(--ef-info-900);
	--ef-info-fg: var(--ef-info-100);
}

/*
 * Text styles. Letter-spacing in Figma is a percentage of the font size, so it is written in em.
 * One class per Figma text style: Display/XL is .ef-type-display-xl, AR/Heading is .ef-type-ar-heading.
 */
.ef-type-display-xl { font: 400 64px/68px var(--ef-font-display); letter-spacing: -0.01em; }
.ef-type-display-l { font: 400 44px/48px var(--ef-font-display); letter-spacing: -0.005em; }
.ef-type-display-m { font: 400 32px/36px var(--ef-font-display); letter-spacing: 0; }

.ef-type-h1 { font: 600 28px/34px var(--ef-font-ui); letter-spacing: -0.005em; }
.ef-type-h2 { font: 600 22px/28px var(--ef-font-ui); letter-spacing: -0.003em; }
.ef-type-h3 { font: 600 18px/24px var(--ef-font-ui); letter-spacing: 0; }

.ef-type-body-l { font: 400 16px/24px var(--ef-font-ui); letter-spacing: 0; }
.ef-type-body-m { font: 400 14px/20px var(--ef-font-ui); letter-spacing: 0; }
.ef-type-body-s { font: 400 13px/18px var(--ef-font-ui); letter-spacing: 0; }

.ef-type-label-m { font: 500 14px/20px var(--ef-font-ui); letter-spacing: 0; }
.ef-type-label-s { font: 500 12px/16px var(--ef-font-ui); letter-spacing: 0; }

.ef-type-overline { font: 600 11px/16px var(--ef-font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.ef-type-button { font: 600 15px/20px var(--ef-font-ui); letter-spacing: 0; }

/* Money and counts: Numeric/L, with tabular figures. Use .ef-tabular (tokens.css) on smaller figures. */
.ef-type-numeric-l { font: 600 24px/28px var(--ef-font-ui); letter-spacing: -0.003em; font-variant-numeric: tabular-nums; }

.ef-type-ar-heading { font: 700 24px/36px var(--ef-font-ar); letter-spacing: 0; }
.ef-type-ar-title { font: 600 18px/28px var(--ef-font-ar); letter-spacing: 0; }
.ef-type-ar-body { font: 400 15px/24px var(--ef-font-ar); letter-spacing: 0; }
.ef-type-ar-label { font: 500 14px/22px var(--ef-font-ar); letter-spacing: 0; }