/* Theme: program (intentionally dirty retro broken look) */
@import url('../../../b2b/solution-provider/assets/style.css');

:root {
  --color-navy: #19160f;
  --color-blue-dark: #4a2b12;
  --color-blue-mid: #8f3f19;
  --color-blue-light: #c46d2a;
  --color-info: #ac7f2d;

  --iio-bg: #7d7360;
  --iio-surface: #7d7360;
  --iio-ink: #ffffff;
  --iio-muted: #342a1f;
  --iio-line: #4b3d2f;
  --iio-accent: #6b2000;
  --iio-accent-mid: #8a2f00;
  --iio-accent-light: #c28d68;
  --iio-ok: #2f4d1d;
  --iio-warn: #8f5d00;
  --iio-risk: #8f1f1f;
  --iio-thead-bg: #b9ac93;
  --iio-tab-bg: #a79a82;

  --iio-shadow-md: 0 0 0 2px #3d2d1f, 4px 4px 0 #24180f;
  --iio-r-md: 0;
  --iio-r-lg: 0;
}

body {
  background-image:
    repeating-linear-gradient(90deg, rgba(22, 15, 11, 0.08) 0, rgba(22, 15, 11, 0.08) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(14, 10, 7, 0.06) 0, rgba(14, 10, 7, 0.06) 1px, transparent 1px, transparent 6px);
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.01em;
}

h1,
h2,
h3,
.card h3 {
  font-family: "Times New Roman", Times, serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #d6bca0;
}

.shell,
.card,
.nav,
.tile,
.panel,
.table-wrap,
main {
  border-radius: 0 !important;
  border: 2px solid #3f3124 !important;
  box-shadow: 3px 3px 0 #2b1f15 !important;
}

.card,
.panel,
.tile {
  transform: rotate(-0.35deg);
}

.card:nth-child(2n),
.tile:nth-child(2n) {
  transform: rotate(0.42deg);
}

a,
.link,
button {
  text-decoration: underline wavy #6b2000 1px;
  text-underline-offset: 2px;
}

button,
.btn,
input,
select,
textarea {
  border-radius: 0 !important;
  border: 2px inset #6c5e49 !important;
  background: #beb29e !important;
  color: #16130e !important;
}

::selection {
  background: #6b2000;
  color: #efe3d3;
}

@media (max-width: 900px) {
  body {
    font-size: 15px;
  }

  .shell,
  main,
  .card,
  .panel,
  .tile {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .shell {
    animation: none !important;
  }
}