/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   BBC GEL-inspired design system for Karlsborgskuriren
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* ── Brand ── */
	--kk-brand-blue: #1A3D97;
	--kk-brand-dark-blue: #26365D;
	--kk-brand-red: #F12C10;

	/* ── Ink ── */
	--kk-ink: #121212;
	--kk-ink-light: #404040;
	--kk-ink-subtle: #6E6E6E;
	--kk-ink-muted: #767676;

	/* ── Surface ── */
	--kk-border: #CCCCCC;
	--kk-rule: #DCDCDC;
	--kk-wash: #EEEEEE;
	--kk-canvas: #F5F5F5;
	--kk-white: #FFFFFF;

	/* ── Functional ── */
	--kk-link: #006DEF;
	--kk-link-hover: #003E8A;
	--kk-error: #E4134F;
	--kk-success: #0B8A0B;
	--kk-accent: var(--kk-brand-red);

	/* ── Spacing (8px grid) ── */
	--s1: 0.25rem;   /*  4 */
	--s2: 0.5rem;    /*  8 */
	--s3: 0.75rem;   /* 12 */
	--s4: 1rem;      /* 16 */
	--s5: 1.5rem;    /* 24 */
	--s6: 2rem;      /* 32 */
	--s7: 3rem;      /* 48 */
	--s8: 4rem;      /* 64 */

	/* ── Grid ── */
	--kk-grid-max: 1008px;
	--kk-grid-wide: 1280px;
	--kk-gutter: var(--s4);

	/* ── Fonts ── */
	--serif: "Source Serif 4", Georgia, serif;
	--sans: "Inter", system-ui, sans-serif;

	/* ── Motion ── */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fast: 150ms;
	--med: 300ms;

	/* ── Measure ── */
	--measure: 65ch;
}

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