/* Short token names for the page CSS (base.css and each page's stylesheet) and the
   inline styles in the pages. They are aliases onto the same values as the semantic
   layer in the other token files, not a second palette. Keep the names stable: the
   pages refer to them directly. */
:root{
  /* palette */
  --lw-fog:#2F372F;
  --lw-peace:#B2B597;
  --lw-sage:#CED1B7;
  --lw-light:#EFF0E0;
  --lw-whisper:#F7F5EC;
  --lw-white:#FFFFFF;
  --lw-black:#000000;

  /* foreground / background */
  --fg-1:var(--lw-fog);
  --fg-2:color-mix(in oklab,var(--lw-fog) 70%,var(--lw-light));
  --fg-3:color-mix(in oklab,var(--lw-fog) 45%,var(--lw-light));
  --fg-on-dark:var(--lw-whisper);
  --bg-page:var(--lw-light);
  --bg-page-alt:var(--lw-whisper);
  --bg-card:var(--lw-whisper);
  --bg-dark:var(--lw-fog);
  --bg-mid:var(--lw-sage);
  --bg-mute:var(--lw-peace);
  --border-soft:color-mix(in oklab,var(--lw-fog) 12%,transparent);
  --border-mid:color-mix(in oklab,var(--lw-fog) 22%,transparent);
  --rule:color-mix(in oklab,var(--lw-fog) 18%,transparent);

  /* families */
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  /* fluid type scale used by the sites */
  --fs-hero:clamp(2.75rem,4.4vw + 1rem,4.5rem);
  --fs-h1:clamp(2.25rem,2.6vw + 1rem,3.25rem);
  --fs-h2:clamp(1.625rem,1.4vw + 1rem,2.125rem);
  --fs-h3:clamp(1.125rem,0.4vw + 1rem,1.375rem);
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-caption:0.75rem;
  --fs-eyebrow:0.6875rem;

  --tr-tight:-0.01em;
  --tr-normal:0em;
  --tr-eyebrow:0.2em;
  --tr-caption:0.02em;

  --lh-display:1.1;
  --lh-h2:1.15;
  --lh-h3:1.2;
  --lh-body:1.5;
  --lh-caption:1.4;

  /* spacing */
  --sp-1:0.25rem;
  --sp-2:0.5rem;
  --sp-3:0.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --sp-8:4rem;
  --sp-9:6rem;
  --sp-10:8rem;

  /* radii */
  --r-xs:4px;
  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;

  /* elevation */
  --shadow-1:0 1px 2px rgba(47,55,47,.05);
  --shadow-2:0 2px 8px rgba(47,55,47,.06),0 1px 2px rgba(47,55,47,.04);
  --shadow-3:0 8px 28px rgba(47,55,47,.10),0 2px 4px rgba(47,55,47,.04);

  /* motion */
  --t-fast:140ms;
  --t-base:220ms;
  --t-slow:420ms;
}