:root {
  /* Typography */
    --base-pt: 18px;
    --font-weight: 400;
    --serif: serif;
    --sans: 'Noto Sans', sans-serif;
    --body-font: var(--sans);
    --heading-font: "Yeseva One";
    --font-xxs: .5201rem;
    --font-xs: .8409rem;
    --font-s: 1rem;
    --font-m: 1.1892rem;
    --font-ml: 1.4142rem;
    --font-l: 1.6818rem;
    --font-xl: 2rem;
    --font-xxl: 2.3784rem;
    --nav-font: var(--font-m);
    --post-font: var(--font-m);

  /* Spacing */
    --space-unit: 1rem;
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs:  calc(0.375 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-s:   calc(0.75 * var(--space-unit));
    --space-m:   calc(1.25 * var(--space-unit));
    --space-ml:   calc(2 * var(--space-unit));
    --space-l:   calc(3.25 * var(--space-unit));
    --space-xl:  calc(5.25 * var(--space-unit));
    --space-xxl: calc(8.5 * var(--space-unit));
    --space-xxxl: calc(13.75 * var(--space-unit));

  /* Colors */
    --black: #222;
    --blue: rgb(7,82,162);
    --blue_dark: rgb(4,49,97);
    --pink_dark: rgb(85,25,144);
    --violet: rgb(75,22,128);
    --teal: teal;
    --teal_dark: rgb(5,62,122);
    --white: #fff;
    --ink: rgb(200,205,211);

  /* Layout */
    --readable-width: 42rem;
}