:root {
  --paper: #F4F7FB;
  --paper-dim: #E8EDF5;
  --ink: #0F1F35;
  --ink-soft: #55677E;
  --forest: #0B1830;
  --forest-light: #1B3A63;
  --forest-dark: #060F1F;
  --gold: #2F80ED;
  --gold-light: #4FA3F7;
  --brick: #E0533D;
  --brick-light: #EB7A64;
  --line: #D8DEE8;
  --line-dark: #C2CBD9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background-color: var(--paper);
  background-image: url('../img/watermark.png');
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: 640px auto;
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; letter-spacing: normal; }
.font-mono { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-variant-numeric: tabular-nums; }

/* Ledger hairline divider, used between rows in tables */
.ledger-row { border-bottom: 1px solid var(--line); }
.ledger-row:last-child { border-bottom: none; }

/* Badge - the signature element, echoing the outlined circular icons in the brand kit */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.btn-primary {
  background: var(--forest);
  color: var(--paper);
  transition: background-color 150ms ease;
}
.btn-primary:hover { background: var(--forest-light); }
.btn-primary:disabled { background: var(--line-dark); cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--forest);
  color: var(--forest);
  transition: background-color 150ms ease;
}
.btn-secondary:hover { background: var(--paper-dim); }

.input-field {
  background: white;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  color: var(--ink);
}
.input-field:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  border-color: var(--forest);
}

.sidebar-link {
  color: var(--paper-dim);
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar-link:hover { background: var(--forest-light); color: white; }
.sidebar-link.active { background: var(--forest-dark); color: var(--gold-light); font-weight: 600; }

.text-positive { color: var(--forest); }
.text-negative { color: var(--brick); }

.skeleton {
  background: linear-gradient(90deg, var(--paper-dim) 25%, var(--line) 37%, var(--paper-dim) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { transition: none !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-dim); }
::-webkit-scrollbar-thumb { background: var(--line-dark); border-radius: 5px; }