/*
 * The single source of truth. The only file in the theme allowed to contain a raw value.
 * Components reference the semantic layer, never the brand layer.
 *
 * Every value below is measured off the 1920px mockup (Artboard 1). Fluid steps are built so the
 * clamp maximum lands on the measured value at 1920 and eases down to a sensible small-screen
 * size, so the design is right at the width it was drawn at rather than only near it.
 *
 * Contrast ratios in the comments were computed against the real hex values. The style guide
 * recomputes them from the live stylesheet, so a retuned colour reports itself.
 */

:root {
	/* ---------------------------------------------------------------------
	 * 1. Brand colour
	 *
	 * Green and green-deep come from bunker-logo.svg. The rest is sampled
	 * from the mockup: its page ground, its marker sage, its quiet neutral
	 * and the pure white of the form card.
	 * ------------------------------------------------------------------ */

	--bnk-green: #455129;              /* logo wordmark, headings, selected choices */
	--bnk-green-deep: #3f4a29;         /* hover partner, logo box rule */

	--bnk-cream: #eae7db;              /* the page, everywhere */
	--bnk-highlight: #bbc39c;          /* the marker behind an accent phrase */
	--bnk-stone: #dad8ca;              /* quiet button fill, proof discs */
	--bnk-white: #ffffff;              /* the form card */

	--bnk-ink: #2a2e22;                /* body copy */
	--bnk-ink-muted: #54594a;          /* 5.84 on cream, 7.23 on white */
	--bnk-cream-muted: #c9c8b4;        /* 5.04 on green, for the announce bar and inverse copy */

	/* Control boundaries need 3:1 against their ground under WCAG 1.4.11.
	 * 4.77 on white, 3.56 on the warm cream rail. */
	--bnk-rule-control: #6e7659;

	/* The hero line art, at the alpha it was drawn with. Over the cream that resolves to about
	   #d7d2bd, which is why it reads as a whisper rather than as a third element on the page. */
	--bnk-line: rgb(183 174 138 / 0.37);

	/* ---------------------------------------------------------------------
	 * 2. Channel lists, so a tint follows the brand colour it is mixed from
	 * ------------------------------------------------------------------ */

	--bnk-green-rgb: 69 81 41;
	--bnk-ink-rgb: 42 46 34;
	--bnk-cream-rgb: 234 231 219;
	--bnk-highlight-rgb: 187 195 156;

	/* ---------------------------------------------------------------------
	 * 3. Semantic colour
	 * ------------------------------------------------------------------ */

	--color-bg: var(--bnk-cream);
	--color-bg-panel: var(--bnk-white);
	/* A whisper of sage over the white card rather than a filled panel: the rail should read as a
	   margin of the card, not as a second surface competing with it. */
	--color-bg-rail: rgb(212 215 201 / 0.17);
	--color-bg-quiet: var(--bnk-stone);
	--color-bg-accent: var(--bnk-green);

	--color-text: var(--bnk-ink);              /* 11.21 on cream, 13.89 on white */
	--color-text-muted: var(--bnk-ink-muted);
	--color-heading: var(--bnk-green);         /* 6.89 on cream, 8.53 on white */
	--color-accent: var(--bnk-green);
	--color-accent-dark: var(--bnk-green-deep);
	--color-marker: var(--bnk-highlight);      /* green on it is 4.63, so an accent phrase stays readable */
	--color-on-accent: var(--bnk-white);       /* 8.53 on green */

	--color-link: var(--bnk-green);
	--color-link-hover: var(--bnk-green-deep);

	--color-border: rgb(var(--bnk-green-rgb) / 0.16);   /* hairline dividers, decorative */
	--color-border-control: var(--bnk-rule-control);

	/* ---------------------------------------------------------------------
	 * 4. Type
	 *
	 * One family. The logo is already a tracked uppercase wordmark, so
	 * headings are sentence case and the only uppercase left is the small
	 * tracked label.
	 *
	 * Weights name only what fonts.css serves: 400, 500, 700 and 700 italic.
	 * Asking for anything else makes the browser synthesise it and the face
	 * smears. There is no --weight-display: with one family it was 500 twice
	 * over, and a token nothing reads is worse than none.
	 * ------------------------------------------------------------------ */

	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-display: var(--font-body);

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-heading: 700;

	--leading: 1.6;
	--leading-snug: 1.35;      /* the mockup sets its lede and proof labels at 31/24 */
	--leading-heading: 1.3;    /* measured: 78px baseline-to-baseline on a 60px headline */

	--tracking-display: -0.015em;   /* DM Sans looks loose past about 28px */
	--tracking-label: 0.14em;       /* the board's tracked small caps */
	--tracking-body: 0;

	/* ---------------------------------------------------------------------
	 * 5. Type scale
	 *
	 * A higher number is always bigger. Body sits at --font-4. Trailing
	 * comments give the small-screen to 1920 range, and the 1920 figure is
	 * what the mockup measures.
	 * ------------------------------------------------------------------ */

	--font-1: 0.75rem;                                          /* 12        counters, legal line */
	--font-2: 0.8125rem;                                        /* 13        small print */
	--font-3: 0.9375rem;                                        /* 15        field labels, rail steps */
	--font-4: 1.0625rem;                                        /* 17        body */
	--font-5: clamp(1rem, 0.95rem + 0.21vw, 1.1875rem);         /* 16 -> 19  announce bar, buttons */
	--font-6: clamp(1.0625rem, 0.96rem + 0.45vw, 1.5rem);       /* 17 -> 24  lede, proof label, CTA */
	--font-7: clamp(1.25rem, 1.11rem + 0.58vw, 1.75rem);        /* 20 -> 28  step question */
	--font-8: clamp(1.75rem, 1.31rem + 1.1vw, 2.5rem);          /* 28 -> 40  mid heading */
	--font-9: clamp(2.125rem, 1.73rem + 1.68vw, 3.75rem);       /* 34 -> 60  hero and section display */

	/* ---------------------------------------------------------------------
	 * 6. Space scale
	 *
	 * --space-N is N x 8px.
	 * ------------------------------------------------------------------ */

	--space-05: 0.25rem;   /* 4 */
	--space-1: 0.5rem;     /* 8 */
	--space-15: 0.75rem;   /* 12 */
	--space-2: 1rem;       /* 16 */
	--space-3: 1.5rem;     /* 24 */
	--space-4: 2rem;       /* 32 */
	--space-5: 2.5rem;     /* 40 */
	--space-6: 3rem;       /* 48 */
	--space-8: 4rem;       /* 64 */
	--space-10: 5rem;      /* 80 */
	--space-12: 6rem;      /* 96 */

	/* ---------------------------------------------------------------------
	 * 7. Vertical rhythm
	 *
	 * The mockup's gaps are large and specific, so they are named by size and
	 * reused rather than being re-derived per section. Each clamp maximum is
	 * the measured 1920 gap.
	 * ------------------------------------------------------------------ */

	--rhythm-xs: clamp(1.5rem, 2.5vw, 3rem);      /* 24 -> 48   disc to label, heading to sub */
	--rhythm-sm: clamp(2rem, 3.3vw, 4rem);        /* 32 -> 64   headline to sub, sub to card */
	--rhythm-md: clamp(2.5rem, 5vw, 6rem);        /* 40 -> 96   bar to logo, CTA to gallery */
	--rhythm-lg: clamp(3rem, 7.7vw, 9.25rem);     /* 48 -> 148  gallery to proof strip */
	--rhythm-xl: clamp(3.5rem, 10.4vw, 12.5rem);  /* 56 -> 200  proof strip to the survey */

	/* ---------------------------------------------------------------------
	 * 8. Layout
	 * ------------------------------------------------------------------ */

	--container: 1288px;        /* the gallery and the proof strip, measured */
	--container-form: 1226px;   /* the survey card, measured */
	/* The headline measure. "Jersey's First Premium Golf Lounge" sets to ~845px, and it needs room
	   beyond that or the line breaks inside the marker phrase and shows the block in two pieces.
	   Retune this whenever the headline copy changes. */
	--container-text: 900px;
	--gutter: clamp(1.25rem, 4vw, 3rem);

	--measure: 62ch;
	--measure-short: 42ch;

	/* ---------------------------------------------------------------------
	 * 9. Shape
	 * ------------------------------------------------------------------ */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;      /* measured on the mockup's card and photographs */
	--radius-pill: 999px;

	--border-hairline: 1px;
	--border-control: 1.5px;
	--border-selected: 2px;

	/* Soft and wide, so the white card lifts off the cream without a visible edge. */
	--shadow-card: 0 2px 4px rgb(var(--bnk-ink-rgb) / 0.03), 0 24px 48px -16px rgb(var(--bnk-ink-rgb) / 0.10);
	--shadow-lift: 0 2px 6px rgb(var(--bnk-ink-rgb) / 0.05), 0 18px 32px -12px rgb(var(--bnk-ink-rgb) / 0.16);

	/* ---------------------------------------------------------------------
	 * 10. The marker
	 *
	 * Measured on the mockup: on a 60px headline the block runs from 8px above
	 * the baseline to 17px below it, so 0.13em up and 0.28em down, 0.43em tall.
	 *
	 * Offset is given from the top of the inline content box, whose height is
	 * the font's ascent plus descent (0.99em + 0.30em for DM Sans) and NOT the
	 * line-height. That is what keeps the marker on the baseline when a
	 * heading and a lede set the same phrase at different leading.
	 * ------------------------------------------------------------------ */

	--marker-height: 0.43em;
	--marker-offset: 0.86em;

	/* ---------------------------------------------------------------------
	 * 11. Focus
	 * ------------------------------------------------------------------ */

	--focus-width: 2px;
	--focus-offset: 2px;
	--focus-color: var(--bnk-green);
	--focus-color-inverse: var(--bnk-cream);

	/* ---------------------------------------------------------------------
	 * 12. Motion
	 *
	 * survey.js reads --survey-advance and reveal.js reads --reveal-step, so
	 * neither can disagree with the stylesheet.
	 * ------------------------------------------------------------------ */

	--duration: 200ms;
	--duration-slow: 420ms;
	--duration-marker: 640ms;
	--duration-reveal: 600ms;  /* entrances, which want longer than an interface response */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Near-expo. Right for something that has to feel like it snaps into place, wrong for an
	   entrance: it covers most of its distance in the first fifth of the duration, so a fade
	   set on it reads as a pop rather than as a fade. Entrances use --ease. */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--survey-advance: 300ms;
	--reveal-step: 90ms;       /* stagger between siblings in one reveal group */

	/* ---------------------------------------------------------------------
	 * 13. Measurements JS or two components must agree on
	 * ------------------------------------------------------------------ */

	--tap-min: 44px;
	--icon-sm: 18px;
	--icon-md: 26px;
	--icon-lg: 34px;
	--progress-height: 3px;

	--disc-size: clamp(2.75rem, 3.5vw, 4.1875rem);       /* 44 -> 67, the proof disc */
	--logo-width: clamp(12.5rem, 14vw, 16.875rem);       /* 200 -> 270. The floor is the mobile size */
	--rail-width: 19.5rem;                    /* the survey's step rail at desktop */

	/* The line art flanks the headline, so it hangs from the hero's top by roughly the height of
	   the logo plus the two gaps around it. 15vw lands on the measured 285px at 1920. */
	--illo-top: clamp(13rem, 15vw, 18rem);
}

/*
 * The inverse context. One class flips a section onto the green ground; the announce bar is the
 * only place the page uses it.
 *
 * The color declaration is not redundant. Redefining --color-text only changes what the token
 * resolves to inside the block, and body's color was computed long before that, so descendants
 * would inherit body's ink. Headings and links do re-resolve, because base.css sets their colour
 * from tokens on the elements themselves.
 */
.is-inverse {
	--color-bg: var(--bnk-green);
	--color-text: var(--bnk-cream);
	--color-text-muted: var(--bnk-cream-muted);
	--color-heading: var(--bnk-cream);
	--color-accent: var(--bnk-cream);
	--color-on-accent: var(--bnk-green);
	--color-link: var(--bnk-cream);
	--color-link-hover: var(--bnk-cream);
	--color-border: rgb(var(--bnk-cream-rgb) / 0.28);
	--color-border-control: rgb(var(--bnk-cream-rgb) / 0.55);
	--focus-color: var(--focus-color-inverse);

	color: var(--color-text);
	background-color: var(--color-bg);
}