/* Village design tokens — derived from Village Brand Guide v1.0
   "The custodial neighbor": warm in voice, rigorous in structure & money. */
:root {
  /* Primary — Village Indigo */
  --ink-900: #26235C;
  --indigo-700: #2E2882;
  --indigo-600: #3A32A8;   /* BRAND */
  --indigo-500: #4A41C4;
  --indigo-100: #ECEBF7;
  --indigo-50:  #F4F3FB;

  /* Neutrals */
  --ink:   #1C1A2E;
  --paper: #F6F4EF;        /* warm-white ground */
  --card:  #FFFFFF;
  --line:  #E4E1E9;
  --muted: #6B6880;

  /* Accents */
  --clay:  #B96B4B;        /* human note. NEVER in financial UI. */
  --green: #1F7A54;        /* money-positive / compliant */
  --amber: #A8710A;        /* attention / due soon */
  --red:   #B23B3B;        /* delinquent / overdue */

  /* Type */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* Layout */
  --maxw: 1180px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-card: 0 1px 2px rgba(28,26,46,.05), 0 4px 16px rgba(28,26,46,.06);
  --shadow-pop:  0 8px 40px rgba(28,26,46,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;             /* Linda-sized default */
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--indigo-600); }

/* Money & dates always tabular */
.num, .money, td.money, .stamp { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--indigo-500); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Boxed wordmark — never unboxed, never restyled */
.wordmark {
  display: inline-block;
  background: var(--indigo-600);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--indigo-600);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .02em;
  padding: .28em .7em;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1;
}
.wordmark.sm { font-size: .95rem; }

/* Shared atoms */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: .68em 1.15em; font-weight: 600; cursor: pointer;
  text-decoration: none; background: var(--indigo-600); color: #fff;
  transition: background .15s ease;
}
.btn:hover { background: var(--indigo-700); }
.btn.secondary { background: var(--card); color: var(--ink-900); border-color: var(--line); }
.btn.secondary:hover { background: var(--indigo-50); }
.btn.quiet { background: transparent; color: var(--indigo-600); }
.btn.danger { background: var(--red); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.chip {
  display: inline-block; font-family: var(--mono); font-size: .72rem;
  padding: .2em .6em; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); white-space: nowrap;
}
.chip.green { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, white); background: color-mix(in srgb, var(--green) 8%, white); }
.chip.amber { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, white); background: color-mix(in srgb, var(--amber) 8%, white); }
.chip.red   { color: var(--red);   border-color: color-mix(in srgb, var(--red) 35%, white);   background: color-mix(in srgb, var(--red) 8%, white); }
.chip.indigo{ color: var(--indigo-600); border-color: var(--indigo-100); background: var(--indigo-50); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* The permanent record — signature motif.
   Anything immutable gets the ledger rail + mono timestamp. */
.record { position: relative; padding-left: 22px; }
.record::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: var(--indigo-100); border-radius: 2px;
}
.record-item { position: relative; padding: .55em 0 .55em 8px; }
.record-item::before {
  content: ""; position: absolute; left: -19px; top: 1.05em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo-600); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--indigo-100);
}
.record-item .stamp { font-size: .72rem; color: var(--muted); }
.sealed {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .72rem; color: var(--ink-900);
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
  border-radius: 4px; padding: .2em .55em;
}
.sealed::before { content: "▣"; color: var(--indigo-600); }