/* EventFlow design tokens. Source of truth: DESIGN.md. Shared by the PWA and the server-rendered pages. */

@font-face {
	font-family: "Geist";
	src: url("/assets/eventflow/fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("/assets/eventflow/fonts/GeistMono-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("/assets/eventflow/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("/assets/eventflow/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("/assets/eventflow/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

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

:root {
	color-scheme: light;
	--ef-font-sans: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--ef-font-mono: "Geist Mono", ui-monospace, monospace;
	--ef-font-editorial: "Instrument Serif", "IBM Plex Sans Arabic", serif;

	--ef-canvas: #faf9f7;
	--ef-surface: #ffffff;
	--ef-sunken: #f3f1ee;
	--ef-border: #e7e4df;
	--ef-border-strong: #d6d2cb;
	--ef-ink-950: #1c1917;
	--ef-ink-700: #44403c;
	--ef-ink-500: #78716c;
	--ef-ink-400: #a8a29e;
	--ef-accent: #8a1538;
	--ef-accent-hover: #74112f;
	--ef-accent-tint: #f7ebee;
	--ef-accent-fg: #8a1538;
	--ef-success: #15803d;
	--ef-warning: #a16207;
	--ef-danger: #c2410c;

	--ef-shadow-pop: 0 8px 24px -6px rgba(28, 25, 23, 0.12), 0 0 0 1px rgba(28, 25, 23, 0.06);
	--ef-shadow-dialog: 0 24px 48px -12px rgba(28, 25, 23, 0.22);
	--ef-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ef-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
}

/* Dark mode. Values follow DESIGN.md "Semantic tokens": maroon-500 for fills, maroon-300 for text. */
[data-theme="dark"] {
	color-scheme: dark;
	--ef-canvas: #0f0d0c;
	--ef-surface: #1c1917;
	--ef-sunken: #292524;
	--ef-border: #2e2a27;
	--ef-border-strong: #44403c;
	--ef-ink-950: #f5f5f4;
	--ef-ink-700: #d6d3d1;
	--ef-ink-500: #a8a29e;
	--ef-ink-400: #78716c;
	--ef-accent: #a8274d;
	--ef-accent-hover: #c4506f;
	--ef-accent-tint: #3b1520;
	--ef-accent-fg: #d67c96;
	--ef-success: #4fbf8a;
	--ef-warning: #e0a100;
	--ef-danger: #f07a5c;

	--ef-shadow-pop: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
	--ef-shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, 0.6);
}

html {
	font-family: var(--ef-font-sans);
	color: var(--ef-ink-950);
	background: var(--ef-canvas);
	-webkit-font-smoothing: antialiased;
}

/* Arabic: joined letters break under letter-spacing, and need more line height. */
:lang(ar) * {
	letter-spacing: 0 !important;
}

:lang(ar) body {
	line-height: 1.75;
}

.ef-mono,
.ef-tabular {
	font-variant-numeric: tabular-nums;
}

.ef-mono {
	font-family: var(--ef-font-mono);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
}