Styles
















Lorem ipsum dolor sit heading 1

Consectetur heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magni aspernatur fugiat dolor consectetur reprehenderit adipisci eum quas fugit distinctio ipsam, nemo esse, itaque error alias nesciunt. Possimus, impedit itaque.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora incidunt aperiam, atque in veniam voluptatum non similique nam perferendis aliquid ut ad fugit. Illo cupiditate quod, quasi ullam nostrum similique?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem obcaecati possimus inventore suscipit molestiae. Quisquam rerum, dignissimos, odio, voluptatem maiores aspernatur labore qui ratione nihil aliquam pariatur! Soluta, animi totam?

1. Lorem ipsum

2. Dolor sit amet

a. Improving the system

b. Providing more refuse dumps

Heading 2

Heading 3

Heading 4

$_clr-blue-99: hsla(203, 100%, 98%, 1);
$_clr-blue-95: hsla(203, 100%, 93.6%, 1);
$_clr-blue-90: hsla(203, 100%, 87.2%, 1);
$_clr-blue-85: hsla(203, 100%, 80.8%, 1);
$_clr-blue-80: hsla(203, 100%, 74.4%, 1);
$_clr-blue-75: hsla(203, 100%, 68%, 1);
$_clr-blue-70: hsla(203, 100%, 61.6%, 1);
$_clr-blue-65: hsla(203, 100%, 55.2%, 1);
$_clr-blue-60: hsla(203, 100%, 48.8%, 1);
$_clr-blue-55: hsla(203, 100%, 42.4%, 1);
$_clr-blue-50: hsla(203, 100%, 36%, 1);
$_clr-blue-45: hsla(203, 100%, 32.4%, 1);
$_clr-blue-40: hsla(203, 100%, 28.8%, 1);
$_clr-blue-35: hsla(203, 100%, 25.2%, 1);
$_clr-blue-30: hsla(203, 100%, 21.6%, 1);
$_clr-blue-25: hsla(203, 100%, 18%, 1);
$_clr-blue-20: hsla(203, 100%, 14.4%, 1);
$_clr-blue-15: hsla(203, 100%, 10.8%, 1);
$_clr-blue-10: hsla(203, 100%, 7.2%, 1);
$_clr-blue-5: hsla(203, 100%, 3.6%, 1);


$_clr-green-99: hsla(89, 52%, 98%, 1);
$_clr-green-95: hsla(89, 52%, 94.8%, 1);
$_clr-green-90: hsla(89, 52%, 89.6%, 1);
$_clr-green-85: hsla(89, 52%, 84.4%, 1);
$_clr-green-80: hsla(89, 52%, 79.2%, 1);
$_clr-green-75: hsla(89, 52%, 74%, 1);
$_clr-green-70: hsla(89, 52%, 68.8%, 1);
$_clr-green-65: hsla(89, 52%, 63.6%, 1);
$_clr-green-60: hsla(89, 52%, 58.4%, 1);
$_clr-green-55: hsla(89, 52%, 53.2%, 1);
$_clr-green-50: hsla(89, 52%, 48%, 1);
$_clr-green-45: hsla(89, 52%, 43.2%, 1);
$_clr-green-40: hsla(89, 52%, 38.4%, 1);
$_clr-green-35: hsla(89, 52%, 33.6%, 1);
$_clr-green-30: hsla(89, 52%, 28.8%, 1);
$_clr-green-25: hsla(89, 52%, 24%, 1);
$_clr-green-20: hsla(89, 52%, 19.2%, 1);
$_clr-green-15: hsla(89, 52%, 14.4%, 1);
$_clr-green-10: hsla(89, 52%, 9.6%, 1);
$_clr-green-5: hsla(89, 52%, 4.8%, 1);


