/*
 * ESellBox site -- design tokens. docs/design-system.md explains every value.
 *
 * Colours come from Elementor's «Global colours» (Site settings), so changing one there changes the whole
 * site: each token reads var(--e-global-color-<id>) and falls back to the same value for pages Elementor
 * does not render (articles, search, 404). The ids are written by provision/site/kit.php.
 */

@font-face {
	font-family: "IRANSansX";
	src: url("../fonts/IRANSansXFaNum-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IRANSansX";
	src: url("../fonts/IRANSansXFaNum-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IRANSansX";
	src: url("../fonts/IRANSansXFaNum-DemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IRANSansX";
	src: url("../fonts/IRANSansXFaNum-Bold.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand: the product's own green (packages/ui tokens.css --primary). */
	--esb-green: var(--e-global-color-primary, #0e6e58);
	--esb-green-deep: var(--e-global-color-greendeep, #0a4f40);
	--esb-green-bright: var(--e-global-color-greenbright, #2f9d80);
	--esb-green-glow: var(--e-global-color-greenglow, #7fd8b8);
	--esb-green-soft: var(--e-global-color-greensoft, #e7f3ef);
	--esb-green-wash: var(--e-global-color-greenwash, #f1f8f5);

	/* Ink: cool, slightly blue greys -- the page reads crisp, not warm. */
	--esb-ink: var(--e-global-color-text, #0f1a2a);
	--esb-ink-2: var(--e-global-color-ink2, #3d4a5c);
	--esb-ink-3: var(--e-global-color-ink3, #5d6a7c);

	/* Surfaces. */
	--esb-white: var(--e-global-color-surface, #ffffff);
	--esb-mist: var(--e-global-color-mist, #f5f7fa);
	--esb-cloud: var(--e-global-color-cloud, #eef2f7);
	--esb-line: var(--e-global-color-line, #e4e8ef);
	--esb-line-2: var(--e-global-color-line2, #d3dae4);

	/* Night: the one dark tone (principles band, final call to action, footer strip). */
	--esb-night: var(--e-global-color-secondary, #0b1220);
	--esb-night-2: var(--e-global-color-night2, #141e33);
	--esb-on-night: var(--e-global-color-onnight, #eef2f8);
	--esb-on-night-2: var(--e-global-color-onnight2, #a7b2c4);

	/* A warm highlight, used for very little: a «recommended» badge, a star, a single word. */
	--esb-accent: var(--e-global-color-accent, #f0a531);
	--esb-accent-ink: #8a5300;

	/*
	 * One hue per part of the product. Icons, tabs and the lifecycle use them so a reader learns
	 * «blue is the inbox» without being told. *-ink is the same hue dark enough for small text on white.
	 */
	--esb-crm: #0e6e58;
	--esb-crm-soft: #e7f3ef;
	--esb-inbox: #2563d6;
	--esb-inbox-soft: #eaf1fd;
	--esb-club: #d98200;
	--esb-club-ink: #9a5b00;
	--esb-club-soft: #fff3df;
	--esb-auto: #6a48d6;
	--esb-auto-soft: #f1edfd;
	--esb-seo: #0a7fa6;
	--esb-seo-soft: #e5f4f9;
	--esb-clinic: #d13a63;
	--esb-clinic-soft: #fdeef2;
	--esb-report: #3f5bd8;
	--esb-report-soft: #edf0fd;

	/* Type. Sizes are fluid, so one value serves every screen. */
	--esb-font: "IRANSansX", Tahoma, "Segoe UI", system-ui, sans-serif;
	--esb-font-latin: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--esb-text-display: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
	--esb-text-h2: clamp(1.55rem, 1.25rem + 1.25vw, 2.3rem);
	--esb-text-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
	--esb-text-lead: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--esb-text-body: 1rem;
	--esb-text-card: 0.9375rem;
	--esb-text-small: 0.875rem;
	--esb-text-tiny: 0.8125rem;
	--esb-leading-display: 1.35;
	--esb-leading-h2: 1.45;
	--esb-leading-body: 1.95;

	/* Space. */
	--esb-section: clamp(4rem, 2.6rem + 5.6vw, 7rem);
	--esb-head-gap: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	--esb-gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
	--esb-container: 1200px;
	--esb-container-wide: 1320px;
	--esb-measure: 44rem;

	/* Shape: generous, soft corners; buttons and chips are pills. */
	--esb-radius-xs: 10px;
	--esb-radius-s: 14px;
	--esb-radius-m: 20px;
	--esb-radius-l: 28px;
	--esb-radius-pill: 999px;

	/* Depth: layered, cool-tinted shadows -- never one heavy blur. */
	--esb-shadow-xs: 0 1px 2px rgb(15 26 42 / 0.06);
	--esb-shadow-s: 0 1px 2px rgb(15 26 42 / 0.05), 0 4px 12px -2px rgb(15 26 42 / 0.06);
	--esb-shadow-m: 0 2px 4px rgb(15 26 42 / 0.04), 0 12px 32px -8px rgb(15 26 42 / 0.12);
	--esb-shadow-l: 0 4px 8px rgb(15 26 42 / 0.04), 0 28px 64px -16px rgb(15 26 42 / 0.2);
	--esb-ring: 0 0 0 3px rgb(14 110 88 / 0.28);

	/* Motion: quick and settled, no bounce. */
	--esb-ease: cubic-bezier(0.22, 0.7, 0.18, 1);
	--esb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--esb-fast: 160ms;
	--esb-mid: 280ms;
	--esb-slow: 640ms;

	/* The header's height, so anchors and sticky panels land below it. */
	--esb-header-h: 72px;
}