@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap");

:root,
.theme_light,
.theme_dark {
  --pf-face-bg: #eee8dc;
  --pf-face-surface: #f7f1e7;
  --pf-face-raised: #fffaf0;
  --pf-face-ink: #1d1914;
  --pf-face-muted: #6b6258;
  --pf-face-line: #1d1914;
  --pf-face-accent: #f95105;
  --pf-face-accent-strong: #c93400;
  --tw-color-background: var(--pf-face-bg) !important;
  --tw-color-background-alt: var(--pf-face-surface) !important;
  --tw-color-primary-600: var(--pf-face-accent) !important;
  --tw-color-primary-700: var(--pf-face-accent-strong) !important;
  --tw-color-text-main: var(--pf-face-ink) !important;
  --tw-color-text-muted: var(--pf-face-muted) !important;
}

html,
body,
app-root,
.layout_frontend {
  color: var(--pf-face-ink) !important;
  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif !important;
  background-color: var(--pf-face-bg) !important;
  background-image:
    linear-gradient(180deg, #f9f2e6 0%, var(--pf-face-bg) 38%, #d7cebf 100%),
    repeating-linear-gradient(
      90deg,
      rgba(29, 25, 20, 0.08) 0,
      rgba(29, 25, 20, 0.08) 1px,
      transparent 1px,
      transparent 24px
    ) !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

app-root {
  position: relative;
}

h1,
h2,
h3,
h4 {
  color: var(--pf-face-ink) !important;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif !important;
  letter-spacing: 0 !important;
}

a,
button[bitlink],
.tw-text-primary-600,
.tw-text-primary-700 {
  color: var(--pf-face-accent-strong) !important;
}

button,
input,
textarea,
select {
  border-radius: 2px !important;
}

button,
input,
textarea,
select {
  box-shadow: none !important;
}

button[type="submit"],
bit-button[buttontype="primary"] button {
  color: #fffaf0 !important;
  background: var(--pf-face-accent) !important;
  border: 2px solid var(--pf-face-line) !important;
}

button[type="submit"]:hover,
bit-button[buttontype="primary"] button:hover {
  background: var(--pf-face-accent-strong) !important;
}

input,
textarea,
select {
  color: var(--pf-face-ink) !important;
  background: var(--pf-face-surface) !important;
  border-color: var(--pf-face-line) !important;
}

input,
textarea,
select {
  border: 2px solid rgba(29, 25, 20, 0.88) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--pf-face-accent) !important;
  outline: 2px solid rgba(249, 81, 5, 0.28) !important;
  outline-offset: 1px !important;
}

.new-logo-themed {
  max-width: 180px !important;
  filter: contrast(1.1) saturate(1.05) !important;
}

.tw-fill-illustration-bg-primary,
.tw-fill-illustration-bg-secondary,
.tw-fill-illustration-bg-tertiary {
  fill: rgba(249, 81, 5, 0.32) !important;
}

.tw-fill-illustration-outline {
  fill: var(--pf-face-line) !important;
}

.tw-fill-illustration-logo {
  fill: var(--pf-face-accent) !important;
}