/* APPROVED reference values. Adjust per pixel comparison in later approved steps only. */
:root {
  color-scheme: light;
  --color-cream: #FBF8F3;
  --color-ivory: #FDF9F5;
  --color-charcoal: #292723;
  --color-brown: #805B42;
  --color-border: #DCCEC1;
  --color-text-light: #FDF9F5;
  --color-dark-active: #C8A186; /* Provisional contrast treatment on dark Header */

  /* EB Garamond approved as the site's principal literary font in STEP 2. */
  --font-literary: "EB Garamond", Georgia, "Times New Roman", serif;

  --container-max-width: 1300px;
  --side-gutter: clamp(20px, 7.7vw, 118px);
  --header-height: 88px;
  --header-height-mobile: 72px;
  --header-logo-size: 24px;
  --header-link-size: 17px;
  --button-min-height: 56px;
  --button-font-size: 21px;
  --radius-button: 3px;
  --section-gap: clamp(64px, 5vw, 80px);
  --type-page-title: 64px;
  --type-body: 21px;
  --type-kicker: 13px;
}

/* STEP 1 comparison modes remain available inside the internal review page. */
html[data-preview-font="eb"] { --font-literary: "EB Garamond", Georgia, serif; }
html[data-preview-font="cormorant"] { --font-literary: "Cormorant Garamond", Georgia, serif; }
html[data-preview-font="georgia"] { --font-literary: Georgia, "Times New Roman", serif; }

@media (max-width: 880px) {
  :root {
    --header-logo-size: 21px;
    --type-page-title: clamp(38px, 9vw, 55px);
    --type-body: 19px;
  }
}