/*
 * BLST design tokens (shared by the public site, CMS and Beheer).
 * Look: Apple-style restraint (big type, lots of space, glass nav, soft depth) with an RSPS soul
 * (deep night background, OSRS gold, a hint of parchment and rune-red). Dark first.
 * Add tokens here only additively; never rename existing ones.
 */
:root {
	color-scheme: dark;

	/* Surfaces */
	--bg: #07080a;
	--bg-elevated: #0f1114;
	--surface: #15181d;
	--surface-2: #1c2027;
	--surface-3: #252a33;
	--glass: rgba(18, 20, 24, 0.72);
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);

	/* Text */
	--text: #f5f5f7;
	--text-2: #c7c9ce;
	--text-muted: #8a8f98;
	--text-faint: #5d636d;

	/* Brand: OSRS gold */
	--gold: #f5b83d;
	--gold-strong: #ffcb5c;
	--gold-deep: #b9832a;
	--gold-soft: rgba(245, 184, 61, 0.14);
	--gold-gradient: linear-gradient(135deg, #ffd97a 0%, #f5b83d 45%, #b9832a 100%);

	/* Accents */
	--parchment: #e8dcc0;
	--rune-red: #e5484d;
	--rune-red-soft: rgba(229, 72, 77, 0.14);
	--green: #30d158;
	--green-soft: rgba(48, 209, 88, 0.14);
	--blue: #0a84ff;
	--blue-soft: rgba(10, 132, 255, 0.14);
	--orange: #ff9f0a;

	/* Rank colours (badges) */
	--rank-owner: #ffcb5c;
	--rank-admin: #ff6961;
	--rank-moderator: #8ab4ff;
	--rank-player: #c7c9ce;

	/* Typography: system stack = SF Pro on Apple devices */
	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; /* RSPS/medieval accents */
	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.5rem;
	--fs-3xl: clamp(2.5rem, 5vw, 3.75rem);
	--fs-hero: clamp(3rem, 8vw, 6rem);
	--lh-tight: 1.08;
	--lh-snug: 1.25;
	--lh-body: 1.6;
	--tracking-tight: -0.02em;
	--tracking-wide: 0.12em;

	/* Spacing (4px grid) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* Layout */
	--container: 1200px;
	--container-narrow: 760px;
	--gutter: clamp(1rem, 4vw, 2rem);
	--nav-height: 56px;

	/* Shape & depth */
	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 22px;
	--radius-xl: 30px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
	--glow-gold: 0 0 0 1px rgba(245, 184, 61, 0.35), 0 10px 40px rgba(245, 184, 61, 0.18);

	/* Motion */
	--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 150ms;
	--dur: 280ms;
	--dur-slow: 600ms;

	--focus-ring: 0 0 0 3px rgba(245, 184, 61, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
		--dur-slow: 0ms;
	}
}