/*
 * Visit Tylliria design tokens — single source of truth.
 * Elementor global colours/fonts are seeded from the same values (inc/elementor.php).
 */
:root {
	/* Brand (Canva / logo) */
	--vt-color-blue: #607fb9;      /* logo, shapes, large headings only */
	--vt-color-lime: #c7c55e;      /* fills and accents, never text on light backgrounds */
	--vt-color-sand: #f5f1ef;      /* page background */
	--vt-color-taupe: #918179;     /* decorative motifs only */
	--vt-color-ink: #000;
	--vt-color-white: #fff;

	/* Derived for WCAG AA text contrast */
	--vt-color-blue-700: #3e5c96;  /* links, buttons, eyebrow text — 5.9:1 on sand */
	--vt-color-blue-900: #2f4878;  /* dark sections, footer — white text 9.1:1 */
	--vt-color-taupe-700: #5e5049; /* muted text — 6.9:1 on sand */

	/* Semantic */
	--vt-color-bg: var(--vt-color-sand);
	--vt-color-surface: var(--vt-color-white);
	--vt-color-text: var(--vt-color-ink);
	--vt-color-text-muted: var(--vt-color-taupe-700);
	--vt-color-link: var(--vt-color-blue-700);
	--vt-color-link-hover: var(--vt-color-blue-900);
	--vt-color-focus: var(--vt-color-blue-700);

	/* Typography */
	--vt-font-heading: "Figtree", system-ui, sans-serif;
	--vt-font-body: "Figtree", system-ui, sans-serif;
	--vt-fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
	--vt-fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	--vt-fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--vt-fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--vt-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--vt-fs-small: 0.875rem;
	--vt-fs-eyebrow: 0.875rem;
	--vt-lh-tight: 1.04;
	--vt-lh-body: 1.6;
	--vt-tracking-eyebrow: 0.18em;

	/* Space */
	--vt-space-1: 0.25rem;
	--vt-space-2: 0.5rem;
	--vt-space-3: 0.75rem;
	--vt-space-4: 1rem;
	--vt-space-6: 1.5rem;
	--vt-space-8: 2rem;
	--vt-space-12: 3rem;
	--vt-space-16: 4rem;
	--vt-space-24: 6rem;
	--vt-section-spacing: clamp(4rem, 2.8rem + 5vw, 7.5rem);
	--vt-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

	/* Layout */
	--vt-container: 77.5rem;        /* 1240px */
	--vt-container-narrow: 47.5rem; /* 760px reading width */

	/* Shape */
	--vt-radius-sm: 0.875rem;
	--vt-radius-md: 1.25rem;
	--vt-radius-lg: 1.75rem;
	--vt-radius-pill: 999px;
	--vt-radius-arch: 999px 999px var(--vt-radius-md) var(--vt-radius-md);

	/* Motion */
	--vt-duration: 180ms;
	--vt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}