/**
 * Design tokens for SWARM 2027.
 * Brand blue sourced from is-pair.vistec.ac.th (VISTEC-run symposium site):
 * --global-palette2:#003174 (deep navy) and --global-palette1:#3296ff (accent).
 */
:root {
	/* Brand */
	--color-navy-900: #001e46;
	--color-navy: #003174;
	--color-navy-700: #0a4590;
	--color-blue: #3296ff;
	--color-blue-100: #e8f2ff;
	/* --color-blue fails WCAG AA as text/fill against white or navy at
	   normal text sizes (~3:1). These two are contrast-checked variants:
	   action = white text on this fill hits ~4.9:1; blue-light = this
	   text on the navy hero/strip hits ~7.7:1. Use --color-blue itself
	   only for non-text decoration (badges' light background tint, etc). */
	--color-action: #1f6fd6;
	--color-blue-light: #9fd0ff;

	/* Neutrals */
	--color-ink: #1a202c;
	--color-body: #2d3748;
	--color-muted: #5a6474;
	--color-line: #dfe4ea;
	--color-surface: #ffffff;
	--color-surface-alt: #f5f8fc;

	/* Semantic */
	--color-accent: var(--color-blue);
	--color-accent-contrast: #ffffff;
	--color-focus: #ffb400;

	/* Type */
	--font-display: "Fraunces", "Georgia", serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
	--step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
	--step-3: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
	--step-4: clamp(2.3rem, 1.95rem + 1.75vw, 3.4rem);
	--step-5: clamp(2.8rem, 2.3rem + 2.5vw, 4.4rem);

	/* Space (4px base) */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.5rem;
	--space-2xl: 5rem;
	--space-3xl: 7.5rem;

	/* Layout */
	--container-max: 78rem;
	--container-pad: clamp(1.25rem, 3vw, 2.5rem);
	--radius-s: 6px;
	--radius-m: 12px;
	--radius-l: 20px;
	--shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.08);
	--shadow-card-hover: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.12);

	--transition: 180ms ease;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-ink: #eef2f7;
		--color-body: #cbd5e1;
		--color-muted: #94a3b8;
		--color-line: #2a3542;
		--color-surface: #0f1621;
		--color-surface-alt: #141d2b;
		--color-blue-100: #142a44;
	}
}