/* ==========================================================================
   tokens.css — brand constants. Change colour, type and spacing here only.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Cortese Light  → display (wordmark, headlines, pull quotes)
   Heiti SC Light → body, navigation, labels
   Both are subset to Latin + punctuation, so they load in well under 20KB.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Cortese";
  src: url("../fonts/cortese-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Heiti";
  src: url("../fonts/heiti-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colour -------------------------------------------------------------
     Sampled from Astra's own photography, not picked in the abstract.      */
  --ink:        #17180F;   /* shadow of the dark leaf frame                 */
  --field:      #2E3B1F;   /* mid-green of the same frame                   */
  --paper:      #EAE7DC;   /* the backdrop behind the bottle and the glass  */
  --paper-warm: #DCD6C6;   /* same backdrop, one stop down                  */
  --stone:      #76735F;   /* secondary text on paper                       */
  --nasturtium: #E05414;   /* the orange flower in the farm beds            */

  /* --- Type ---------------------------------------------------------------
     Scale is a modular 1.25 (major third), rounded for the viewport.       */
  --display: "Cortese", "Didot", "Bodoni 72", Georgia, serif;
  --body:    "Heiti", "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  --t-wordmark: clamp(3.5rem, 11vw, 10rem);
  --t-xl:       clamp(2.75rem, 6.5vw, 5.5rem);
  --t-lg:       clamp(1.9rem, 3.6vw, 3rem);
  --t-md:       clamp(1.3rem, 2.2vw, 1.75rem);
  --t-body:     1.0625rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.8125rem;

  /* --- Space --------------------------------------------------------------
     --gutter is the page's left/right margin; --band is vertical section
     rhythm. Everything else should be a multiple of 0.5rem.                */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --band:   clamp(4.5rem, 11vw, 10rem);

  /* --- Measure ------------------------------------------------------------ */
  --measure: 58ch;
  --max:     1440px;
}