$_clr-neutral-99: hsla(60, 6%, 98%, 1);
$_clr-neutral-95: hsla(60, 6%, 99.3%, 1);
$_clr-neutral-90: hsla(60, 6%, 98.6%, 1);
$_clr-neutral-85: hsla(60, 6%, 97.9%, 1);
$_clr-neutral-80: hsla(60, 6%, 97.2%, 1);
$_clr-neutral-75: hsla(60, 6%, 96.5%, 1);
$_clr-neutral-70: hsla(60, 6%, 95.8%, 1);
$_clr-neutral-65: hsla(60, 6%, 95.1%, 1);
$_clr-neutral-60: hsla(60, 6%, 94.4%, 1);
$_clr-neutral-55: hsla(60, 6%, 93.7%, 1);
$_clr-neutral-50: hsla(60, 6%, 93%, 1);
$_clr-neutral-45: hsla(60, 6%, 83.7%, 1);
$_clr-neutral-40: hsla(60, 6%, 74.4%, 1);
$_clr-neutral-35: hsla(60, 6%, 65.1%, 1);
$_clr-neutral-30: hsla(60, 6%, 55.8%, 1);
$_clr-neutral-25: hsla(60, 6%, 46.5%, 1);
$_clr-neutral-20: hsla(60, 6%, 37.2%, 1);
$_clr-neutral-15: hsla(60, 6%, 27.9%, 1);
$_clr-neutral-10: hsla(60, 6%, 18.6%, 1);
$_clr-neutral-5: hsla(60, 6%, 9.3%, 1);


$_clr-dark-99: hsla(185, 14%, 98%, 1);
$_clr-dark-95: hsla(185, 14%, 91.7%, 1);
$_clr-dark-90: hsla(185, 14%, 83.4%, 1);
$_clr-dark-85: hsla(185, 14%, 75.1%, 1);
$_clr-dark-80: hsla(185, 14%, 66.8%, 1);
$_clr-dark-75: hsla(185, 14%, 58.5%, 1);
$_clr-dark-70: hsla(185, 14%, 50.2%, 1);
$_clr-dark-65: hsla(185, 14%, 41.9%, 1);
$_clr-dark-60: hsla(185, 14%, 33.6%, 1);
$_clr-dark-55: hsla(185, 14%, 25.3%, 1);
$_clr-dark-50: hsla(185, 14%, 17%, 1);
$_clr-dark-45: hsla(185, 14%, 15.3%, 1);
$_clr-dark-40: hsla(185, 14%, 13.6%, 1);
$_clr-dark-35: hsla(185, 14%, 11.9%, 1);
$_clr-dark-30: hsla(185, 14%, 10.2%, 1);
$_clr-dark-25: hsla(185, 14%, 8.5%, 1);
$_clr-dark-20: hsla(185, 14%, 6.8%, 1);
$_clr-dark-15: hsla(185, 14%, 5.1%, 1);
$_clr-dark-10: hsla(185, 14%, 3.4%, 1);
$_clr-dark-5: hsla(185, 14%, 1.7%, 1);




$colors: (
 primary: (
  99: $_clr-blue-99,
  95: $_clr-blue-95,
  90: $_clr-blue-90,
  85: $_clr-blue-85,
  80: $_clr-blue-80,
  75: $_clr-blue-75,
  70: $_clr-blue-70,
  65: $_clr-blue-65,
  60: $_clr-blue-60,
  55: $_clr-blue-55,
  50: $_clr-blue-50,
  45: $_clr-blue-45,
  40: $_clr-blue-40,
  35: $_clr-blue-35,
  30: $_clr-blue-30,
  25: $_clr-blue-25,
  20: $_clr-blue-20,
  15: $_clr-blue-15,
  10: $_clr-blue-10,
  5: $_clr-blue-5,
 ),
 accent-1: (
  99: $_clr-green-99,
  95: $_clr-green-95,
  90: $_clr-green-90,
  85: $_clr-green-85,
  80: $_clr-green-80,
  75: $_clr-green-75,
  70: $_clr-green-70,
  65: $_clr-green-65,
  60: $_clr-green-60,
  55: $_clr-green-55,
  50: $_clr-green-50,
  45: $_clr-green-45,
  40: $_clr-green-40,
  35: $_clr-green-35,
  30: $_clr-green-30,
  25: $_clr-green-25,
  20: $_clr-green-20,
  15: $_clr-green-15,
  10: $_clr-green-10,
  5: $_clr-green-5,
 ),
 neutral: (
  99: $_clr-neutral-99,
  95: $_clr-neutral-95,
  90: $_clr-neutral-90,
  85: $_clr-neutral-85,
  80: $_clr-neutral-80,
  75: $_clr-neutral-75,
  70: $_clr-neutral-70,
  65: $_clr-neutral-65,
  60: $_clr-neutral-60,
  55: $_clr-neutral-55,
  50: $_clr-neutral-50,
  45: $_clr-neutral-45,
  40: $_clr-neutral-40,
  35: $_clr-neutral-35,
  30: $_clr-neutral-30,
  25: $_clr-neutral-25,
  20: $_clr-neutral-20,
  15: $_clr-neutral-15,
  10: $_clr-neutral-10,
  5: $_clr-neutral-5,
 ),
 dark: (
  99: $_clr-dark-99,
  95: $_clr-dark-95,
  90: $_clr-dark-90,
  85: $_clr-dark-85,
  80: $_clr-dark-80,
  75: $_clr-dark-75,
  70: $_clr-dark-70,
  65: $_clr-dark-65,
  60: $_clr-dark-60,
  55: $_clr-dark-55,
  50: $_clr-dark-50,
  45: $_clr-dark-45,
  40: $_clr-dark-40,
  35: $_clr-dark-35,
  30: $_clr-dark-30,
  25: $_clr-dark-25,
  20: $_clr-dark-20,
  15: $_clr-dark-15,
  10: $_clr-dark-10,
  5: $_clr-dark-5,
 ),
);


