/**
 * Dave's Locker News — design tokens
 * Single source of truth for color, type, spacing and radius.
 * Every other stylesheet should read these vars, never hardcode values.
 */
:root {

	/* -- Core surfaces / text -------------------------------------- */
	--color-bg: #FFFFFF;        /* page background */
	--color-surface: #FAFAFA;   /* cards, panels, raised surfaces */
	--color-ink: #14161C;       /* primary text */
	--color-muted: #5B6472;     /* secondary text, meta, captions */
	--color-border: #E5E7EB;    /* hairlines, dividers, input borders */

	/* -- Brand ------------------------------------------------------ */
	--color-brand: #2A1B45;         /* deep purple — logo, headers, dark UI */
	--color-brand-bright: #7C3AED;  /* violet — links, CTAs, accents */

	/* -- Category colors (must match category slugs exactly) -------- */
	--cat-sports: #FF6B35;
	--cat-trending: #FF2D78;
	--cat-politics: #2D6CDF;
	--cat-analysis: #0EA5A0;
	--cat-business: #22C55E;
	--cat-technology: #7C3AED;
	--cat-culture: #F5B700;

	/* -- Typography --------------------------------------------------
	   Loaded self-hosted in fonts.css — enqueue tokens.css + fonts.css together. */
	--font-display: 'Bricolage Grotesque', sans-serif;
	--font-body: 'Hanken Grotesk', sans-serif;
	--font-mono: 'Space Mono', monospace;

	/* -- Layout ------------------------------------------------------ */
	--max-width: 1680px;
	--radius: 14px;
	--radius-sm: 8px;

	/* -- Spacing scale (4px base) -------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
	--space-6: 64px;
}