/* DanceXchange design tokens.
   Single source of truth for colour, type and spacing.
   Change a value here and it changes everywhere. */

:root {
	/* ---- Colour ------------------------------------------------------- */
	--dx-base: #fdfefe;
	--dx-mist: #f2f5f5;
	--dx-line: #dfe3e3;
	--dx-silver: #b4b8b9;
	--dx-slate: #586160;
	--dx-ink: #050506;

	/* Brand teal from the client palette. Only ever carries dark text:
	   against white it sits at roughly 2.2:1, which fails WCAG AA. */
	--dx-brand: #57bfb2;

	/* Darkened teal for links and teal text on white. Passes AA at ~4.7:1. */
	--dx-brand-deep: #2f8177;
	--dx-brand-wash: #e6f5f2;

	/* Per-style accent colours, timetable calendar cards only. Each carries
	   dark ink text except brand-deep, which carries light text. */
	--dx-style-ballet: #ffb3c6;
	--dx-style-modern: #d8b4f8;
	--dx-style-tap: #ffd3b6;
	--dx-style-hip-hop: #ff8a65;
	--dx-style-fallback: #ffd166;

	/* ---- Typography --------------------------------------------------- */
	/* Loaded from Google Fonts for now (see site.css @import). TODO:
	   self-host in /assets/fonts once the pairing is confirmed final. */
	--dx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--dx-font-display: "Tiro Bangla", Georgia, "Times New Roman", serif;

	--dx-text-xs: 0.8125rem;
	--dx-text-sm: 0.9375rem;
	--dx-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
	--dx-text-lg: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
	--dx-text-xl: clamp(1.625rem, 1.45rem + 0.85vw, 2.25rem);
	--dx-text-2xl: clamp(2rem, 1.7rem + 1.5vw, 3.25rem);
	--dx-text-hero: clamp(2.5rem, 1.9rem + 3vw, 4.75rem);

	--dx-leading-tight: 1.15;
	--dx-leading-body: 1.65;
	--dx-tracking-tight: -0.015em;
	--dx-tracking-wide: 0.14em;

	/* ---- Spacing ------------------------------------------------------ */
	--dx-space-1: 0.5rem;
	--dx-space-2: 0.75rem;
	--dx-space-3: 1.25rem;
	--dx-space-4: 2rem;
	--dx-space-5: 3rem;
	--dx-space-6: 4.5rem;
	--dx-space-7: 6rem;

	/* ---- Layout ------------------------------------------------------- */
	--dx-content: 740px;
	--dx-wide: 1240px;
	--dx-gutter: var(--dx-space-4);

	/* ---- Other -------------------------------------------------------- */
	--dx-radius: 8px;
	--dx-radius-lg: 12px;
	--dx-shadow-soft: 0 1px 2px rgba(5, 5, 6, 0.06),
		0 4px 12px rgba(5, 5, 6, 0.05);
	--dx-header-h: 72px;
	--dx-transition: 160ms ease;
}