/*
  BRAND TOKENS. Colours read from the logo by eye and by sampling: the lettering is a
  dark maroon (about #3c0a0a to #501010), the skyline grey, the rings black. palette.mjs
  read the maroon as brown, so primary is the logo's maroon and accent a brighter red of
  the same family.
*/
:root {
  /* Colour */
  --color-primary: #4a1010;        /* logo lettering maroon: headings, header, footer */
  --color-on-primary: #f8f4f4;
  --color-accent: #9c2a2e;         /* buttons, links: the same red, lifted for contrast */
  --color-on-accent: #ffffff;
  --color-bg: #f8f4f4;             /* the logo's white, tinted with the maroon hue */
  --color-surface: #fdfbfb;
  --color-ink: #1d1718;
  --color-muted: #6a5d5e;
  --color-border: #e6dddd;

  /* Type */
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 700;
  --display-tracking: 0.01em;
  --display-transform: none;

  /* Shape and texture */
  --radius: 16px;
  --radius-sm: 10px;
  --hero-overlay: linear-gradient(180deg, rgba(20, 5, 6, 0.25), rgba(20, 5, 6, 0.6));
  --shadow: 0 10px 30px rgba(29, 23, 24, 0.08);
}