/**
 * HOMZ design tokens.
 *
 * Source: Figma file X0Lqny4MFF5vUgjoC6zdKE, page "UI". Variables are FROZEN.
 * Extracted 2026-09-14 from sections Insights 1697:29668, FAQ 1697:29669,
 * Project Map 1697:29670, and frames nav 2048:49815, footer 1720:32702,
 * Team Members 1932:43024, Trade Partners 1940:47303, Article Detail 1598:48297.
 *
 * Names mirror the Figma variable names 1:1 so any value can be traced back.
 * Do not edit values here without a matching change in Figma.
 *
 * Spacing, radii, shadows, breakpoints and container width are NOT Figma
 * variables. The "Measured" block at the end holds only values measured from
 * Figma frames that repeat across more than one component. See docs/11-tokens.md.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour
	 * ------------------------------------------------------------- */

	/* Brand */
	--color-primary: #4b0bdd;
	--color-secondary: #08e08a;
	/* Named "dark purple" in Figma, but it is LIGHTER than primary. */
	--color-dark-purple: #8154e7;

	/* Text */
	--color-text-dark: #090313;
	--color-text-grey: #808080;
	--color-text-white: #ffffff;

	/* Borders */
	--color-border-dark: #090313;
	--color-border-light: #d8d8d8;
	--color-border-white: #ffffff;

	/* Backgrounds */
	--color-background-white: #ffffff;
	--color-background-grey: #fafafa;
	--color-background-purple: #f6f3fd;

	/* ---------------------------------------------------------------
	 * Typography
	 * Every style is Mulish with 0 letter-spacing.
	 * Sizes and line-heights are the Figma px values expressed in rem
	 * (16px root), so they scale with the user's browser font size.
	 * ------------------------------------------------------------- */

	--font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-extrabold: 800;

	/* Header: ExtraBold 800 */
	--header-3xs-size: 0.75rem;     /* 12 */
	--header-3xs-line: 1rem;        /* 16 */
	--header-2xs-size: 1rem;        /* 16 */
	--header-2xs-line: 1.3125rem;   /* 21 */
	--header-xs-size: 1.125rem;     /* 18 */
	--header-xs-line: 1.4375rem;    /* 23 */
	--header-s-size: 1.25rem;       /* 20 */
	--header-s-line: 1.625rem;      /* 26 */
	--header-m-size: 1.5rem;        /* 24 */
	--header-m-line: 1.9375rem;     /* 31 */
	--header-l-size: 2rem;          /* 32 */
	--header-l-line: 2.5625rem;     /* 41 */
	--header-xl-size: 2.75rem;      /* 44 */
	--header-xl-line: 3.5rem;       /* 56 */
	--header-2xl-size: 4rem;        /* 64 */
	--header-2xl-line: 5.0625rem;   /* 81 */

	/* Subtitle: SemiBold 600 */
	--subtitle-s-size: 0.75rem;     /* 12 */
	--subtitle-s-line: 1rem;        /* 16 */
	--subtitle-m-size: 0.875rem;    /* 14 */
	--subtitle-m-line: 1.125rem;    /* 18 */
	--subtitle-l-size: 1rem;        /* 16 */
	--subtitle-l-line: 1.3125rem;   /* 21 */
	--subtitle-xl-size: 1.125rem;   /* 18 */
	--subtitle-xl-line: 1.4375rem;  /* 23 */

	/* Body: Regular 400 */
	--body-xs-size: 0.875rem;       /* 14 */
	--body-xs-line: 1.125rem;       /* 18 */
	--body-s-size: 1rem;            /* 16 */
	--body-s-line: 1.3125rem;       /* 21 */
	--body-m-size: 1.125rem;        /* 18 */
	--body-m-line: 1.4375rem;       /* 23 */

	/* Composite shorthands for `font:` — one line per Figma text style. */
	--type-header-3xs: var(--font-weight-extrabold) var(--header-3xs-size) / var(--header-3xs-line) var(--font-family);
	--type-header-2xs: var(--font-weight-extrabold) var(--header-2xs-size) / var(--header-2xs-line) var(--font-family);
	--type-header-xs: var(--font-weight-extrabold) var(--header-xs-size) / var(--header-xs-line) var(--font-family);
	--type-header-s: var(--font-weight-extrabold) var(--header-s-size) / var(--header-s-line) var(--font-family);
	--type-header-m: var(--font-weight-extrabold) var(--header-m-size) / var(--header-m-line) var(--font-family);
	--type-header-l: var(--font-weight-extrabold) var(--header-l-size) / var(--header-l-line) var(--font-family);
	--type-header-xl: var(--font-weight-extrabold) var(--header-xl-size) / var(--header-xl-line) var(--font-family);
	--type-header-2xl: var(--font-weight-extrabold) var(--header-2xl-size) / var(--header-2xl-line) var(--font-family);

	--type-subtitle-s: var(--font-weight-semibold) var(--subtitle-s-size) / var(--subtitle-s-line) var(--font-family);
	--type-subtitle-m: var(--font-weight-semibold) var(--subtitle-m-size) / var(--subtitle-m-line) var(--font-family);
	--type-subtitle-l: var(--font-weight-semibold) var(--subtitle-l-size) / var(--subtitle-l-line) var(--font-family);
	--type-subtitle-xl: var(--font-weight-semibold) var(--subtitle-xl-size) / var(--subtitle-xl-line) var(--font-family);

	--type-body-xs: var(--font-weight-regular) var(--body-xs-size) / var(--body-xs-line) var(--font-family);
	--type-body-s: var(--font-weight-regular) var(--body-s-size) / var(--body-s-line) var(--font-family);
	--type-body-m: var(--font-weight-regular) var(--body-m-size) / var(--body-m-line) var(--font-family);

	/* ---------------------------------------------------------------
	 * Measured — not Figma variables.
	 * Each value repeats across components; its sources are listed.
	 * ------------------------------------------------------------- */

	/* button/S 398:7105, button/M 2048:49821, nav dropdown 2010:59370 */
	--radius-16: 1rem;

	/* Side gutter on every 390px mobile frame: 350px content (1275:20540, 1795:40782) */
	--gutter-mobile: 1.25rem;

	/* Desktop content width: nav bar 2048:49826, footer 1560:40640, article top area 1598:48298 */
	--container-max: 76.25rem; /* 1220 */

	/* Corner radius on content images: article hero, inline images, video, banner (1598:48297) */
	--radius-20: 1.25rem;

	/* Desktop and mobile layout switch. Not in Figma (390 and 1440 frames only). */
	--breakpoint-desktop: 64rem; /* Reference only: custom properties cannot be used in @media. */
}