/*
 * Brand tokens. The palette and font stacks below are transcribed verbatim from
 * MSCL_Website-Brand-and-Page-Brief.md section 3. Do not add colours outside
 * this palette: no blue, no silver, no pastel, no framework-default success
 * green or warning amber.
 */

:root {
  /* Palette (verbatim, brief section 3) */
  --msc-green-dark:  #273C2B;
  --msc-green-sage:  #508064;
  --msc-red:         #AF1F24;
  --msc-gold:        #EEB84A;
  --msc-off-white:   #F5F1EF;
  --msc-near-black:  #221F1F;
  --msc-white:       #FFFFFF;

  /* Type stacks (verbatim, brief section 3).
     Bogimber is listed first so a licensed webfont drops in with zero markup
     changes. Until then the display tier resolves to Georgia, which is the
     brief's own instructed fallback. Nunito Sans is self-hosted so the body
     tier renders identically off Apple hardware; it is already named in the
     approved stack, so this is not a fourth typeface. */
  --msc-font-display:   "Bogimber", Georgia, "Times New Roman", serif;
  --msc-font-editorial: Georgia, "Times New Roman", serif;
  --msc-font-body:      "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", sans-serif;

  /* Derived surface tones. Kept as mixes of palette colours only. */
  --msc-green-deep:    #1C2C1F; /* darker green-dark, for footer base + scrims */
  --msc-hairline:      rgba(255, 255, 255, 0.16);
  --msc-hairline-dark: rgba(34, 31, 31, 0.14);

  /* Type scale (brief section 3). Fluid within the specified ranges. */
  --msc-size-h1:      clamp(2.5rem, 1.6rem + 3.4vw, 4rem);      /* 40 -> 64 */
  --msc-size-h2:      clamp(1.875rem, 1.4rem + 1.7vw, 2.5rem);  /* 30 -> 40 */
  --msc-size-h3:      clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem); /* 21 -> 26 */
  --msc-size-body:    1.0625rem;  /* 17 */
  --msc-size-body-lg: 1.125rem;   /* 18 */
  --msc-size-quote:   clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem);   /* 24 -> 28 */
  --msc-size-button:  0.9375rem;  /* 15 */
  --msc-size-caption: 0.875rem;   /* 14 */

  --msc-leading-tight: 1.12;
  --msc-leading-snug:  1.3;
  --msc-leading-body:  1.65;

  /* Measure: body copy tops out around 70 characters (brief section 3). */
  --msc-measure: 68ch;
  --msc-measure-narrow: 58ch;

  /* Spacing scale */
  --msc-space-2xs: 0.25rem;
  --msc-space-xs:  0.5rem;
  --msc-space-sm:  0.75rem;
  --msc-space-md:  1rem;
  --msc-space-lg:  1.5rem;
  --msc-space-xl:  2rem;
  --msc-space-2xl: 3rem;
  --msc-space-3xl: 4.5rem;
  --msc-space-4xl: 6.5rem;

  /* Section rhythm */
  --msc-section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* Layout */
  --msc-container: 74rem;
  --msc-container-wide: 84rem;
  --msc-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* Buttons: minimal radius, 2 to 4px (brief section 3) */
  --msc-radius: 3px;
  --msc-radius-card: 4px;

  /* Header heights. The portrait 4:5 logo still sets the floor, but since the
     typeset wordmark carries the name the artwork no longer has to be large
     enough to read, so the bar is shorter than it was. See the launch
     checklist: a horizontal lockup would let this drop to roughly 72px. */
  --msc-header-h: 112px;
  --msc-header-h-scrolled: 84px;
  --msc-header-h-mobile: 76px;

  --msc-transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (max-width: 60rem) {
  :root {
    --msc-header-h: var(--msc-header-h-mobile);
    --msc-header-h-scrolled: var(--msc-header-h-mobile);
  }
}