/**
 * artorganic.world design tokens
 *
 * Single source of truth for colour, type, spacing and radius.
 * Loaded after OceanWP's stylesheets (see functions.php).
 */

:root {
	/* Colour: ink */
	--ink: #1C1A17;
	--ink-soft: #4A433B;
	--muted: #5A5148;

	/* Colour: accents */
	--indigo: #2B3A8C;
	--pigment: #A3482A;
	--ochre: #D9A441;

	/* Colour: surfaces */
	--paper: #FBF8F3;
	--paper-2: #F3EDE3;
	--sand: #E4D6BF;
	--line: #D9CFC2;

	/* Typography: families */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body: Inter, system-ui, sans-serif;

	/* Typography: size scale */
	--fs-xs: 14px;
	--fs-sm: 15px;
	--fs-base: 17px;
	--fs-md: 22px;
	--fs-lg: 28px;
	--fs-xl: 36px;
	--fs-2xl: 44px;
	--fs-3xl: 56px;

	/* Spacing: 8px base */
	--space-0-5: 4px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-8: 64px;
	--space-10: 80px;
	--space-12: 96px;

	/* Radius */
	--radius-sm: 12px;
	--radius: 22px;
	--radius-lg: 28px;
}

/**
 * Elementor global kit mapping
 *
 * Elementor defines its globals on body.elementor-kit-{id}; the extra
 * element selector outranks that, so kit-driven widgets pick up our tokens
 * regardless of stylesheet order. Mapped by role from the current kit:
 * primary #E67E50 -> pigment, accent #D4A574 -> ochre, secondary #718096 -> muted,
 * text #2C3539 -> ink, custom #F8F9F9 -> paper.
 */
body[class*="elementor-kit-"] {
	--e-global-color-primary: var(--pigment);
	--e-global-color-secondary: var(--muted);
	--e-global-color-text: var(--ink);
	--e-global-color-accent: var(--ochre);
	--e-global-color-2a9f9ba: var(--paper);

	--e-global-typography-primary-font-family: var(--font-display);
	--e-global-typography-secondary-font-family: var(--font-body);
	--e-global-typography-text-font-family: var(--font-body);
	--e-global-typography-accent-font-family: var(--font-body);
}