@import "tailwindcss";

@theme {
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --color-ink: #1a1b2e;
  --color-bluebonnet: #2e3192;
  --color-bonnet-2: #4a52c4;
  --color-bonnet-3: #7e86e0;
  --color-paintbrush: #e8623a;
  --color-prairie: #5e7f5a;
  --color-paper: #faf8f2;
  --color-paper-2: #f2eee2;
  --color-line: #e3ddcd;
  --color-muted: #6b6a7b;
}

.rough-top {
  position: relative;
  margin-top: -1px;
}

.rough-bottom {
  position: relative;
  margin-bottom: -1px;
}

.rough-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 30' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,30 L40,25 L80,28 L120,17 L160,29 L200,20 L240,15 L280,22 L320,18 L360,26 L400,19 L440,24 L480,16 L520,27 L560,15 L600,21 L640,18 L680,25 L720,16 L760,23 L800,19 L840,28 L880,17 L920,26 L960,20 L1000,24 L1040,14 L1080,26 L1120,17 L1160,25 L1200,18 L1200,30 L0,30 Z' fill='%23eeebdc'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(-99%);
  z-index: 10;
}

.rough-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 30' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L40,7 L80,2 L120,9 L160,4 L200,8 L240,3 L280,12 L320,5 L360,9 L400,2 L440,11 L480,6 L520,13 L560,5 L600,10 L640,3 L680,12 L720,4 L760,8 L800,1 L840,9 L880,3 L920,11 L960,6 L1000,9 L1040,2 L1080,10 L1120,5 L1160,8 L1200,3 L1200,0 L0,0 Z' fill='%23eeebdc'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(99%);
  z-index: 10;
}

.bluebonnet-footer {
  background-image: url("/assets/bluebonnet-d8b0fba7.png");
  background-repeat: repeat-x;
}

.chunkfive {
  font-family: "ChunkFive Print", sans-serif;
}

@layer components {
  .bb-field {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--color-line);
    border-radius: 10px;
    font: inherit;
    background: #fff;
    color: var(--color-ink);
  }

  .bb-field:focus {
    outline: none;
    border-color: var(--color-bonnet-2);
  }

  .notice,
  .alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    border: 1.5px solid transparent;
  }

  .notice {
    background: color-mix(in srgb, var(--color-prairie) 12%, white);
    border-color: color-mix(in srgb, var(--color-prairie) 30%, white);
    color: var(--color-prairie);
  }

  .alert {
    background: color-mix(in srgb, var(--color-paintbrush) 12%, white);
    border-color: color-mix(in srgb, var(--color-paintbrush) 30%, white);
    color: var(--color-paintbrush);
  }
}