/*
 * Eventlers theme: Quiet Stage, slate.
 *
 * This file is the only place colours, fonts, radii and shadows are written as
 * values. Everything else uses them through Tailwind classes (bg-surface,
 * text-fg, bg-primary, font-heading, rounded-button, shadow-panel ...), which
 * point at these variables. Editing a value here restyles the whole site
 * without rebuilding tailwind.css.
 *
 * The active theme is THEME in hooks.py. Every file in this folder defines the
 * same variables; .github/scripts/check_theme.py fails if one is missing.
 */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
	color-scheme: light;

	--el-bg: #F5F5F6;
	--el-surface: #FFFFFF;
	--el-fg: #111113;
	--el-muted: #5C5C66;
	--el-line: #E3E3E6;
	--el-primary: #3E5C8A;
	--el-primary-strong: #2F4A73;
	--el-on-primary: #FFFFFF;
	--el-tint: #E6ECF5;
	--el-accent: #FFC24D;
	--el-on-accent: #111113;
	--el-success: #15803D;
	--el-danger: #B91C1C;
	--el-warn-bg: #FFF4DE;
	--el-brand: #3E5C8A;
	--el-on-brand: #FFFFFF;

	/* Text over photos and posters */
	--el-scrim: rgb(0 0 0 / 0.55);
	--el-on-scrim: #FFFFFF;

	--el-font-heading: "Geist", ui-sans-serif, system-ui, sans-serif;
	--el-font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
	--el-font-mono: "Geist Mono", ui-monospace, monospace;
	--el-heading-weight: 650;
	--el-heading-tracking: -0.03em;

	--el-radius-sm: 8px;
	--el-radius-md: 12px;
	--el-radius-lg: 16px;
	--el-radius-button: 10px;

	--el-shadow-card: 0 2px 10px rgb(0 0 0 / 0.18);
	--el-shadow-panel: 0 18px 40px -20px rgb(0 0 0 / 0.35);
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--el-bg: #0D0D0F;
	--el-surface: #17171A;
	--el-fg: #F2F2F3;
	--el-muted: #A1A1AA;
	--el-line: #2A2A2E;
	--el-primary: #8FA9D6;
	--el-primary-strong: #B0C4E6;
	--el-on-primary: #111113;
	--el-tint: #1C2638;
	--el-accent: #FFC24D;
	--el-on-accent: #111113;
	--el-success: #4ADE80;
	--el-danger: #F87171;
	--el-warn-bg: #3A2C12;
	--el-brand: #8FA9D6;
	--el-on-brand: #111113;
}