/*
 * HOMZ design tokens.
 * Source: Figma HOMZ (X0Lqny4MFF5vUgjoC6zdKE) local variables and text styles.
 * Names follow the Figma variable names, slashes turned into dashes.
 * Light only: the site has no dark mode.
 */

:root {
	color-scheme: light;

	/* Colour */
	--c-primary: #4b0bdd;
	--c-primary-hover: #310790;     /* button/filledhover */
	--c-secondary: #08e08a;         /* green accent, icons, ticks */
	--c-dark-purple: #8154e7;
	--c-purple-soft: #c0aaf3;       /* tag/medium border */
	--c-bg-white: #ffffff;
	--c-bg-grey: #fafafa;
	--c-bg-purple: #f6f3fd;
	--c-bg-segment: #f5f5f5;        /* segmented control track */
	--c-text-dark: #090313;
	--c-text-grey: #808080;
	--c-text-white: #ffffff;
	--c-border-light: #d8d8d8;
	--c-border-dark: #090313;
	--c-border-white: #ffffff;

	/* Type: Mulish only. Each token is a full `font` shorthand. */
	--font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--f-header-2xl: 800 64px/81px var(--font);
	--f-header-xl: 800 44px/56px var(--font);
	--f-header-l: 800 32px/41px var(--font);
	--f-header-m: 800 24px/31px var(--font);
	--f-header-s: 800 20px/26px var(--font);
	--f-header-xs: 800 18px/23px var(--font);
	--f-header-2xs: 800 16px/21px var(--font);
	--f-header-3xs: 800 12px/16px var(--font);

	--f-subtitle-xxl: 600 20px/26px var(--font);
	--f-subtitle-xl: 600 18px/23px var(--font);
	--f-subtitle-l: 600 16px/21px var(--font);
	--f-subtitle-m: 600 14px/18px var(--font);
	--f-subtitle-s: 600 12px/16px var(--font);

	--f-body-m: 400 18px/23px var(--font);
	--f-body-s: 400 16px/21px var(--font);
	--f-body-xs: 400 14px/18px var(--font);

	/* Radius */
	--r-xs: 8px;
	--r-s: 12px;
	--r-m: 16px;
	--r-l: 20px;
	--r-xl: 24px;
	--r-pill: 100px;

	/* Shadow */
	--shadow-control: 1px 1.5px 4px 0 rgba(0, 0, 0, 0.1);
	--shadow-inset: inset 1px 1.5px 4px 0 rgba(0, 0, 0, 0.15);
	--shadow-card: 0 4px 24px 0 rgba(9, 3, 19, 0.06);

	/* Layout. Desktop frame 1440 with a 1220 content column; mobile frame 390 with 20px gutters. */
	--container: 1220px;
	--container-narrow: 1020px;
	--gutter: 20px;
	--section-gap: 120px;
	--header-h: 93px;
}

@media (max-width: 767px) {
	:root {
		--section-gap: 84px;
		--header-h: 56px;
	}
}