@font-face {
  font-family: "ArchesHeading";
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url(/property/the-arches/assets/fonts/heading.woff2);
}

@font-face {
  font-family: "ArchesBody";
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url(/property/the-arches/assets/fonts/body.woff2);
}

@layer theme {
  :root {
    --color-body-bg: #DEDDDB;
    --color-brand: #af6b27;
    --color-error: #af2727;
    --color-success: var(--color-brand);
    --color-button-bg: var(--color-brand);
    --color-button-fg: white;
    --color-light-teal: #9DBFBF;
  }
}

@layer app {
  body {
    font-family: "ArchesBody", "Helvetica Neue", "Helvetica", sans-serif;
    padding-bottom: 100px;
    font-size: 16px;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: "ArchesHeading", "Helvetica Neue", "Helvetica", sans-serif;
  }

  input,
  textarea {
    background: color-mix(in oklab, var(--color-brand), white 92%);
  }
}