@layer tokens {
	:root {
		/* ---------------------------------------------------------------
		 * PRIMITIVES — exact hex values supplied by the client from the
		 * TerraForce brand guidelines (Phase 02). These are the ONLY
		 * literal color values in the entire codebase. Every component
		 * consumes the semantic tokens below, never a primitive directly.
		 * See docs/design-system.md.
		 * --------------------------------------------------------------- */
		--tf-color-neutral-0:   #f9faf5; /* Off-White / Light Background */
		--tf-color-white:       #ffffff; /* Pure white -- hero text over photography */
		--tf-color-neutral-50:  #edede6; /* Light Ivory */
		--tf-color-neutral-100: #dadbd7; /* Cool Light Gray */
		--tf-color-neutral-150: #d9d8d0; /* Muted Beige/Gray */
		--tf-color-neutral-800: #292627; /* Charcoal / Dark Accent */
		--tf-color-neutral-900: #191e11; /* Dark Olive/Black */

		/* Spacing — fluid, design-independent */
		--tf-space-3xs: clamp(0.25rem, 0.23rem + 0.10vw, 0.31rem);
		--tf-space-2xs: clamp(0.50rem, 0.46rem + 0.20vw, 0.63rem);
		--tf-space-xs:  clamp(0.75rem, 0.69rem + 0.30vw, 0.94rem);
		--tf-space-s:   clamp(1.00rem, 0.91rem + 0.41vw, 1.25rem);
		--tf-space-m:   clamp(1.50rem, 1.37rem + 0.61vw, 1.88rem);
		--tf-space-l:   clamp(2.00rem, 1.83rem + 0.82vw, 2.50rem);
		--tf-space-xl:  clamp(3.00rem, 2.74rem + 1.22vw, 3.75rem);
		--tf-space-2xl: clamp(4.00rem, 3.65rem + 1.63vw, 5.00rem);

		/* Font families — resolved Phase 10 (Q2 closed).
		 * Latin (LTR): Ranade, falling back to Plus Jakarta Sans (the
		 * previous design-system face) while/if Ranade is unavailable.
		 * Arabic: Tajawal — Plus Jakarta Sans ships no Arabic glyphs, so
		 * RTL maps to its own family (see typography.css).
		 * Both self-hosted; see base/fonts.css. */
		--tf-font-family: "Ranade", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--tf-font-family-ar: "Tajawal", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

		/* Type scale — fluid. */
		--tf-font-size-s:   clamp(0.89rem, 0.87rem + 0.09vw, 0.94rem);
		--tf-font-size-m:   clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
		--tf-font-size-l:   clamp(1.27rem, 1.19rem + 0.38vw, 1.50rem);
		--tf-font-size-xl:  clamp(1.60rem, 1.46rem + 0.68vw, 2.00rem);
		--tf-font-size-2xl: clamp(2.03rem, 1.79rem + 1.14vw, 2.67rem);
		--tf-font-size-3xl: clamp(2.57rem, 2.20rem + 1.83vw, 3.55rem);

		--tf-line-height-tight: 1.15;
		--tf-line-height-base:  1.6;
		--tf-line-height-loose: 1.8;

		/* Layout — mirrors Elementor breakpoints exactly. */
		--tf-bp-mobile: 767px;
		--tf-bp-tablet: 1024px;
		--tf-container-max: 1140px;
		--tf-container-gutter: var(--tf-space-s);

		/* Radius & shadow — neutral, brand-agnostic defaults.
		 * No shadow color is invented: shadows use the darkest brand
		 * neutral at reduced opacity via color-mix(), never a new value. */
		--tf-radius-s: 0.25rem;
		--tf-radius-m: 0.5rem;
		--tf-radius-l: 1rem;
		--tf-radius-full: 999px;

		--tf-shadow-color: color-mix(in srgb, var(--tf-color-neutral-900) 100%, transparent);
		--tf-shadow-s: 0 1px 2px color-mix(in srgb, var(--tf-shadow-color) 8%, transparent);
		--tf-shadow-m: 0 4px 12px color-mix(in srgb, var(--tf-shadow-color) 12%, transparent);
		--tf-shadow-l: 0 12px 32px color-mix(in srgb, var(--tf-shadow-color) 16%, transparent);

		/* ---------------------------------------------------------------
		 * SEMANTICS — components consume ONLY these. Reassigning a
		 * primitive here recolors the entire site without touching any
		 * component file.
		 * --------------------------------------------------------------- */

		/* Surfaces */
		--tf-surface:        var(--tf-color-neutral-0);   /* primary page background */
		--tf-surface-alt:    var(--tf-color-neutral-50);  /* alternating section background */
		--tf-surface-muted:  var(--tf-color-neutral-150); /* panels, tags, subtle fills */
		--tf-surface-dark:   var(--tf-color-neutral-800); /* footer, dark sections, dark CTA blocks */

		/* Text */
		--tf-text:          var(--tf-color-neutral-900);
		/* 65/35, not the original 60/40 (Accessibility Audit Phase 17,
		 * fix C1) — measured live that 60/40 computed to 4.42:1 against
		 * --tf-surface, failing WCAG 1.4.3's 4.5:1 minimum for normal
		 * text (this token is used at body-copy sizes sitewide,
		 * including every page's own primary navigation links, not just
		 * "large text" contexts that would only need 3:1). 65/35 measures
		 * 5.19:1 — a comfortable margin, not a bare pass — while keeping
		 * the same color-mix-of-two-approved-tokens construction and the
		 * same "muted, not full-black" visual intent, just measurably
		 * darker. */
		--tf-text-muted:    color-mix(in srgb, var(--tf-color-neutral-900) 65%, var(--tf-color-neutral-0) 35%);
		--tf-text-on-dark:  var(--tf-color-neutral-0);
		--tf-text-hero:     var(--tf-color-white);       /* hero title/description over an image */

		/* Borders */
		--tf-border-subtle: var(--tf-color-neutral-100);
		--tf-border-strong: var(--tf-color-neutral-800);

		/* Accessibility Audit Phase 17, fix M1. --tf-border-subtle
		 * measures only 1.33:1 against --tf-surface — fine for a
		 * decorative divider (no WCAG minimum applies), but WCAG 1.4.11
		 * (Non-text Contrast) asks for 3:1 on the boundary of an
		 * interactive UI component such as a text input, which
		 * --tf-border-subtle is also used for sitewide. Rather than
		 * darken the shared token (and change every decorative divider
		 * along with it), this is a dedicated token for exactly that
		 * case: a 50/50 mix of the two existing border tokens measures
		 * 3.73:1 — comfortably past the minimum without going as heavy
		 * as --tf-border-strong (14.29:1, visually harsh for an input
		 * outline). Apply to form inputs and other interactive element
		 * boundaries; --tf-border-subtle stays exactly as-is for
		 * decorative dividers and non-interactive card outlines. */
		--tf-border-interactive: color-mix(in srgb, var(--tf-border-strong) 50%, var(--tf-border-subtle) 50%);

		/* Dark-surface companions to --tf-text-muted / --tf-border-subtle,
		 * derived the same way (color-mix of two already-approved
		 * tokens, never a new literal) — needed the first time a
		 * component sits on a dark surface (Phase 08, footer). */
		--tf-text-muted-on-dark: color-mix(in srgb, var(--tf-text-on-dark) 65%, var(--tf-surface-dark) 35%);
		--tf-border-on-dark:     color-mix(in srgb, var(--tf-text-on-dark) 24%, var(--tf-surface-dark) 76%);

		/* Accent — the palette supplies no separate hue; the darkest
		 * neutral (Dark Olive/Black) serves as the sole interactive/CTA
		 * color for contrast against the light surfaces. See
		 * docs/design-system.md "Accent decision" for the rationale and
		 * how to override it if this is not the intended usage. */
		--tf-accent:        var(--tf-color-neutral-900);
		--tf-accent-hover:  var(--tf-color-neutral-800);
		--tf-on-accent:     var(--tf-color-neutral-0);

		/* Focus ring — derived from the accent, not a new color */
		--tf-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tf-accent) 40%, transparent);
	}
}