/* Ledger theme: tokens and components. The app and the style guide both read this file. */
:root{
  --paper:#F7F3EA; --paper-2:#EFE8D8; --card:#FFFDF8; --white:#FFFFFF;
  --ink:#1B2A41; --ink-2:#44506A; --ink-3:#5F6779;
  --ox:#7A1F2B; --ox-press:#5C1420; --ox-tint:#F2E7E4;
  --brass:#B08D57; --brass-ink:#7A5A1E;
  --rule:#E0D6C0; --rule-2:#C9BC9F;
  --green:#2C6A4B; --green-tint:#E8EDE5; --red:#A12D2D;
  --off:#E9E2D2; --off-ink:#8C8779;
  --sean:#2B5BA6; --work:#A13C74; --family:#B3303F; --theresa:#A84A16;
  --kids:#2C6A4B; --seanie:#55607A; --dame:#7646A3; --marie:#7D6210;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:8px; --r-m:12px; --r-l:16px;
}

/* type scale */
.t-display{font:600 34px/40px var(--serif);letter-spacing:-.4px;color:var(--ink)}
.t-title{font:600 26px/32px var(--serif);letter-spacing:-.2px;color:var(--ink)}
.t-head{font:600 19px/24px var(--serif);color:var(--ink)}
.t-body{font:400 16px/24px var(--sans);color:var(--ink)}
.t-body-s{font:400 14px/20px var(--sans);color:var(--ink-2)}
.t-label{font:600 15px/20px var(--sans);color:var(--ink)}
.t-over{font:600 11px/16px var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--brass-ink)}
.t-num{font:600 17px/24px var(--serif);color:var(--ink)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-m);border:1px solid var(--ox);background:var(--ox);color:var(--white);font:600 16px/20px var(--sans);cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn svg{width:20px;height:20px;flex:none}
.btn:active,.btn.is-pressed{background:var(--ox-press);border-color:var(--ox-press)}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--rule-2)}
.btn.sec:active,.btn.sec.is-pressed{background:var(--paper-2);border-color:var(--ink-3)}
.btn.quiet{background:var(--paper);border-color:var(--paper);color:var(--ox);padding:0 8px}
.btn.quiet:active,.btn.quiet.is-pressed{background:var(--ox-tint);border-color:var(--ox-tint)}
.btn.sm{height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-s)}
.btn.is-disabled,.btn:disabled{background:var(--off);border-color:var(--off);color:var(--off-ink);cursor:default}
.btn.is-focus,.btn:focus-visible{outline:0;box-shadow:0 0 0 3px #D9B77A}

/* fields */
.field{display:flex;flex-direction:column;gap:6px}
.field .lab{font:600 13px/18px var(--sans);color:var(--ink-2)}
.field .box{display:flex;align-items:center;height:48px;padding:0 14px;border-radius:var(--r-m);border:1px solid var(--rule-2);background:var(--card);font:400 16px/24px var(--sans);color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.field input,.field textarea{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:inherit;padding:0;resize:none}
.field .ph{color:var(--ink-3)}
.field.tall .box{height:96px;align-items:flex-start;padding-top:12px}
.field.is-focus .box,.field .box:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px #E6DCC6}
.field.is-error .box{border-color:var(--red)}
.field .msg{font:500 13px/18px var(--sans);color:var(--red)}
.field.is-disabled .box{background:var(--off);border-color:var(--off);color:var(--off-ink)}

/* checkbox, radio dot, switch */
.check{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1.5px solid var(--ink-3);background:var(--card);color:var(--white);flex:none;transition:background .18s ease,border-color .18s ease}
.check svg{width:16px;height:16px;opacity:0;transition:opacity .18s ease}
.check.on{background:var(--ox);border-color:var(--ox)}
.check.on svg{opacity:1}
.check.round{border-radius:12px}
.check.round.on{background:var(--green);border-color:var(--green)}
.check.is-disabled{background:var(--off);border-color:var(--off)}

/* chips and person tags */
.chip{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--rule-2);background:var(--card);font:500 14px/20px var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .18s ease,border-color .18s ease,color .18s ease}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .dot{width:12px;height:12px;border-radius:6px;flex:none}
.chip.person.on{background:var(--paper-2);border-color:var(--ink);color:var(--ink)}
.tag{display:flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;font:600 11px/16px var(--sans);letter-spacing:.6px;text-transform:uppercase;color:var(--white);white-space:nowrap}

/* segmented control */
.seg{display:flex;padding:3px;border-radius:10px;background:var(--paper-2);border:1px solid var(--rule)}
.seg .opt{display:flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border-radius:7px;font:600 13px/18px var(--sans);color:var(--ink-2);cursor:pointer;transition:background .18s ease,color .18s ease}
.seg .opt.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(27,42,65,.16)}

/* cards */
.card{display:flex;align-items:stretch;border-radius:var(--r-m);border:1px solid var(--rule);background:var(--card);overflow:hidden;transition:border-color .18s ease,background .18s ease}
.card .stripe{width:5px;flex:none}
.card .in{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:12px 12px 12px 14px}
.card .tx{display:flex;flex-direction:column;flex:1;min-width:0}
.card .tx b{font:600 17px/22px var(--serif);color:var(--ink)}
.card .tx span{font:400 13px/18px var(--sans);color:var(--ink-2)}
.card .go{width:20px;height:20px;color:var(--ink-3);flex:none}
.card.is-pressed,.card:active{background:var(--paper-2);border-color:var(--rule-2)}

/* double ledger rule */
.rule2{display:flex;flex-direction:column;gap:2px}
.rule2 i{display:block;height:1px;background:var(--brass)}
.rule2 i.thin{background:var(--rule-2)}

.ic{width:24px;height:24px;flex:none}