/*
 * Vula Amathuba Festival: design tokens.
 * Source: the festival banner (design/brand/reference/hero-bg-top2.jpg), colours sampled from the
 * artwork on 25 September 2026. See docs/brand.md and docs/design.md.
 * Custom properties only. Everything else lives in vula.css. Enqueue this file first.
 */
:root {
	/* Colour: grounds */
	--vula-navy: #0F1B33;        /* page header, footer, dark bands; the sky at dusk deepened for text */
	--vula-navy-deep: #0A1020;   /* the starry panel; overlays and the darkest ground */
	--vula-dusk: #384D82;        /* the banner sky as sampled; gradients, and a home zone block colour with white text (8.2:1) */
	--vula-paper: #F7F8FA;       /* light page background */
	--vula-white: #FFFFFF;
	--vula-line: #DCE1EA;        /* rules and borders on light grounds */
	--vula-line-dark: rgba(255, 255, 255, 0.14); /* rules on navy */

	/* Colour: brand accents (sampled) */
	--vula-orange: #E17630;      /* AMATHUBA and the 29. Buttons carry navy text: white on this orange is 3.1:1 */
	--vula-orange-deep: #B5480E; /* orange for white text (5.4:1) and for orange text on light grounds (5.1:1) */
	--vula-gold: #F1B052;        /* SUCCEED and the government site's button. Navy text on gold: 9.0:1 */
	--vula-green: #1E7A4C;       /* CONNECT and the rule under the 29. Success and confirmation only */
	--vula-green-bright: #32834A;/* the banner's green rule, on navy grounds only */
	--vula-red: #C8342B;         /* GROW and the corner brackets. Errors and the bracket motif only */

	/* Colour: text */
	--vula-ink: #17233A;         /* body text on light grounds, 14.8:1 on paper */
	--vula-muted: #4B5566;       /* secondary text on light grounds, 7.1:1 on paper */
	--vula-on-navy: #FFFFFF;
	--vula-on-navy-muted: #AAB4C9; /* secondary text on navy, 8.2:1 */

	/* Colour: state */
	--vula-focus: #F1B052;       /* focus ring, gold, visible on light and dark */
	--vula-ok-bg: #E6F3EC;
	--vula-warn-bg: #FCF1DC;
	--vula-error-bg: #FBE7E6;

	/* Type */
	--vula-font: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
	--vula-fs-0: 0.8125rem;  /* 13 px: captions, chips */
	--vula-fs-1: 0.9375rem;  /* 15 px: help text, footer */
	--vula-fs-2: 1rem;       /* 16 px: body and inputs (never below 16 px in a form) */
	--vula-fs-3: 1.125rem;   /* 18 px: lead paragraphs */
	--vula-fs-4: 1.375rem;   /* 22 px: card titles */
	--vula-fs-5: 1.75rem;    /* 28 px: section headings on phones */
	--vula-fs-6: 2.25rem;    /* 36 px: page titles on phones */
	--vula-fs-7: clamp(2.75rem, 12vw, 5.5rem); /* display: the VUL' AMATHUBA lock-up */
	--vula-lh-tight: 1.05;
	--vula-lh-heading: 1.2;
	--vula-lh-body: 1.55;
	--vula-track-eyebrow: 0.2em;
	--vula-track-display: -0.02em;

	/* Space (4 px base) */
	--vula-s-1: 0.25rem;
	--vula-s-2: 0.5rem;
	--vula-s-3: 0.75rem;
	--vula-s-4: 1rem;
	--vula-s-5: 1.5rem;
	--vula-s-6: 2rem;
	--vula-s-7: 3rem;
	--vula-s-8: 4rem;
	--vula-s-9: 6rem;
	--vula-gutter: 1rem;        /* 16 px side gutter at phone width */
	--vula-wrap: 75rem;         /* 1200 px content width */
	--vula-wrap-narrow: 42rem;  /* 672 px forms and reading columns */

	/* Shape and depth */
	--vula-radius: 12px;        /* cards */
	--vula-radius-sm: 8px;      /* buttons, inputs */
	--vula-radius-pill: 999px;  /* chips */
	--vula-card-top: 4px;       /* coloured top border on cards, as on the government site */
	--vula-bracket: 3px;        /* red corner bracket stroke */
	--vula-shadow: 0 1px 2px rgba(15, 27, 51, 0.06), 0 8px 24px rgba(15, 27, 51, 0.08);
	--vula-shadow-lift: 0 2px 4px rgba(15, 27, 51, 0.08), 0 16px 40px rgba(15, 27, 51, 0.14);

	/* Interaction */
	--vula-tap: 44px;           /* minimum tap target */
	--vula-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--vula-fast: 140ms;
	--vula-slow: 320ms;

	/* Zone colours: the top border of an exhibitor card by zone type */
	--vula-zone-work: var(--vula-orange);  /* Careers, Level Up, Skill-Up Hub, Made in Gauteng */
	--vula-zone-money: var(--vula-gold);   /* Get Funded, Smart Money Moves, Supplier Hook Ups, Hustlers Corner, E-Waste Marketplace */
	--vula-zone-civic: var(--vula-green);  /* Gauteng Citizen Central, National Departments, Social Impact Hub, Tech Central */
}