:root {
  /* COLORS */
  --scwew-primary: #2285ba;
  --scwew-background: #efefef;
  --scwew-surface: #ffffff;
  --scwew-foreground: #242424;
  --scwew-title: #000000;
  /* PALETTE */
  --scwew-error: #ef4444;
  --scwew-warning: #f59e0b;
  --scwew-success: #16a34a;
  /* SIZES */
  --scwew-container-large: 1600px;
  --scwew-container-width: 1200px;
  --scwew-container-small: 84ch;
  --scwew-header-height: 96px;
  --scwew-header-height-small: 56px;
  --scwew-box-radius: 4px;
  --scwew-btn-radius: 4px;
  /* FONTS */
  --scwew-font-family: 'Quicksand', sans-serif;
  --scwew-font-title:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* UTILS */
  --content-top: calc(
    var(--wp-admin--admin-bar--height, 0px) + var(--scwew-header-height)
  );
  --header-width: calc(50% - (65ch / 2) - 4rem);
}
@media screen and (max-width: 1200px) {
  :root {
    --header-width: 18rem;
  }
}

@font-face {
  font-family: "Quicksand";
  src: url("/wp-content/themes/scwew/public/quicksand.ttf") format("truetype");
  font-weight: normal;
}
html,
body {
  background-color: var(--scwew-background);
  color: var(--scwew-foreground);
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  overflow-x: hidden;
  min-height: 100dvh;
}

button {
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

a,
button {
  color: inherit;
  font-size: inherit;
}

a {
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  color: var(--scwew-primary);
}

.grain {
  position: fixed;
  inset: 0;
  background-size: 109px;
  background-repeat: repeat;
  background-image: url("/wp-content/themes/scwew/public/grain.png");
  opacity: 0.07;
  z-index: 99999;
  pointer-events: none;
}

.scwew-container {
  min-height: 50dvh;
  height: 100%;
  padding: 2rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.scwew-container .page-title {
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .scwew-container {
    margin-left: var(--header-width);
  }
}

.scwew-footer {
  margin-left: var(--header-width);
  padding: 3rem;
}

.scwew-container.full {
  margin-left: var(--header-width);
  padding: 0;
  gap: 0;
}
@media screen and (max-width: 768px) {
  .scwew-container.full {
    margin-left: 0;
  }
}