/* ================================================================
   DESIGN TOKENS: change the look of the whole site here.
   Fonts must also be loaded in config.json -> fonts.google_css
   ================================================================ */
:root{
  /* typography */
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --weight-heading: 800;
  --weight-body: 400;
  --weight-strong: 700;
  --text-size: 16px;
  --line-height: 1.6;

  /* colors */
  --color-dark: #2B2D30;        /* header, footer, main-site background */
  --color-heading: #2B2D30;     /* headings inside white cards */
  --color-text: #3d4248;        /* body text (dark for readability) */
  --color-link: #cc3366;
  --color-card: #ffffff;
  --color-accent: #61CE70;      /* buttons */
  --color-info: #6EC1E4;        /* small icons, date stamps */
  --color-challenge: #D80606;
  --color-explore: #299134;
  --color-discover: #6A35B3;
  --color-season-light: #C6DE94; /* BIOGLOW palette */
  --color-season-dark: #2C5535;

  /* shapes and spacing */
  --radius: 6px;
  --shadow: 0 0 10px rgba(0,0,0,.3);
  --content-width: 1140px;
  --gutter: 16px;
}
/* each program page gets its own color */
.program-main{--program: var(--color-dark)}
.program-challenge{--program: var(--color-challenge)}
.program-explore{--program: var(--color-explore)}
.program-discover{--program: var(--color-discover)}