/**
 * Rafi Portfolio — design tokens.
 *
 * Every value below is overridable from Appearance → Customize → Design System,
 * which prints a `:root` block after this file. Widgets in the companion plugin
 * read these same tokens, so retuning here retunes the whole site.
 */

:root {
	/* — ground — */
	--rp-bg: #f2f2f3;
	--rp-surface: #e9e9ea;
	--rp-text: #1d1f20;
	--rp-accent: #5980a6;
	--rp-accent-2: #728fab;
	--rp-divider: color-mix(in srgb, var(--rp-text) 16%, transparent);

	/* — neutral ramp — */
	--rp-neutral-100: #f5f5f8;
	--rp-neutral-200: #e7e7ea;
	--rp-neutral-300: #d4d4d7;
	--rp-neutral-400: #b7b7ba;
	--rp-neutral-500: #98989b;
	--rp-neutral-600: #7a7a7d;
	--rp-neutral-700: #5d5d60;
	--rp-neutral-800: #424244;
	--rp-neutral-900: #2b2b2d;

	/* — accent ramp — */
	--rp-accent-100: #eef6ff;
	--rp-accent-200: #d6ebff;
	--rp-accent-300: #b5d9fd;
	--rp-accent-400: #94bce3;
	--rp-accent-500: #749dc4;
	--rp-accent-600: #597ea3;
	--rp-accent-700: #416180;
	--rp-accent-800: #2c455d;
	--rp-accent-900: #1d2d3d;

	/* — type — */
	--rp-font-heading: "Barlow Condensed", system-ui, -apple-system, sans-serif;
	--rp-font-heading-weight: 600;
	--rp-font-body: "Barlow", system-ui, -apple-system, sans-serif;

	/* — rhythm — */
	--rp-leading: 24px;
	--rp-edge: clamp(20px, 5vw, 72px);

	/* Page gutter. Must match the left/right padding on Elementor's outer
	   containers so the header, footer and CTA bar line up with page content. */
	--rp-gutter: 20px;
	--rp-container: 1200px;
	--rp-section-gap: 76px;

	--rp-space-1: 3.4px;
	--rp-space-2: 6.8px;
	--rp-space-3: 10.2px;
	--rp-space-4: 13.6px;
	--rp-space-6: 20.4px;
	--rp-space-8: 27.2px;

	/* — shape: this system is square on purpose — */
	--rp-radius: 0px;

	--rp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--rp-neutral-900) 14%, transparent);
	--rp-shadow-md: 0 3px 10px color-mix(in srgb, var(--rp-neutral-900) 16%, transparent);
	--rp-shadow-lg: 0 12px 32px color-mix(in srgb, var(--rp-neutral-900) 22%, transparent);
}

/* Older browsers without color-mix() still get a usable divider. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root { --rp-divider: rgba(29, 31, 32, 0.16); }
}