/* ============================================================
   Design tokens — extracted from the 4 design mockups.
   Only --brand and --brand-dark vary per publication; everything
   else is universal across the Tech Edition network.
   ============================================================ */

:root {
	/* BRAND (overridden per site via Customizer) */
	--brand:      #C0392B;
	--brand-dark: #8B2A1F;

	/* INK (universal) */
	--ink:        #121212;
	--ink-soft:   #333333;
	--muted:      #666666;
	--muted-soft: #888888;

	/* LINES */
	--line:       #e2e2e2;
	--line-soft:  #f0f0f0;

	/* BACKGROUNDS */
	--bg:         #ffffff;
	--bg-cream:   #faf8f5;
	--bg-soft:    #fafafa;
	--highlight:  #fff6ed;

	/* TYPOGRAPHY FAMILIES */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* SPACING SCALE */
	--space-1:  4px;
	--space-2:  8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;

	/* LAYOUT */
	--container-max: 1240px;
	--article-max:    720px;
	--gutter:          24px;

	/* TYPE SCALE */
	--text-xs:  10px;
	--text-sm:  11px;
	--text-base:13px;
	--text-md:  14px;
	--text-lg:  15px;
	--text-xl:  17px;
	--text-2xl: 18px;
	--text-3xl: 22px;
	--text-4xl: 28px;
	--text-5xl: 32px;
	--text-6xl: 36px;
	--text-7xl: 46px;
	--text-8xl: 56px;
	--text-9xl: 72px;

	/* TRANSITIONS */
	--ease-quick: 0.15s ease;
	--ease-base:  0.3s ease;
}

/* Dark mode — flips ink/bg planes; brand stays the brand. */
[data-theme="dark"] {
	--ink:        #ECECEC;
	--ink-soft:   #C8C8C8;
	--muted:      #9A9A9A;
	--muted-soft: #777777;
	--line:       #2A2A2A;
	--line-soft:  #1F1F1F;
	--bg:         #0B0B0B;
	--bg-cream:   #161513;
	--bg-soft:    #141414;
	--highlight:  #20140C;
}

/* Slightly dim photographs in dark mode — prevents harsh contrast with
   near-black backgrounds. Exempt avatars and logos which need full brightness. */
[data-theme="dark"] img:not(.author-photo):not(.custom-logo):not([src*=".svg"]) {
	filter: brightness(0.92);
}