/* Design tokens — OneDent
   Values pulled from the Figma variable definitions on the "Home desktop" frame.
   Do not hardcode colours or type sizes anywhere else; add them here. */

:root {
	/* ---- Color ---- */
	--color-primary: #1a294a;        /* Primary/1 Main   */
	--color-accent: #ed114d;         /* Primary/2 Accent */
	--color-accent-light: #f92e65;   /* accent button inner circle */
	--color-neutral-1: #6e7b96;
	--color-neutral-2: #9ba3af;
	--color-neutral-3: #a7b0c3;
	--color-neutral-4: #e1e5ed;      /* borders */
	--color-neutral-6: #f0f0f0;
	--color-neutral-7: #f6f6f6;      /* light surface / text on dark */
	--color-white: #fff;
	--color-warning: #ffbb00;
	--color-yellow: #ffcc00;
	--color-hero-muted: #c3c7ce;     /* hero subheadline on photo */

	--color-text: var(--color-primary);
	--color-bg: var(--color-white);

	/* ---- Typography ---- */
	--font-heading: "Nohemi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Desktop/Heading — Nohemi */
	--h1-size: 60px;   --h1-lh: 1;    --h1-weight: 500;
	--h2-size: 44px;   --h2-lh: 1.2;  --h2-weight: 400;
	--h3-size: 32px;   --h3-lh: 1.2;  --h3-weight: 400;
	--h4-size: 24px;   --h4-lh: 1.2;  --h4-weight: 400;
	--h5-size: 21px;   --h5-lh: 1.2;  --h5-weight: 400;
	/* Desktop/Heading/6 — Inter */
	--h6-size: 19px;   --h6-lh: 1.4;  --h6-weight: 500;  --h6-ls: -0.38px;

	/* Desktop/Body — Inter */
	--body-main-size: 17px;      --body-main-lh: 1.4;  --body-main-weight: 500;
	--body-secondary-size: 16px; --body-lh: 1.4;       --body-secondary-ls: -0.32px;
	--body-small-size: 14px;     --body-small-ls: -0.28px;

	/* Desktop/Button Text */
	--btn-size: 15px; --btn-lh: 1.2; --btn-ls: -0.3px;

	/* ---- Layout ---- */
	--container: 1340px;   /* inner content width at 1440 */
	--gutter: 50px;        /* page side padding on desktop */
	--gutter-mobile: 20px;
	--header-h: 84px;     /* header top offset (20) + bar min-height (64) */

	/* ---- Spacing ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 10px;
	--space-4: 12px;
	--space-5: 18px;
	--space-6: 22px;
	--space-7: 30px;
	--space-8: 38px;
	--space-9: 78px;
	--space-10: 100px;

	/* ---- Radii ---- */
	--radius-sm: 12px;
	--radius-md: 21px;
	--radius-lg: 24px;
	--radius-pill: 100px;
}