/**
 * Vantage design tokens
 *
 * The single source of every colour, size, space and radius used by pages built
 * from 2026-11 onward (event pages, the events hub, city and role pages).
 *
 * SCOPE, DELIBERATELY NARROW. These tokens do NOT restyle the existing site.
 * Legacy pages keep `style.css` as they are. A token only takes effect where a
 * `v-` component class uses it, so adding one cannot change a page that has not
 * opted in.
 *
 * NAMING. Everything is prefixed `--v-`. The components are prefixed `.v-`.
 * Both are necessary rather than tidy: this theme already loads Bootstrap, which
 * owns `.card`, `.btn`, `.container` and `.row`, and `style.css` owns `.button`.
 * Unprefixed "theme-wide" names would collide on day one.
 *
 * RECONCILED WITH brand/BRAND_DESIGN.md, which stays canonical for the brand.
 * Three deliberate differences are recorded in docs/architecture/marketing/
 * DESIGN_SYSTEM.md rather than silently applied; read that before changing a
 * colour here.
 */

:root {
	/* ---------------------------------------------------------- colour */

	/* Brand. --v-teal is the identity colour (BRAND_DESIGN.md says the spec is
	 * #68C6B4 / PMS 570 and the site drifted to #67c6b4; the mockups use the
	 * spec value, so that is what is here). */
	--v-teal: #68c6b4;
	--v-teal-hover: #56b8a5;

	/* Teal as TEXT is a different value and that is not a mistake. #68C6B4 on
	 * white is about 1.9:1 and fails WCAG AA for text; #1E7464 is about 4.8:1
	 * and passes. Surfaces get --v-teal, words get --v-teal-text. */
	--v-teal-text: #1e7464;
	--v-teal-text-hover: #145548;

	--v-dark: #323e48;          /* PMS 432. Headings, dark bands. */
	--v-ink: #46535d;           /* Body copy. */
	--v-muted: #5b6872;         /* Labels, captions, breadcrumb. */

	--v-page: #f4f6f7;          /* Page background behind cards. */
	--v-surface: #ffffff;       /* Card and panel background. */
	--v-surface-alt: #eef1f3;   /* Quiet panel, neutral tag. */
	--v-surface-teal: #e3f4f0;  /* Teal-tinted panel and tag. */
	--v-surface-teal-soft: #f3faf8; /* The booking block's tint. */

	--v-border: #c5ced4;        /* Card borders. */
	--v-rule: #e1e6e9;          /* Dividers inside a card. */

	--v-on-teal: #ffffff;       /* Button label on --v-teal. See the note in
	                             * DESIGN_SYSTEM.md: this FAILS AA and is kept
	                             * deliberately to match the live site until the
	                             * sitewide contrast item is decided. */

	/* ------------------------------------------------------------ type */

	--v-font-head: 'Raleway', sans-serif;
	--v-font-body: 'Lato', sans-serif;

	/* Fluid, so there is one scale rather than a desktop set and a mobile set.
	 * The clamp floors match the mockup's 700px breakpoint values. */
	--v-h1: clamp(29px, 3.4vw, 44px);
	--v-h2: clamp(23px, 2.3vw, 30px);
	--v-h3: clamp(18px, 1.5vw, 22px);
	--v-lead: 17px;
	--v-body: 16px;
	--v-small: 15px;
	--v-tiny: 13px;

	--v-weight-h1: 800;
	--v-weight-h2: 700;

	--v-line-tight: 1.12;
	--v-line-head: 1.2;
	--v-line-body: 1.6;

	/* ----------------------------------------------------------- space */

	--v-space-1: 4px;
	--v-space-2: 8px;
	--v-space-3: 12px;
	--v-space-4: 16px;
	--v-space-5: 20px;
	--v-space-6: 24px;
	--v-space-7: 32px;
	--v-space-8: 40px;
	--v-space-9: 48px;
	--v-space-10: 64px;

	--v-section-y: clamp(40px, 5vw, 64px);  /* Vertical rhythm between sections. */
	--v-wrap: 1200px;
	--v-wrap-pad: clamp(16px, 3vw, 32px);
	--v-wrap-narrow: 820px;

	/* ---------------------------------------------------- radius, depth */

	--v-radius-sm: 6px;
	--v-radius: 10px;          /* Buttons. */
	--v-radius-lg: 14px;       /* Cards. */
	--v-radius-xl: 18px;       /* Hero image. */
	--v-radius-pill: 999px;

	--v-shadow-card: 0 1px 2px rgba(50, 62, 72, 0.04);
	--v-shadow-raised: 0 6px 20px rgba(50, 62, 72, 0.10);

	/* ------------------------------------------------------- controls */

	--v-tap: 44px;             /* Minimum touch target. */
	--v-control-h: 48px;       /* Button height. */
	--v-focus: 3px solid var(--v-teal-text);
	--v-focus-offset: 3px;
}