/* Design tokens: the colour, type, shape, layout and motion values. Every other stylesheet reads these, so a
   literal value elsewhere should be a token instead. */

@font-face {
  font-family: "Funnel Sans Variable";
  src: url("/assets/fonts/funnel-sans-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono Variable";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* colour roles */
  --ground: #F8F8F3;          /* page background */
  --tint: #EDEDE2;            /* the tint band and tint cards */
  --anchor: #01663E;          /* Catapult's logo green, used as the dark anchor colour */
  /* the accent. The name --lime is kept because many rules in base.css and the page markup refer to it by that
     name, although the colour is a deep fern green, not lime. It is the site's one accent colour. */
  --lime: #35704F;            /* the accent on the ground it sits on: buttons, circle arrows, icon tiles, the wizard's bar, the skip link */
  --on-lime: var(--cream);    /* text and icons that sit on --lime: cream on the deep fern (5.50:1) */
  --lime-dk: #CFE6CB;         /* the accent on a DARK ground (the anchor, a photo band): base.css rebinds --lime to this there */
  --on-lime-dk: var(--ink);
  --soft: #D5E8D2;            /* the pale accent fill that carries ink text: the contact band, the chosen form tile */
  --ink: #3B3B33;             /* main text colour */
  --ink-soft: rgba(59, 59, 51, 0.75);  /* secondary text: 0.7 measures 4.45:1 on the ground, so 0.75 is used to pass WCAG AA */
  --ink-mute: rgba(59, 59, 51, 0.8);   /* header links once scrolled */
  --cream: #F8F8F3;           /* text on dark grounds */
  --cream-soft: rgba(248, 248, 243, 0.78);   /* softer text on dark grounds, raised from 0.7 to hold 4.5:1 on the green anchor */
  --graphite: #21211C;        /* the diagram panel */
  --glass: rgba(248, 248, 243, 0.3);   /* translucent header colour (currently unused) */
  --head-bg: #FFFFFF;                  /* the header bar, white */
  --glass-card: rgba(33, 33, 28, 0.46); /* hero card glass: a lighter value measures about 2:1 under cream text, so this darker one is used */
  --glass-card-phone: rgba(33, 33, 28, 0.6); /* the same card on phones, over the bright wall (0.46 measured 3.39:1 at 390 wide) */
  --glass-dark: rgba(59, 59, 51, 0.4); /* story overlay */
  --dash: rgba(59, 59, 51, 0.4);       /* dashed hairlines */
  --dash-dark: rgba(248, 248, 243, 0.3);
  --rule: rgba(59, 59, 51, 0.2);       /* solid 1px border on rows and inputs */

  /* type: Funnel Sans at weight 400 throughout, Geist Mono for uppercase labels */
  --font: "Funnel Sans Variable", "Helvetica Neue", Arial, sans-serif;   /* the variable font files are served under these family names */
  --mono: "Geist Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --h1: 64px; --h1-lh: 67.2px; --h1-ls: -1.28px;
  --h2: 51px; --h2-lh: 58.65px; --h2-ls: -0.51px;
  --h3: 40px; --h3-lh: 48px; --h3-ls: -0.4px;
  --h4: 32px; --h4-lh: 38.4px; --h4-ls: -0.32px;
  --h5: 25px; --h5-lh: 31.25px;
  --lead: 20px; --lead-lh: 28px;
  --body: 16px; --body-lh: 22.4px;
  --q: 18px; --q-lh: 25.2px;
  --small: 13px; --small-lh: 18.2px;
  --label: 13px; --label-lh: 18.2px;
  --band-h2: 51px; --band-h2-lh: 58.65px;

  /* shape. Icon tiles, diagram tiles and their insets are 6px; 4px is the menu-link and focus radius. */
  --r: 6px; --r-sm: 4px; --r-panel: 12px; --r-pill: 999px;

  /* layout: content width, section rhythm, gaps */
  --container: 1366px; --pad-x: 24px;
  /* the section rhythm: 108px between sections, 72px on phones */
  --sec-y: 108px; --sec-y-half: 72px;
  --g-3: 3px; --g-6: 6px; --g-10: 10px; --g-12: 12px; --g-18: 18px; --g-24: 24px;
  --g-36: 36px; --g-48: 48px; --g-72: 72px; --g-96: 96px;
  --head-h: 72px;
  --bp-nav: 1137;             /* one breakpoint source: site.js reads this */

  /* motion */
  --ease-in: cubic-bezier(.44, 0, .09, .97);
  --ease-load: cubic-bezier(.44, 0, .19, 1.02);
  --dur-rise: .6s; --delay-rise: .2s; --rise-y: 40px;
  --dur-hover: .4s;
  --dur-roll: .25s;           /* button label roll: about 95% complete at 170ms */
  --dur-arrow: .2s;           /* circle-arrow slide on --ease-load: 90% at 120ms with a small overshoot */
  --dur-menu: .4s;            /* phone menu fade: 0.51 at 80ms, 0.95 at 220ms */
  --ease-menu: cubic-bezier(.2, .8, .2, 1);
  --marquee-speed: 50;        /* px per second */
  --stagger: .1;
}

@media (max-width: 809px) {
  :root {
    --h1: 40px; --h1-lh: 48px; --h1-ls: -0.4px;
    --h2: 40px; --h2-lh: 48px; --h2-ls: -0.4px;
    --h3: 40px; --h3-lh: 48px; --h3-ls: -0.4px;
    --h4: 25px; --h4-lh: 31.25px; --h4-ls: -0.25px;
    --h5: 18px; --h5-lh: 25.2px;
    --lead: 18px; --lead-lh: 25.2px;
    --small: 12px; --small-lh: 16.8px;
    --label: 12px; --label-lh: 16.8px;
    --band-h2: 24px; --band-h2-lh: 27.6px;
    --pad-x: 12px;
    --sec-y: 72px; --sec-y-half: 72px;
    --head-h: 60px;
  }
}
/* 810 to 1199: the desktop type sizes still apply */