/* ---------------------------------------------------------------------
   SBG brand tokens, interim 2026 guidance.

   Every brand value in the project lives in this file. A future brand
   refresh is a change here and nowhere else: no component stylesheet may
   contain a raw hex value or a font stack.

   Hex values were read out of the approved vector assets in
   "SBG Brand 2026/FONTS.zip" (FONTS/SVG/Icon-*.svg), which are the
   authoritative source. The guidance documents name the colours but do not
   list their values.

   Cloud is the exception. Icon-Cloud.svg carries #fdf0f3, a pale pink, but
   the colour actually in use is #f1f4ee, a pale green-neutral, which is what
   the guidance prose describes. Confirmed by JLantis 2026-09-07. If the
   vector assets are reissued, check whether Icon-Cloud.svg has caught up.

   Usage rules from READ FIRST - guidelines.docx:
     - wordmark may be dark green, light green, either brown, black or white
     - white and Cloud are the only approved page backgrounds
     - bright green, the browns and the accents are never backgrounds
     - pink, red and yellow are accents
   --------------------------------------------------------------------- */

:root {
  /* ---- brand palette ------------------------------------------------ */
  --sbg-leaf:       #446640;  /* dark green, primary */
  --sbg-bud:        #b5e623;  /* light green */
  --sbg-soil:       #5e4613;  /* brown */
  --sbg-deep-soil:  #2a2816;  /* darkest brown, near black */
  --sbg-cloud:      #f1f4ee;  /* approved pale background, faint cool green */
  --sbg-bloom:      #e63917;  /* accent, red */
  --sbg-burst:      #fd8298;  /* accent, pink */
  --sbg-white:      #ffffff;
  --sbg-black:      #000000;

  /* ---- semantic roles ----------------------------------------------- */
  /* Deep Soil rather than black for body text: against photographs, pure
     black reads harder than the photographs do. */
  --color-bg:            var(--sbg-white);
  --color-text:          var(--sbg-deep-soil);
  --color-text-muted:    #6b6858;
  --color-accent:        var(--sbg-leaf);
  --color-rule:          #e3e1d8;
  --color-error:         var(--sbg-bloom);

  /* The lightbox surround stays inside the brand instead of going black.
     Solid rather than translucent: at 96% the masthead and headline still
     read through it, which looked like a mistake rather than a scrim. */
  --color-lightbox-bg:     #2a2816;
  --color-lightbox-text:   #f3f1e8;
  --color-lightbox-muted:  #b9b5a4;

  --color-focus:         var(--sbg-leaf);

  /* ---- type --------------------------------------------------------- */
  --font-display: "Instrument Serif", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Cabin", Tahoma, Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --size-title:    clamp(2.6rem, 6vw, 4.25rem);
  --size-subtitle: clamp(1.05rem, 2vw, 1.3rem);
  --size-body:     1.0625rem;
  --size-caption:  0.9375rem;
  --size-meta:     0.875rem;

  --leading-tight: 1.08;
  --leading-body:  1.65;

  /* ---- layout ------------------------------------------------------- */
  --measure:       62ch;   /* intro paragraph line length */
  --page-max:      1440px;
  --page-pad:      clamp(1.25rem, 4vw, 3rem);

  /* The single gutter value for the justified grid, horizontal and
     vertical. Chosen so images stay legibly separate on a phone, not as a
     reference to anything. */
  --grid-gap:      6px;

  --focus-ring:    3px;
}