/* Ink & Emerald News — design tokens.
   Color names = Elementor Global Color names in kebab-case (Site Settings → Global Colors),
   same order, same hex. Keep both in sync: Elementor gives custom globals random IDs
   (--e-global-color-xxxx), so custom CSS must use these properties, never Elementor's. */
:root {
	/* Global Colors (Elementor order) */
	--primary: #111827;
	--accent: #0F766E;
	--accent-hover: #115E59;
	--highlight: #F59E0B;
	--background: #FFFFFF;
	--surface: #F8FAFC;
	--border: #E2E8F0;
	--text: #0F172A;
	--muted: #64748B;
	--positive: #16A34A;
	--positive-text: #15803D;
	--negative: #DC2626;
	--info: #2563EB;
	--info-ink: #1D4ED8;
	--info-soft: #EFF6FF;
	--accent-soft: #F0FDFA;
	--accent-on-dark: #2DD4BF;
	--on-primary-muted: #94A3B8;
	--border-input: #64748B;
	--disabled-ink: #94A3B8;
	--on-highlight: #111827;

	/* Aliases used by components.css (design-system token names) */
	--bg: var(--background);
	--on-accent: #FFFFFF;
	--on-primary: #FFFFFF;

	/* Type */
	--font-sans: "IranYekan FaNum", Tahoma, system-ui, sans-serif;

	/* Spacing — 4px base, no other values */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;

	/* Radius */
	--radius-none: 0;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-full: 9999px;

	/* Elevation — the only shadow */
	--shadow-float: 0 1px 2px #0f172a0f, 0 4px 12px #0f172a14;

	/* Layout */
	--layout-container: 1200px;
	--layout-gutter: 24px;
	--layout-sidebar: 300px;

	/* Sizes */
	--size-control-sm: 32px;
	--size-control-md: 40px;
	--size-control-lg: 48px;
	--size-input: 44px;
	--size-avatar: 32px;
	--size-ticker: 44px;

	/* Ad slot reserved heights */
	--ad-970x250: 250px;
	--ad-728x90: 90px;
	--ad-336x280: 280px;
	--ad-300x250: 250px;
	--ad-300x600: 600px;
	--ad-320x100: 100px;
}