/**
 * Qyx design tokens - single source of truth for the homepage visual system.
 *
 * Loaded after the Google-Fonts stylesheet and BEFORE theme.css so every
 * downstream rule can read var(--qyx-*). Fonts stay on Google Fonts (the local
 * variable-woff2 files are not in the repo); this file only maps them. Heading
 * SIZES intentionally stay on the existing Tailwind utilities - tokens here
 * drive font-family, colour and weight only.
 *
 * @package Qyx
 */

:root {
	/* Type */
	--qyx-font: "Inter", ui-sans-serif, system-ui, sans-serif;
	--qyx-font-heading: "Spline Sans", ui-sans-serif, system-ui, sans-serif;

	/* Ink */
	--qyx-text: #2b2b2b;
	--qyx-heading: #2b2b2b;
	--qyx-text-muted: #6b7080;
	--qyx-border: #e5e7eb;
	--qyx-primary: #000000;
	--qyx-primary-fg: #ffffff;

	/* Backgrounds - exactly ONE light wash, ONE dark (anti-chaos rule) */
	--qyx-bg-light: #fafafa;
	--qyx-section-wash: linear-gradient(to bottom, #f9f9f9 0%, #e6fcff, #e6fcff, #fff1e6 100%);
	--qyx-bg-dark: #080507;
	--qyx-dark-wash: linear-gradient(to bottom, #1a1438 0%, #0a0a0f 55%);
	--qyx-text-dark: #e6e6e6;
	--qyx-text-dark-muted: rgba(255, 255, 255, 0.5);

	/* Brand accent gradient (use in AT MOST 3 deliberate spots) */
	--qyx-grad-1: #5aaaf6;
	--qyx-grad-2: #d52fca;
	--qyx-grad-3: #ff4754;
	--qyx-grad-4: #ffb33b;
	--qyx-grad-5: #43cc3e;
	--qyx-accent-gradient: linear-gradient(90deg, var(--qyx-grad-1), var(--qyx-grad-2), var(--qyx-grad-3), var(--qyx-grad-4), var(--qyx-grad-5));
	/* rainbow "threshold" bar shown under dark islands (verified reference stops) */
	--qyx-threshold: linear-gradient(90deg, #5aaaf6 21.72%, #d52fca 36.08%, #ff4754 52.07%, #ffb33b 66.16%, #43cc3e 78.08%);
	/* on-brand pastels (from --qyx-grad-1..5); cycle by index i%5 for any count */
	--qyx-card-pastel-1: #e6fcff; /* cyan */
	--qyx-card-pastel-2: #fff1e6; /* peach */
	--qyx-card-pastel-3: #ece6ff; /* lilac */
	--qyx-card-pastel-4: #ccffd9; /* mint */
	--qyx-card-pastel-5: #ffe4de; /* rose */

	/* Card shell - one shell for every card */
	--qyx-card-radius: 24px;
	--qyx-card-bg-light: #ffffff;
	/* one unified near-black for every dark island/card (matches the reference) */
	--qyx-card-bg-dark: #080507;
	--qyx-card-border-light: #e5e7eb;
	--qyx-card-border-dark: rgba(255, 255, 255, 0.08);
	--qyx-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

	/* Rhythm */
	--qyx-section-y: clamp(4rem, 8vw, 7rem);
	--qyx-radius: 16px;
	/* fixed-header height (JS overrides at runtime; used to offset the sticky tools pill) */
	--qyx-header-h: 96px;
}

/* Font mapping (sizes stay on Tailwind utilities). */
html,
body {
	font-family: var(--qyx-font);
	color: var(--qyx-text);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--qyx-font-heading);
}