/* =========================================================
   TOE BEANS DESIGN SYSTEM
   BASE ELEMENTS
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    var(--ds-background);

  color:
    var(--ds-text);
}


body {
  margin: 0;

  background:
    var(--ds-background);

  color:
    var(--ds-text);

  line-height: 1.5;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


h1,
h2,
h3,
h4 {
  color:
    var(--ds-heading);

  line-height: 1.2;
}


h1 {
  font-size: 36px;
}


h2 {
  font-size: 28px;
}


h3 {
  font-size: 20px;
}


p {
  margin:
    0 0 1rem;
}


a {
  color:
    var(--ds-primary);

  text-decoration:
    none;
}


a:hover {
  text-decoration:
    underline;
}


small,
.ds-muted {
  color:
    var(--ds-muted);
}

/* =========================================================
   VISIBILITY UTILITIES
   ========================================================= */

[hidden],
.hidden {
  display: none !important;
}