@layer tokens, utilities, components;
@layer tokens {
  :root {
    --sanstream-orange-on-white: #ab3e01;
    --sanstream-orange: #ff5c00;
    --sanstream-yellow: #fe9800;
    --lightest-colour: #ffffff;
    --darkest-colour: #4d4d4d;
    --colour-background: var(--lightest-colour);
    --text-colour: var(--darkest-colour);
    --text-on-dark-colour: #ffffff;
    --contrasting-border-colour: var(--darkest-colour);
    --toned-down-border-colour: #ababab;
    --light-grey-fill: #e3e3e3;
    --middle-grey-fill: #c4c4c4;
    --dark-grey-fill: #878787;

    --sanstream-algae-green-10: #8fefef;
    --sanstream-algae-green-30: #47dddd;
    --sanstream-algae-green-50: #13b4b4;
    --sanstream-algae-green-70: #0b8282;
    --sanstream-algae-green-90: #034242;

    --base-size: 20px;
    --min-content-width: calc(
      20px * 4 * 3 + 20px * 2 * 2
    ); /* base-size * 4 (= column-width) * 3 columns */
    --mobile-breakpoint: 920px;

    --sanstream-spiral-animation-duration: 1.5s;
    --sanstream-spiral-animation-delay: 2s;
    --sanstream-spiral-animation-ease: ease-in-out;
  }

  .sanstream-intro-text {
    font-family: "Armata", "Helvetica", sans-serif;
    color: var(--text-colour);
    font-size: 100%;
  }

  .sanstream-heading {
    font-family: "Armata", "Helvetica", sans-serif;
    color: var(--text-colour);
    line-height: 1.4em;
  }

  .sanstream-special-text {
    font-family: "Fira Code", monospace;
    color: var(--text-colour);
  }

  .sanstream-body-text {
    font-family: "Montserrat", serif;
    font-weight: 500;
    color: var(--text-colour);
  }

  .sanstream-no-list-styles {
    list-style: none;
    padding: 0;
    margin: 1em 0;
  }
}