/*
 * Singler design tokens — the single source of truth for colour, type, space
 * and motion. theme.json mirrors the colour/size presets for the editor; keep
 * the two in step and never hard-code these values elsewhere.
 */
:root {
	/* Colour */
	--surface-dark: #030b1e;
	--surface-dark-card: #0b1427;
	--surface-dark-raised: #111c33;
	--text-on-dark: #f8faff;
	--text-muted-dark: #bac3d5;
	--brand-cyan: #12d8e8;
	--brand-purple: #8b4dff;
	--brand-purple-light: #a67cff; /* purple text/icons on navy (contrast) */
	--brand-cyan-deep: #007c91;
	--brand-purple-deep: #7435e8;
	--surface-light: #f5f6fb;
	--surface-light-card: #ffffff;
	--text-on-light: #101936;
	--text-muted-light: #47536b;
	--border-dark: #243047;
	--border-dark-strong: #3a4763;
	--border-light: #e2e6f0;
	--status-success: #28dc83;
	--status-error: #b42318;
	--border-input: #8590a8;
	--border-input-hover: #47536b;

	--gradient-brand: linear-gradient(90deg, var(--brand-cyan-deep), var(--brand-purple-deep));
	--gradient-cta: linear-gradient(110deg, #6a2fe0 0%, #4b2bb8 55%, #1e2a8c 100%);

	/* Type */
	--font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	--text-display: clamp(2.5rem, 4.5vw, 4.5rem);
	--text-h2: clamp(1.875rem, 2.75vw, 2.75rem);
	--text-h3: clamp(1.125rem, 1.5vw, 1.375rem);
	--text-lead: 1.125rem;
	--text-body: 1rem;
	--text-small: 0.875rem;
	--text-eyebrow: 0.75rem;
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-body: 1.65;

	/* Layout and space */
	--content-max: 75rem;
	--measure: 46rem;
	--gutter: 1.25rem;
	--section-space: 3rem;
	--card-padding: 1.5rem;
	--gap-small: 0.75rem;
	--gap-medium: 1.5rem;
	--gap-large: 2.5rem;
	--header-height: 4.5rem;

	/* Shape */
	--radius-small: 0.5rem;
	--radius-card: 0.875rem;
	--radius-large: 1.25rem;
	--radius-pill: 999rem;
	--shadow-card: 0 1px 2px rgb(16 25 54 / 0.04), 0 8px 24px rgb(16 25 54 / 0.06);
	--shadow-panel: 0 24px 60px rgb(0 0 0 / 0.45);

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 160ms;
	--duration-base: 280ms;
	--duration-reveal: 700ms;
}

@media (min-width: 48rem) {
	:root {
		--gutter: 2rem;
		--section-space: 4rem;
	}
}

@media (min-width: 64rem) {
	:root {
		--gutter: 2.5rem;
		--section-space: 5rem;
		--header-height: 5rem;
	}
}