/* Whitley Bay Golf Club: brand tokens for the homepage redesign (1 Nov 2026), on the St Ives token file's roles.
 * Colour: the club's website carries none (black, white, a default link blue), so navy comes from the club's own
 * entrance sign ("Welcome to Whitley Bay Golf Club, Founded 1890"; sampled #2E4583 in sunlight, deepened for text).
 * Sand is the beach below the course: rules and icons only (3.2:1 on white, never text). Light Sand on navy only.
 * Type: Noto Sans, the club's own web font (its ClubV1 site loads it from Google Fonts). Weights 300 to 700.
 * Crest: the club's own (WBGC, St Mary's Lighthouse above the shield), black line art on transparent, from its site.
 * On navy it sits on a white plate (.wb-crest-plate). Never redraw or recolour it.
 * Writing: sentence case headings, British English, no em or en dashes. Labels and buttons may be uppercase. */

:root {
  /* Colour: primary */
  --wb-navy: #1F3870;          /* Whitley Bay navy, from the entrance sign. White on navy 11.3:1 */
  --wb-gold: #B3894A;          /* Sand. Rules and icons only (3.2:1 on white) */
  /* Colour: secondary */
  --wb-sky: #2A62A8;           /* Sea Blue. Links and hover; 6.16:1 on white, 5.45:1 on stone */
  --wb-gold-light: #E2C893;    /* Light Sand. On navy only; 6.95:1 */
  --wb-gold-pale: #EEDDB5;     /* Pale Sand. On navy only */
  /* Colour: neutrals */
  --wb-white: #FFFFFF;
  --wb-stone: #F3F1EC;         /* Sea Stone. Alternate section ground */
  --wb-body: #4B4B4B;          /* Body Grey. Body copy; 8.72:1 on white */
  --wb-ink: #222222;           /* Ink. Maximum-contrast text */
  --wb-rule: #E4E4E4;          /* Rule Grey. Borders and dividers */

  /* Roles (use these in components so a direction can re-map them in one place) */
  --wb-ground: var(--wb-white);
  --wb-ground-alt: var(--wb-stone);
  --wb-heading: var(--wb-navy);
  --wb-text: var(--wb-body);
  --wb-link: var(--wb-sky);
  --wb-link-hover: var(--wb-navy);
  --wb-focus: var(--wb-sky);
  --wb-button-bg: var(--wb-navy);
  --wb-button-text: var(--wb-white);
  --wb-on-navy-accent: var(--wb-gold-light);

  /* Type */
  --wb-font: "Noto Sans", Arial, Helvetica, sans-serif;
  --wb-w-light: 300;
  --wb-w-regular: 400;
  --wb-w-medium: 500;
  --wb-w-semibold: 600;
  --wb-w-bold: 700;

  /* Type scale (brand book hierarchy). Fluid between 390px and 1440px viewports. */
  --wb-display: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);     /* 44 to 72px, 700, lh 1.05. Hero (56 to 72 on desktop) */
  --wb-display-lh: 1.05;
  --wb-h1: clamp(2.125rem, 1.8rem + 1.3vw, 3rem);          /* 34 to 48px, 600, lh 1.15 */
  --wb-h1-lh: 1.15;
  --wb-h2: clamp(1.625rem, 1.45rem + 0.7vw, 2.125rem);     /* 26 to 34px, 600, lh 1.2 */
  --wb-h2-lh: 1.2;
  --wb-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);        /* 20 to 24px, 600, lh 1.3 */
  --wb-h3-lh: 1.3;
  --wb-body-size: 1.0625rem;                                 /* 17px, 400, lh 1.6 */
  --wb-body-lh: 1.6;
  --wb-lead: 1.25rem;                                        /* 20px, 300, lh 1.6. Standfirsts */
  --wb-lead-lh: 1.6;
  --wb-caption: 0.875rem;                                    /* 14px, 400, lh 1.4 */
  --wb-caption-lh: 1.4;
  --wb-label: 0.8125rem;                                     /* 13px, 600, lh 1.2, uppercase, 0.06em. Buttons, tags */
  --wb-label-lh: 1.2;
  --wb-label-tracking: 0.06em;
  --wb-measure: 68ch;                                        /* Line length 60 to 75 characters */

  /* Layout and touch */
  --wb-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --wb-max: 1440px;
  --wb-tap: 44px;              /* Minimum tap target */
  --wb-radius: 2px;

  /* Motion. Transform and opacity only; durations collapse under prefers-reduced-motion. */
  --wb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --wb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wb-dur-fast: 180ms;
  --wb-dur: 420ms;
  --wb-dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --wb-dur-fast: 1ms; --wb-dur: 1ms; --wb-dur-slow: 1ms; }
}

/* Optional helpers. Prefixed so they never collide with a direction's own classes. */

/* The crest on navy: a white plate with clear space all round (the crest is black line art, taller than wide).
   <span class="wb-crest-plate"><img src="assets/brand/crest-320.png" alt="Whitley Bay Golf Club"></span> */
.wb-crest-plate {
  display: inline-grid; place-items: center;
  width: var(--wb-crest-plate, 104px); aspect-ratio: 4 / 5;
  border-radius: 6px; background: var(--wb-white);
}
.wb-crest-plate > img { width: 70%; height: auto; display: block; }

.wb-label {
  font: var(--wb-w-semibold) var(--wb-label)/var(--wb-label-lh) var(--wb-font);
  letter-spacing: var(--wb-label-tracking); text-transform: uppercase;
}

/* Primary button: navy, white label, 44px minimum, Sky Blue focus ring. */
.wb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--wb-tap); padding: 0 1.4em;
  font: var(--wb-w-semibold) var(--wb-label)/1 var(--wb-font);
  letter-spacing: var(--wb-label-tracking); text-transform: uppercase; text-decoration: none;
  color: var(--wb-button-text); background: var(--wb-button-bg); border: 1px solid var(--wb-button-bg);
  border-radius: var(--wb-radius);
  transition: background-color var(--wb-dur-fast) ease, color var(--wb-dur-fast) ease;
}
.wb-button:hover { background: var(--wb-sky); border-color: var(--wb-sky); }
.wb-button:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 3px; }