/* ==========================================================================
   Meridian Bank — Design System
   Palette:  ink #0F1F35  paper #F6F4EF  brass #B08D3F  slate #5B6B7D
             emerald #1F7A5C  rust #B4433A
   Type:     display  'Fraunces'      (headlines, restrained)
             body     'Inter'         (UI, copy)
             mono     'IBM Plex Mono' (amounts, account numbers, refs)
   Signature: the ledger line — a hairline rule with tick marks, echoing
   the register line of a paper bank statement. Used as section dividers,
   hero device, and progress/step indicators throughout.
   ========================================================================== */

:root {
  --ink: #0F1F35;
  --ink-2: #16273F;
  --paper: #F6F4EF;
  --paper-2: #EFEBE1;
  --brass: #B08D3F;
  --brass-light: #D8BE83;
  --slate: #5B6B7D;
  --slate-light: #93A2B0;
  --emerald: #1F7A5C;
  --rust: #B4433A;
  --line: rgba(15, 31, 53, 0.12);
}

@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
}

.font-display {
  font-family: "Fraunces", "Georgia", serif;
  font-optical-sizing: auto;
}

.font-body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.font-mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

/* ---------------------------------------------------------------------
   Ledger line — the signature element.
   A horizontal hairline with evenly spaced tick marks, like the register
   perforation on a paper statement. Used in hero, section dividers,
   and as a decorative rule above key numbers.
   --------------------------------------------------------------------- */
.ledger-line {
  position: relative;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0,
    var(--line) 6px,
    transparent 6px,
    transparent 14px
  );
}

.ledger-line--brass {
  background: repeating-linear-gradient(
    90deg,
    rgba(176, 141, 63, 0.55) 0,
    rgba(176, 141, 63, 0.55) 6px,
    transparent 6px,
    transparent 14px
  );
}

.ledger-ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ledger-ticks span {
  width: 1px;
  height: 8px;
  background: var(--line);
  display: block;
}

/* Subtle page-load reveal for the hero ledger line */
@keyframes ledger-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.ledger-draw {
  animation: ledger-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ledger-draw { animation: none; clip-path: inset(0 0 0 0); }
}

/* Card / panel */
.panel {
  background: #fff;
  border: 1px solid var(--line);
}

[x-cloak] { display: none !important; }

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Scrollbar (subtle, webkit only, purely cosmetic) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--slate-light); border-radius: 0; }
::-webkit-scrollbar-track { background: var(--paper-2); }

/* Statement / receipt print styles */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}