// contextual_color_tokens

$color-primary-99: var(--primary-99);
$color-primary-95: var(--primary-95);
$color-primary-90: var(--primary-90);
$color-primary-85: var(--primary-85);
$color-primary-80: var(--primary-80);
$color-primary-75: var(--primary-75);
$color-primary-70: var(--primary-70);
$color-primary-65: var(--primary-65);
$color-primary-60: var(--primary-60);
$color-primary-55: var(--primary-55);
$color-primary-50: var(--primary-50);
$color-primary-45: var(--primary-45);
$color-primary-40: var(--primary-40);
$color-primary-35: var(--primary-35);
$color-primary-30: var(--primary-30);
$color-primary-25: var(--primary-25);
$color-primary-20: var(--primary-20);
$color-primary-15: var(--primary-15);
$color-primary-10: var(--primary-10);
$color-primary-5: var(--primary-5);

$color-accent-1-99: var(--accent-1-99);
$color-accent-1-95: var(--accent-1-95);
$color-accent-1-90: var(--accent-1-90);
$color-accent-1-85: var(--accent-1-85);
$color-accent-1-80: var(--accent-1-80);
$color-accent-1-75: var(--accent-1-75);
$color-accent-1-70: var(--accent-1-70);
$color-accent-1-65: var(--accent-1-65);
$color-accent-1-60: var(--accent-1-60);
$color-accent-1-55: var(--accent-1-55);
$color-accent-1-50: var(--accent-1-50);
$color-accent-1-45: var(--accent-1-45);
$color-accent-1-40: var(--accent-1-40);
$color-accent-1-35: var(--accent-1-35);
$color-accent-1-30: var(--accent-1-30);
$color-accent-1-25: var(--accent-1-25);
$color-accent-1-20: var(--accent-1-20);
$color-accent-1-15: var(--accent-1-15);
$color-accent-1-10: var(--accent-1-10);
$color-accent-1-5: var(--accent-1-5);

$color-neutral-99: var(--neutral-99);
$color-neutral-95: var(--neutral-95);
$color-neutral-90: var(--neutral-90);
$color-neutral-85: var(--neutral-85);
$color-neutral-80: var(--neutral-80);
$color-neutral-75: var(--neutral-75);
$color-neutral-70: var(--neutral-70);
$color-neutral-65: var(--neutral-65);
$color-neutral-60: var(--neutral-60);
$color-neutral-55: var(--neutral-55);
$color-neutral-50: var(--neutral-50);
$color-neutral-45: var(--neutral-45);
$color-neutral-40: var(--neutral-40);
$color-neutral-35: var(--neutral-35);
$color-neutral-30: var(--neutral-30);
$color-neutral-25: var(--neutral-25);
$color-neutral-20: var(--neutral-20);
$color-neutral-15: var(--neutral-15);
$color-neutral-10: var(--neutral-10);
$color-neutral-5: var(--neutral-5);

$color-dark-99: var(--dark-99);
$color-dark-95: var(--dark-95);
$color-dark-90: var(--dark-90);
$color-dark-85: var(--dark-85);
$color-dark-80: var(--dark-80);
$color-dark-75: var(--dark-75);
$color-dark-70: var(--dark-70);
$color-dark-65: var(--dark-65);
$color-dark-60: var(--dark-60);
$color-dark-55: var(--dark-55);
$color-dark-50: var(--dark-50);
$color-dark-45: var(--dark-45);
$color-dark-40: var(--dark-40);
$color-dark-35: var(--dark-35);
$color-dark-30: var(--dark-30);
$color-dark-25: var(--dark-25);
$color-dark-20: var(--dark-20);
$color-dark-15: var(--dark-15);
$color-dark-10: var(--dark-10);
$color-dark-5: var(--dark-5);