:root {
  --site-primary: #207CA8;
  --site-secondary: #CC6B2C;
  --site-accent: #1E7BAD;
  --site-bg: #ffffff;
  --site-text: #333333;
  --site-primary-light: color-mix(in srgb, #207CA8 12%, white);
  --site-text-muted: #747474;
  --site-on-primary: #ffffff;
  --site-primary-foreground: #ffffff;
  --site-on-secondary: #111111;
  --site-on-accent: #ffffff;
  --site-action: #207CA8;
  --site-on-action: #ffffff;
  --site-primary-text: #1b698f;
  --site-primary-on-light: #1b698f;
  --site-primary-on-dark: #70abc7;
  --site-secondary-text: #974f21;
  --site-secondary-on-light: #974f21;
  --site-secondary-on-dark: #da9365;
  --site-accent-text: #196791;
  --site-accent-on-light: #196791;
  --site-accent-on-dark: #6fabcb;
  --site-on-primary-light: #111111;
  --site-on-text: #ffffff;
  --site-on-text-muted: #ffffff;
  --site-on-bg: #111111;

  --site-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --site-font-body: 'Open Sans', system-ui, sans-serif;

  --site-max-width: 1200px;
  --site-section-gap: 3rem;
  --site-block-gap: 1.5rem;

  --site-radius: 8px;

  --site-header-height: 72px;
  --site-header-transparent: 0;
  --site-header-sticky: 1;
}

body {
  font-family: var(--site-font-body);
  color: var(--site-text);
  background-color: var(--site-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-heading);
}

/* A dark (or light) surface inside the page — a Section with a dark
   background, a template's dark footer — says so, and the brand colours used
   as text inside it switch to the variant that reads there. One value cannot
   read on both a white page and a near-black band. --site-text follows
   the surface too: rich text (prose, globals.css) reads it rather than
   color, and a Text block in a dark Section was the page's dark text. */
.vw-surface-dark, .vw-surface-text, .vw-surface-text-muted {
  color: #f5f5f4;
  --site-text: #f5f5f4;
  --site-primary-text: var(--site-primary-on-dark);
  --site-secondary-text: var(--site-secondary-on-dark);
  --site-accent-text: var(--site-accent-on-dark);
  --site-text-muted: #a3a3a2;
}
.vw-surface-light, .vw-surface-primary-light, .vw-surface-bg {
  color: #333333;
  --site-text: #333333;
  --site-primary-text: var(--site-primary-on-light);
  --site-secondary-text: var(--site-secondary-on-light);
  --site-accent-text: var(--site-accent-on-light);
  --site-text-muted: #5f5f5f;
}
/* A band filled with a brand colour: everything on it is the text that
   reads on that colour (white or near-black, computed above). */
.vw-surface-primary {
  color: var(--site-on-primary);
  --site-text: var(--site-on-primary);
  --site-primary-text: var(--site-on-primary);
  --site-secondary-text: var(--site-on-primary);
  --site-accent-text: var(--site-on-primary);
  --site-text-muted: var(--site-on-primary);
}
.vw-surface-secondary {
  color: var(--site-on-secondary);
  --site-text: var(--site-on-secondary);
  --site-primary-text: var(--site-on-secondary);
  --site-secondary-text: var(--site-on-secondary);
  --site-accent-text: var(--site-on-secondary);
  --site-text-muted: var(--site-on-secondary);
}
.vw-surface-accent {
  color: var(--site-on-accent);
  --site-text: var(--site-on-accent);
  --site-primary-text: var(--site-on-accent);
  --site-secondary-text: var(--site-on-accent);
  --site-accent-text: var(--site-on-accent);
  --site-text-muted: var(--site-on-accent);
}