/* ==========================================================================
   Nexus News — Design tokens (CSS custom properties)
   Colors are also injected inline from the Customizer; these are fallbacks.
   ========================================================================== */

:root {
	/* Brand colors (overridable via Customizer inline CSS). */
	--primary-color: #111827;
	--secondary-color: #374151;
	--accent-color: #E11D48;
	--accent-color-hover: #be123c;
	--background-color: #F8FAFC;
	--article-bg: #FFFFFF;
	--text-color: #1F2937;
	--muted-color: #64748B;
	--border-color: #E5E7EB;

	/* Surfaces derived from the palette. */
	--surface: #FFFFFF;
	--surface-2: #F1F5F9;
	--surface-elevated: #FFFFFF;
	--header-bg: #FFFFFF;
	--topbar-bg: #111827;
	--topbar-text: #E5E7EB;

	/* Typography. */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
	--font-heading: var(--font-sans);
	--font-body: var(--font-sans);

	--article-font-size: 18px;
	--article-line-height: 1.8;
	--article-measure: 720px;   /* comfortable reading width */

	/* Font scale. */
	--fs-xs: 0.75rem;
	--fs-sm: 0.85rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.35rem;
	--fs-xl: 1.75rem;

	/* Spacing scale. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Radii. */
	--radius-sm: 6px;
	--radius: 12px;
	--radius-lg: 18px;
	--radius-pill: 999px;

	/* Shadows (soft, premium, GPU-friendly). */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
	--shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06);
	--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);
	--shadow-accent: 0 8px 24px rgba(225, 29, 72, 0.18);

	/* Layout. */
	--container: 1200px;
	--container-narrow: 820px;
	--header-height: 72px;
	--gap: clamp(1rem, 2.5vw, 1.75rem);

	/* Motion. */
	--transition-fast: 140ms ease;
	--transition: 240ms cubic-bezier(0.2, 0.7, 0.3, 1);

	/* Focus ring. */
	--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);
}

/* ---- Dark mode: applied when <html data-theme="dark"> ---- */
[data-theme="dark"] {
	--primary-color: #f8fafc;
	--secondary-color: #cbd5e1;
	--accent-color: #fb7185;
	--accent-color-hover: #f43f5e;
	--background-color: #0b1120;
	--article-bg: #111827;
	--text-color: #e2e8f0;
	--muted-color: #94a3b8;
	--border-color: #1f2937;

	--surface: #111827;
	--surface-2: #1e293b;
	--surface-elevated: #172033;
	--header-bg: #0f172a;
	--topbar-bg: #020617;
	--topbar-text: #cbd5e1;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}