:root {
  /* Brand colors */
  --color-ink: #182017;
  --color-forest: #142516;
  --color-forest-soft: #203421;
  --color-moss: #60734b;
  --color-leaf: #adc18b;
  --color-cream: #f2eee4;
  --color-paper: #faf8f2;
  --color-amber: #c66a2b;
  --color-copper: #8f431f;
  --color-nav-on-hero: #fff8ea;
  --color-nav-accent: #c66a2b;

  /* Transparent colors */
  --color-line: rgba(24, 32, 23, .18);
  --color-white-10: rgba(255, 255, 255, .1);
  --color-white-15: rgba(255, 255, 255, .15);
  --color-white-20: rgba(255, 255, 255, .2);
  --color-white-28: rgba(255, 255, 255, .28);
  --color-white-38: rgba(255, 255, 255, .38);
  --color-white-55: rgba(255, 255, 255, .55);
  --color-white-58: rgba(255, 255, 255, .58);
  --color-white-60: rgba(255, 255, 255, .6);
  --color-white-78: rgba(255, 255, 255, .78);

  /* Typography */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: Arial, Helvetica, sans-serif;

  /* Layout */
  --container-x: 8vw;
  --header-height: 86px;
  --header-height-scrolled: 72px;
  --section-y: 130px;
  --section-y-mobile: 90px;

  /* Motion */
  --transition-fast: .3s ease;
  --transition-medium: .4s ease;
  --transition-reveal: .9s cubic-bezier(.2, .7, .2, 1);

  /* Effects */
  --shadow-header: 0 6px 30px rgba(0, 0, 0, .07);
  --shadow-cookie: 0 15px 60px rgba(0, 0, 0, .28);
  --shadow-modal: 0 30px 100px rgba(0, 0, 0, .4);
}