:root {
  --ink: #0F172A;
  --ink-soft: #475569;
  --paper: #F7F8F6;
  --paper-line: #E4E8E3;
  --ledger: #0E6E56;
  --ledger-dark: #094A3A;
  --stamp: #B45309;
  --danger: #B91C1C;
}

body {
  background-color: var(--paper);
}

/* Subtle ruled-paper texture on auth/landing pages — nods to the ledger
   concept without competing with the actual signature element below. */
.ledger-bg {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    var(--paper-line) 32px
  );
}

/* Signature element: a ticket-stub card, used once (dashboard balance
   card) rather than on every card — see frontend-design principle of
   spending boldness in one place. */
.ticket {
  position: relative;
  background: #ffffff;
  border-radius: 1rem;
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--paper);
  border-radius: 9999px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }
.ticket-divider {
  border-left: 2px dashed #D6DBD4;
}

/* Accessibility baseline */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}