/* Five Keys Design System — round three — tokens v3.0 (see DESIGN.md sections 3 to 6) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Hanken+Grotesk:wght@300;400;500&display=swap');

:root{
  /* colour */
  --f-white:#FDFCFA;
  --f-paper:#F4F0E8;
  --f-sand:#E9E2D6;
  --f-ink:#2A2725;
  --f-ink-2:#57524D;
  --f-ink-3:#736D66;
  --f-night:#1E1B19;
  --f-on-night:#F4F0E8;
  --f-on-night-2:#A8A099;
  --f-gold:#C8A060;
  --f-brass-text:#8C6D2B;
  --f-rule:rgba(42,39,37,.16);
  --f-rule-strong:rgba(42,39,37,.5);
  --f-rule-night:rgba(244,240,232,.18);
  --f-scrim:linear-gradient(to top, rgba(30,27,25,.6) 0%, rgba(30,27,25,.44) 30%, rgba(30,27,25,.44) 70%, rgba(30,27,25,.22) 100%); /* 3.8: an even veil over the middle, the headline is centred in it */
  --f-success:#3D6B4F;
  --f-danger:#9B3F2E;

  /* per-ground set, white by default */
  --f-bg:var(--f-white);
  --f-fg:var(--f-ink);
  --f-fg-2:var(--f-ink-2);
  --f-fg-3:var(--f-ink-3);
  --f-line:var(--f-rule);
  --f-line-strong:var(--f-rule-strong);
  --f-btn-bg:var(--f-ink);
  --f-btn-fg:var(--f-white);

  /* type */
  --f-serif:'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-sans:'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-display:76px;
  --f-statement:48px;
  --f-title:40px;
  --f-title-2:30px;
  --f-numeral:56px;
  --f-lead:19px;
  --f-body:16px;
  --f-small:14px;
  --f-eyebrow:15px;
  --f-label:12px;
  --f-track:.16em;
  --f-measure:62ch;

  /* space */
  --f-s1:8px; --f-s2:12px; --f-s3:16px; --f-s4:24px; --f-s5:32px;
  --f-s6:48px; --f-s7:64px; --f-s8:96px; --f-s9:128px; --f-s10:160px;
  --f-section:128px;
  --f-gutter:40px;
  --f-container:1240px;
  --f-col-text:560px;
  --f-gap:32px;

  /* motion */
  --f-ease:cubic-bezier(.32,.72,0,1);
  --f-fast:400ms;
}

@media (max-width:820px){
  :root{ --f-display:56px; }
}
@media (max-width:640px){
  :root{
    --f-display:44px; --f-statement:30px; --f-title:30px; --f-title-2:24px; --f-numeral:40px; --f-lead:17px;
    --f-section:72px; --f-gutter:20px; --f-gap:20px;
  }
}