/**
 * NEWSTOOM STARTER — DESIGN TOKENS
 *
 * This file is the single source of truth for visual values. Rebrand by
 * editing tokens here; components in main.css only reference these variables.
 */

:root {
	/* ---- Approved WisLens Brand Core Tokens ------------------------------ */
	--wl-color-primary: #0b0f14;
	--wl-color-accent: #2563eb; /* OPS-215: was #3b82f6 (3.68:1 on paper — failed AA as link/button color); #2563eb = 5.17:1 */
	/* accent for text sitting on dark surfaces (hero panel #0b0f14, media
	   fallback #141a23) — #2563eb measures 3.72 there; #60a5fa = 7.56/6.87 */
	--wl-color-accent-on-dark: #60a5fa;
	--wl-color-secondary: #64748b;
	--wl-color-neutral: #e5e7eb;

	/* ---- Semantic Tokens (preserving --nr-* for test/contract compatibility) */
	--nr-color-ink: var(--wl-color-primary); /* #0B0F14 */
	--nr-color-ink-soft: var(--wl-color-secondary); /* #64748B */
	/* ink-faint must keep >= 4.5:1 on paper, surface and surface-deep (AA) at
	   caption sizes — measured #5d6d80 = 5.30/5.06/4.84 (OPS-215); the former
	   #94a3b8 measured 2.56/2.45/2.34 and violated this contract */
	--nr-color-ink-faint: #5d6d80;
	--nr-color-paper: #ffffff;
	--nr-color-surface: #f8fafc;
	--nr-color-surface-deep: #f1f5f9;
	--nr-color-line: var(--wl-color-neutral); /* #E5E7EB */
	--nr-color-line-strong: #cbd5e1;
	--nr-color-accent: var(--wl-color-accent); /* #2563EB */
	--nr-color-accent-soft: #eff6ff;
	--nr-color-accent-ink: #ffffff;
	--nr-color-ok: #10b981;

	/* ---- Typography (Be Vietnam Pro primary, Newsreader selective) ------- */
	--nr-font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--nr-font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--nr-font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
	--nr-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--nr-text-xs: 0.75rem;
	--nr-text-sm: 0.875rem;
	--nr-text-md: 1rem;
	--nr-text-lg: 1.125rem;
	--nr-text-card: 1.0625rem;

	--nr-text-h1: clamp(2rem, 4.2vw, 2.75rem);
	--nr-text-hero: clamp(1.75rem, 3.5vw, 2.5rem);
	--nr-text-h2: clamp(1.35rem, 2.5vw, 1.75rem);
	--nr-text-h3: 1.125rem;

	--nr-leading-tight: 1.2;
	--nr-leading-body: 1.6;

	/* ---- Editorial measure ------------------------------------------------ */
	/* Article column; ~66ch of body text at --nr-text-md */
	--nr-prose-measure: 42rem;
	/* Max character width for display headings before they wrap harshly.
	   OPS-224: article headings (single H1 + prose h2/h3/h4) intentionally do
	   NOT use this cap any more — they read at --nr-prose-measure. Archive,
	   section and card headings may still adopt it. */
	--nr-heading-max: 22ch;

	/* ---- Spacing scale ---------------------------------------------------- */
	--nr-space-1: 4px;
	--nr-space-2: 8px;
	--nr-space-3: 12px;
	--nr-space-4: 16px;
	--nr-space-5: 24px;
	--nr-space-6: 32px;
	--nr-space-7: 48px;
	--nr-space-8: 64px;
	--nr-space-9: 96px;

	/* ---- Layout (1320px wide shell per frozen contract) ------------------- */
	--nr-container-max: 1320px;
	--nr-container-narrow: 760px;
	--nr-gutter: 24px;
	--nr-section-gap: var(--nr-space-7);
	--nr-header-height: 72px;

	/* ---- Borders, radius, shadow (WisLens modern editorial) --------------- */
	--nr-radius-xs: 4px;
	--nr-radius-s: 8px;
	--nr-radius: 12px;
	--nr-radius-md: 16px;
	--nr-radius-lg: 20px;
	--nr-radius-xl: 24px;
	--nr-radius-pill: 9999px;
	--nr-border: 1px solid var(--nr-color-line);
	--nr-rule-strong: 1px solid var(--nr-color-line);
	--nr-shadow-card: 0 1px 3px rgba(11, 15, 20, 0.05), 0 4px 12px rgba(11, 15, 20, 0.03);
	--nr-shadow-pop: 0 10px 30px rgba(11, 15, 20, 0.1);

	/* ---- Ad slots ----------------------------------------------------------- */
	/* min-height reserves space pre-fill to limit layout shift; empty slots
	   collapse via :empty in main.css. Heights cover standard IAB sizes at
	   their breakpoint (leaderboard 728/90+ , billboard 970/250, mpu 300/250,
	   mobile banner 320/100). */
	--nr-ad-min: 90px;
	--nr-ad-min-wide: 100px;

	/* ---- Motion ------------------------------------------------------------- */
	--nr-transition: 160ms ease;
}

@media (min-width: 720px) {
	:root {
		--nr-ad-min: 90px;
		--nr-ad-min-wide: 90px;
	}
}