/* ---------------------------------------------------------------------------
   6GEM+ design tokens

   The corporate palette is unchanged, the same brand violet, the same amber
   and mint section grounds, the same near-white. What is new is that each
   ground now carries a foreground colour that actually passes WCAG AA on it,
   so editors can no longer produce white-on-mint (2.05:1) or the white-on-white
   heading that was live on the 6GEMcubator page.

   Rule of thumb: violet is a DARK ground and takes light text; amber, mint and
   near-white are LIGHT grounds and take violet text.
   --------------------------------------------------------------------------- */

:root {
  /* --- brand ---------------------------------------------------------- */
  --c-violet:        #453A75;  /* corporate violet, unchanged */
  --c-violet-deep:   #2E2650;  /* pressed / hover on light grounds */
  --c-violet-mid:    #5F5293;  /* borders and dividers on light grounds */
  --c-violet-pale:   #EEEAF7;  /* tinted panels on light grounds */
  --c-violet-light:  #CAC1F3;  /* the existing highlight, for DARK grounds only */

  /* --- section grounds (kept from the current site) -------------------- */
  --c-light:         #F8F9FA;
  --c-white:         #FFFFFF;
  --c-amber:         #FABA43;
  --c-mint:          #52C9A6;

  /* The "highlight purple" section ground. Nudged from #7F71B4 to #6F62A6,
     the only colour on the site that moved. #7F71B4 is a mid-tone that fails
     AA for normal text in both directions (4.27:1 against white, 2.34:1
     against the brand violet), so no foreground could have been correct on it.
     The darker value keeps the hue and takes light text at 5.0:1. */
  --c-violet-accent: #6F62A6;

  /* --- foregrounds, one per ground ------------------------------------- */
  --on-violet:       #F8F9FA;  /*  9.5:1  */
  --on-light:        #453A75;  /*  9.4:1  */
  --on-amber:        #453A75;  /*  5.8:1  */
  --on-mint:         #453A75;  /*  4.9:1  */

  /* --- muted text, one per ground -------------------------------------- */
  --muted-on-light:  #5B5470;  /*  6.8:1  */
  --muted-on-violet: #CFC6F0;  /*  6.2:1  */

  /* --- links ------------------------------------------------------------
     Bootstrap's default #0d6efd was left in place across the site: 2.21:1 on
     the violet ground and 4.27:1 on near-white. Both are replaced here. */
  --link-on-light:         #453A75;
  --link-on-light-hover:   #2E2650;
  --link-on-violet:        #CFC6F0;
  --link-on-violet-hover:  #FFFFFF;

  /* --- rules and shadows ------------------------------------------------ */
  --rule-on-light:   rgba(69, 58, 117, 0.18);
  --rule-on-violet:  rgba(248, 249, 250, 0.28);

  --shadow-1: 0 6px 10px rgba(31, 26, 56, .08), 0 0 6px rgba(31, 26, 56, .05);
  --shadow-2: 0 10px 22px rgba(31, 26, 56, .14), 0 4px 8px rgba(31, 26, 56, .06);

  /* --- type ------------------------------------------------------------- */
  --font-brand: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                "Noto Color Emoji";

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     600;

  /* Fluid type. The base was a flat 1.2rem, which is large on a phone and
     small on a 27" display. */
  --fs-body:   clamp(1.0rem,  0.95rem + 0.30vw, 1.15rem);
  --fs-lead:   clamp(1.1rem,  1.00rem + 0.55vw, 1.35rem);
  --fs-h1:     clamp(2.0rem,  1.45rem + 2.60vw, 3.75rem);
  --fs-h2:     clamp(1.6rem,  1.25rem + 1.55vw, 2.60rem);
  --fs-h3:     clamp(1.3rem,  1.15rem + 0.75vw, 1.85rem);
  --fs-h4:     clamp(1.1rem,  1.03rem + 0.35vw, 1.35rem);
  --fs-small:  clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-body:   1.6;

  /* Keeps running text near 70 characters instead of the current ~110. */
  --measure:   72ch;

  /* --- layout ----------------------------------------------------------- */
  --nav-h:        72px;   /* was a fixed 158px on every breakpoint */
  --nav-h-mobile: 60px;

  /* Section padding was a flat 8rem top and bottom regardless of viewport or
     content density, which is what made the homepage 13,374px tall on a phone. */
  --section-y:       clamp(3rem, 7vw, 7rem);
  --section-y-tight: clamp(2rem, 4vw, 3.5rem);

  --radius-sm: 4px;
  --radius-md: 8px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}