@at-root :root {
  /* --------------------------------- Colours -------------------------------- */

  /* Black & White */
  --color--black-0: #000;
  --color--black-1: #262621;
  --color--black-2: #333;
  --color--black-3: #666;
  --color--white-0: #fff;
  --color--white-1: #eee;
  --color--white-2: #ccc;
  --color--white-3: #aaa;

  /* Nature Color Palette */
  --color--yellow-1: #efd600;
  --color--yellow-2: #ffd500;
  --color--yellow-3: #fbba00;
  --color--orange-1: #f7a70b;
  --color--orange-2: #eb5b25;
  --color--orange-3: #e63323;
  --color--red-1: #e40428;
  --color--red-2: #e5005b;
  --color--red-3: #c82285;
  --color--purple-1: #964091;
  --color--purple-2: #6c4796;
  --color--purple-3: #494495;
  --color--blue-1: #1951a0;
  --color--blue-2: #006eb7;
  --color--blue-3: #0085c8;
  --color--turquoise-1: #0095bb;
  --color--turquoise-2: #0094a4;
  --color--turquoise-3: #00928c;
  --color--seagreen-1: #008b68;
  --color--seagreen-2: #229863;
  --color--seagreen-3: #449b50;
  --color--leafgreen-1: #3fa535;
  --color--leafgreen-2: #76b82a;
  --color--leafgreen-3: #c7d530;

  /* ------------------------------ Modular scale ----------------------------- */

  /* Useful to for fallback values */
  --no-space: 0;

  /* ---------------------------------- Type ---------------------------------- */

  --font-size-small-1: calc(var(--s0) / 1.2);
  --font-size-base: var(--s0);
  --font-size-big-1: var(--s1);
  --font-size-big-2: var(--s2);
  --font-size-big-3: var(--s3);
  --font-size-big-4: var(--s4);

  /* ----------------------------- Transition time ---------------------------- */
  --time: 200ms;
}