/**
 * Design tokens — mapped 1:1 from the DKX Figma variable collection.
 * Values here are the single source of truth; never hardcode a hex or size elsewhere.
 */

:root {
	/* ---- Colour ---- */
	--dkx-white: #ffffff;
	--dkx-black-900: #101010;
	--dkx-grey-100: #e6e6e6;
	--dkx-grey-200: #c9c9c9;
	--dkx-grey-300: #888888;
	--dkx-grey-600: #727272;
	--dkx-grey-700: #535353;

	/* Semantic aliases */
	--dkx-bg: var(--dkx-white);
	--dkx-fg: var(--dkx-black-900);
	--dkx-muted: var(--dkx-grey-700);
	--dkx-rule: var(--dkx-grey-100);
	--dkx-rule-strong: var(--dkx-grey-300);
	--dkx-placeholder: var(--dkx-grey-300);
	--dkx-surface: var(--dkx-grey-100);

	/* ---- Typography ---- */
	--dkx-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--dkx-fs-4xl: 36px;   /* section headings */
	--dkx-fs-3xl: 28px;   /* sub headings */
	--dkx-fs-2xl: 24px;
	--dkx-fs-xl: 20px;
	--dkx-fs-lg: 18px;    /* lead copy, footer column heads */
	--dkx-fs-base: 16px;  /* body */
	--dkx-fs-sm: 14px;

	--dkx-lh-tight: 1;    /* Figma: lineHeight 100 on 4xl/3xl */
	--dkx-lh-body: 1.5;

	--dkx-fw-regular: 400;
	--dkx-fw-medium: 500;

	/* ---- Layout ---- */
	--dkx-canvas: 1440px;
	--dkx-content: 1180px;
	--dkx-gutter: 130px;        /* desktop side padding */
	--dkx-gutter-mobile: 20px;  /* mobile side padding */

	--dkx-section-y: 64px;      /* desktop vertical section padding */
	--dkx-section-y-mobile: 48px;

	--dkx-grid-gap: 20px;
	--dkx-grid-gap-sm: 12px;

	/* ---- Components ---- */
	--dkx-btn-h: 48px;
	--dkx-header-h: 96px;
	--dkx-icon: 24px;
	--dkx-social: 40px;
	--dkx-radius: 0;            /* the design is uniformly square-cornered */
	--dkx-radius-pill: 400px;   /* socials + rounded tabs only */

	--dkx-transition: 200ms ease;

	/* ---- Focus ---- */
	--dkx-focus: 2px solid var(--dkx-black-900);
	--dkx-focus-offset: 2px;
}

/* Fluid gutter between the two designed breakpoints (360 → 1440). */
@media (max-width: 1439px) {
	:root {
		--dkx-gutter: clamp(20px, calc((100vw - 1180px) / 2), 130px);
	}
}

@media (max-width: 782px) {
	:root {
		--dkx-gutter: var(--dkx-gutter-mobile);
		--dkx-section-y: var(--dkx-section-y-mobile);
		--dkx-fs-4xl: 36px;
		--dkx-fs-3xl: 28px;
	}
}