/* Home Page design tokens — enqueued before home.css. */

:root {
	/* ── Color · raw ─────────────────────────────────────────────────────── */
	--hp-c-white:        #FFFFFF; /* Figma: White */
	--hp-c-grey:         #222222; /* Figma: Grey       — body text */
	--hp-c-gray-800:     #000000; /* Figma: Gray/800   — strongest fg */
	--hp-c-gray-200:     #E6E6E6; /* Figma: Gray/200   — borders, dividers */
	--hp-c-light-grey:   #F3F2F8; /* Figma: Light Grey — section bg */
	--hp-c-purple:       #8652CB; /* Figma: Purple     — primary accent / CTA */
	--hp-c-purple-100:   #F2ECFB; /* Figma: Purple/100 — very light tint (Consulting page) */
	--hp-c-purple-200:   #E6DCF8; /* Figma: Purple/200 — tinted bg */
	--hp-c-purple-800:   #613891; /* Figma: Purple/800 — darker purple (Consulting page) */
	--hp-c-blue:         #3373DD; /* Figma: Blue       — Bootcamp primary accent */
	--hp-c-blue-700:     #2A5ECB; /* Figma: Blue/700   — Bootcamp darker blue */
	--hp-c-gray-400:     #5C5C5C; /* Figma: Gray/400   — muted text */

	/* ── Color · semantic aliases ─────────────────────────────────────────── */
	--hp-bg:             var(--hp-c-white);
	--hp-bg-alt:         var(--hp-c-light-grey);
	--hp-bg-purple:      var(--hp-c-purple);
	--hp-fg:             var(--hp-c-grey);
	--hp-fg-strong:      var(--hp-c-gray-800);
	--hp-fg-inverse:     var(--hp-c-white);
	--hp-border:         var(--hp-c-gray-200);
	--hp-accent:         var(--hp-c-purple);
	--hp-accent-tint:    var(--hp-c-purple-200);

	/* ── Typography · family ──────────────────────────────────────────────── */
	--hp-font-sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* ── Typography · weight scale (matches Figma styles) ─────────────────── */
	--hp-fw-regular: 400;
	--hp-fw-medium:  500;
	--hp-fw-bold:    700;

	/* ── Typography · size/line-height/letter-spacing tokens ──────────────── *
	 *  Each Figma style maps to three custom properties:
	 *  --hp-t-{name}-size / -lh / -ls
	 *  Consumer selectors set font-family/font-weight directly.
	 *  ─────────────────────────────────────────────────────────────────── */

	/* Headline / XXXXL / Bold   — used for hero headline "For Big Kids & Daredevils" */
	--hp-t-h-xxxxl-size:  100px;
	--hp-t-h-xxxxl-lh:    1;
	--hp-t-h-xxxxl-ls:    0;

	/* Headline / XXXL / Medium  — page hero headlines (Consulting etc.) */
	--hp-t-h-xxxl-size:   60px;
	--hp-t-h-xxxl-lh:     1.2;
	--hp-t-h-xxxl-ls:     -1px;

	/* Headline / XXL / Medium   — section headings */
	--hp-t-h-xxl-size:    40px;
	--hp-t-h-xxl-lh:      1.2;
	--hp-t-h-xxl-ls:      -1px;

	/* Headline / XL / Regular   — secondary headings */
	--hp-t-h-xl-size:     32px;
	--hp-t-h-xl-lh:       1.2;
	--hp-t-h-xl-ls:       -1px;

	/* Body / XL / Medium · Regular — large lead paragraphs */
	--hp-t-b-xl-size:     24px;
	--hp-t-b-xl-lh:       1.2;
	--hp-t-b-xl-ls:       0;

	/* Body / L / Medium         — labels / large body */
	--hp-t-b-l-size:      18px;
	--hp-t-b-l-lh:        1.2;
	--hp-t-b-l-ls:        0;

	/* Body / M / Regular        — default body copy */
	--hp-t-b-m-size:      16px;
	--hp-t-b-m-lh:        1.4;
	--hp-t-b-m-ls:        0;

	/* Body / S / Medium · Regular — captions, small UI */
	--hp-t-b-s-size:      14px;
	--hp-t-b-s-lh:        1.4;
	--hp-t-b-s-ls:        0;

	/* Body / XS / Regular       — micro labels */
	--hp-t-b-xs-size:     12px;
	--hp-t-b-xs-lh:       1.4;
	--hp-t-b-xs-ls:       0;
}