/* Saldo brand tokens, layered on top of Bootstrap's defaults via CSS variable
   overrides (Bootstrap 5.3+ reads its own colors from --bs-* variables, so
   overriding them here re-themes existing Bootstrap classes without needing
   a Sass build step). Warm, ledger-inspired palette — see the design plan
   from earlier in this project for the rationale. */
:root {
  --bs-body-bg: #EFE9DC;       /* oat */
  --bs-body-color: #23281F;    /* ink */
  --bs-primary: #2F6B4F;       /* alpine green */
  --bs-primary-rgb: 47, 107, 79;
  --bs-secondary: #B5652E;     /* copper */
  --bs-secondary-rgb: 181, 101, 46;
  --bs-danger: #A5462E;        /* clay */
  --bs-danger-rgb: 165, 70, 46;
  --bs-border-color: #D9CFBE;  /* hairline */
  --bs-font-sans-serif: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Bootstrap's own source sets `.card { --bs-card-bg: var(--bs-body-bg); }`
   AND `.table { --bs-table-bg: var(--bs-body-bg); } directly on those
   selectors — a declaration made directly on the matching element always
   wins over one only inherited from :root, regardless of stylesheet load
   order. So these overrides have to also target .card/.table directly, or
   they're silently ignored (learned this the hard way on .card already). */
.card {
  --bs-card-bg: #fff;
  --bs-card-border-color: #D9CFBE;
}
.table {
  --bs-table-bg: transparent; /* let it show through to its container's real background (card white, or oat on a page with no card) instead of forcing oat unconditionally */
}

/* Same story a third time, now on form fields: .form-control/.form-select
   both set background-color: var(--bs-body-bg) directly on themselves.
   Overriding the literal property this time instead of chasing the
   variable again — more reliable than the --bs-*-bg variable trick above. */
.form-control,
.form-select {
  background-color: #fff;
}
/* .form-control:focus re-declares background-color: var(--bs-body-bg) in
   Bootstrap's own source, and :focus is more specific than our plain rule
   above — same override, just needs to match that specificity too. */
.form-control:focus,
.form-select:focus {
  background-color: #fff;
}

body {
  font-family: var(--bs-font-sans-serif);
}

/* Ledger-sheet table: thin hairline rules, tabular figures for money columns. */
.ledger-table {
  --bs-table-border-color: var(--bs-border-color);
}
.ledger-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.stat-figure {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
}