/* ==========================================================================
   AELMIORA — THEME
   Every colour, font, size, spacing and shape value used by the site lives
   here. Change a value below and it updates across all pages.
   styles.css only uses these variables; it holds no hard-coded design values.

   Two values also live in the HTML <head> of each page, so update them there
   if you change the theme:
     1. The Google Fonts <link> (if you change --font-display to another web font)
     2. <meta name="theme-color"> (browser UI colour on mobile; matches --color-primary)
   ========================================================================== */

:root {
  /* ---------- Brand colours ---------- */
  --color-primary: #0c3a24;          /* buttons, links, H1, key accents */
  --color-primary-dark: #082818;     /* hover state for primary */
  --color-on-primary: #ffffff;       /* text on primary (buttons, skip link) */
  --color-accent: #b08a3e;           /* thin rules and markers only, never body text */
  --color-accent-text: #7a5a16;      /* accent used as small text; keep 4.5:1 on --color-bg */

  /* ---------- Neutrals ---------- */
  --color-text: #1d2621;             /* body copy and headings */
  --color-muted: #56615b;            /* secondary text; keep 4.5:1 on bg and surface */
  --color-bg: #faf7f0;               /* page background */
  --color-surface: #f1ece1;          /* muted band / note background */
  --color-border: #e0d9c9;           /* hairlines and dividers */
  --color-photo-bg: #f1f1f1;         /* fills behind photos while they load */

  /* ---------- Footer ---------- */
  --color-footer-bg: #082818;
  --color-footer-text: #c9d6cd;
  --color-footer-link: #eef3ef;
  --color-footer-link-hover: #ffffff;
  --color-footer-heading: #e3c77e;
  --color-footer-rule: rgba(255, 255, 255, 0.12);

  /* ---------- Infographic viewer ---------- */
  --color-viewer-bg: rgba(8, 40, 24, 0.97);   /* deep brand green behind the infographic */

  /* ---------- Focus ring (accessibility: keep 3:1 against its background) ---------- */
  --color-focus: #0c3a24;            /* on light backgrounds */
  --color-focus-on-dark: #e3c77e;    /* in the footer */

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* headings */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 500;
  --weight-strong: 600;
  --line-height-body: 1.7;
  --line-height-heading: 1.2;

  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-h3: 1.15rem;
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-h1: clamp(2rem, 1.55rem + 2vw, 3rem);

  /* ---------- Spacing scale ---------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* ---------- Shape ---------- */
  --radius: 4px;                     /* images, notes */
  --radius-btn: 6px;                 /* buttons */
  --rule-thin: 1px;                  /* hairlines */
  --rule-accent: 2px;                /* accent rules above lists and columns */

  /* ---------- Layout ---------- */
  --container: 1120px;               /* max page width */
  --measure: 68ch;                   /* max reading line length */
  --header-h: 68px;

  /* ---------- Motion ---------- */
  --ease: 150ms ease;
}