/* ==================================================================
   FOLIO kit — stamps + print artifacts.
   Ported from the mockup's `src/styles/components.css` (Stamps section).
   Classes prefixed `fl-`. Consumes `tokens/tokens.css`.
   ================================================================== */

.fl-stamp {
  display: inline-block;
  font-family: var(--fo-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 14px;
  border: 3px solid currentColor;
  color: var(--fo-red);
  background: color-mix(in srgb, var(--fo-paper) 82%, transparent);
  transform: rotate(-9deg);
  white-space: nowrap;
}

.fl-stamp--sm {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-width: 2px;
}

.fl-stamp--published {
  background: var(--fo-green);
  color: var(--fo-ink);
  border-color: var(--fo-ink);
  box-shadow: 4px 4px 0 var(--fo-ink);
  transform: rotate(-6deg);
}

.fl-stamp--draft {
  background: var(--fo-paper);
  color: var(--fo-orange);
  transform: rotate(4deg);
}

.fl-crop-marks {
  position: absolute;
  inset: -16px;
  pointer-events: none;
}

.fl-crop-marks span {
  position: absolute;
  width: 26px;
  height: 26px;
}

.fl-crop-marks span::before,
.fl-crop-marks span::after {
  content: '';
  position: absolute;
  background: var(--fo-ink);
}

/* horizontal + vertical line arms */
.fl-crop-marks span::before {
  width: 26px;
  height: 3px;
}
.fl-crop-marks span::after {
  width: 3px;
  height: 26px;
}

.fl-crop-marks .tl {
  top: 0;
  left: 0;
}
.fl-crop-marks .tl::before {
  top: 0;
  left: 0;
}
.fl-crop-marks .tl::after {
  top: 0;
  left: 0;
}

.fl-crop-marks .tr {
  top: 0;
  right: 0;
}
.fl-crop-marks .tr::before {
  top: 0;
  right: 0;
}
.fl-crop-marks .tr::after {
  top: 0;
  right: 0;
}

.fl-crop-marks .bl {
  bottom: 0;
  left: 0;
}
.fl-crop-marks .bl::before {
  bottom: 0;
  left: 0;
}
.fl-crop-marks .bl::after {
  bottom: 0;
  left: 0;
}

.fl-crop-marks .br {
  bottom: 0;
  right: 0;
}
.fl-crop-marks .br::before {
  bottom: 0;
  right: 0;
}
.fl-crop-marks .br::after {
  bottom: 0;
  right: 0;
}

.fl-reg-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2px 62%, 62% 2px;
}

.fl-barcode {
  height: 46px;
  width: 168px;
  border: var(--fo-border-2);
  background-color: var(--fo-paper);
  background-image: repeating-linear-gradient(
    90deg,
    var(--fo-ink) 0 2px,
    transparent 2px 5px,
    var(--fo-ink) 5px 6px,
    transparent 6px 10px,
    var(--fo-ink) 10px 14px,
    transparent 14px 17px,
    var(--fo-ink) 17px 18px,
    transparent 18px 23px
  );
}