@import url("./base.css");

:root {
  --color-paper: #ffffff;
  --color-paper-2: #f2f4ff;
  --color-ink: #171323;
  --color-ink-soft: #514966;
  --color-rule: #f2385a;
  --color-sage: #1648d8;
  --color-clay: #ffb000;
  --color-line: #cbd1ee;
  --color-deep: #21145f;
}

body {
  background: #ffffff;
}

body::before {
  opacity: 0.025;
}

.bg-paper\/90 {
  background-color: rgb(255 255 255 / 92%);
}

.bg-paper\/25 {
  background-color: rgb(255 255 255 / 30%);
}

.bg-paper-2\/20 {
  background-color: rgb(242 244 255 / 32%);
}

.bg-paper-2\/40 {
  background-color: rgb(242 244 255 / 48%);
}

.bg-paper-2\/50 {
  background-color: rgb(242 244 255 / 58%);
}

.bg-rule\/70 {
  background-color: rgb(242 56 90 / 78%);
}

.bg-rule\/80 {
  background-color: rgb(242 56 90 / 88%);
}

.text-paper\/90 {
  color: rgb(255 255 255 / 94%);
}

.specimen-frame {
  background: #f5f7ff;
  border-color: #b9c1e5;
}

.specimen-frame [class*="bg-[radial-gradient"] {
  filter: saturate(1.45) contrast(1.06);
}

a,
button,
input,
textarea,
select {
  transition-property: color, background-color, border-color, transform;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ffb000;
  outline-offset: 3px;
}

.hover\:bg-rule:hover {
  color: #ffffff;
}

header {
  box-shadow: 0 1px 0 rgb(22 72 216 / 10%);
}