/* ============================================================================
   THE LEDGER — shared styles
   Palette and type locked in design review. Do not introduce new colors
   without updating both [data-theme="light"] and [data-theme="dark"] blocks.
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ground:#EDE8DC;
  --ink:#3A3F3C;
  --ink-soft:#6B6F66;
  --green:#1C2B22;
  --brass:#A88A4A;
  --burgundy:#5C1F2E;
  --hairline:#C9C0AC;
  --surface:#EDE8DC;
  --tab-bg:#1C2B22;
  --positive: var(--green);
}
[data-theme="dark"]{
  --ground:#15201A;
  --ink:#E8E3D6;
  --ink-soft:#9CA396;
  --green:#1C2B22;
  --brass:#C7A562;
  --burgundy:#8C3349;
  --hairline:#3D4A40;
  --surface:#1C2B22;
  --tab-bg:#0F1712;
  --positive: var(--brass);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  transition:background .2s ease, color .2s ease;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:88px;
}

/* ---------------- Header ---------------- */
header.top{
  padding:26px 22px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.brand{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  font-size:20px;
}
.brand .mark{ color:var(--brass); }
.theme-toggle, .icon-btn{
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--ink-soft);
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:7px 11px;
  border-radius:2px;
  transition:all .15s ease;
}
.theme-toggle:hover, .icon-btn:hover{ border-color:var(--brass); color:var(--brass); }

/* ---------------- Week divider — signature element ---------------- */
.week-divider{
  padding-bottom:14px;
  border-bottom:1px solid var(--brass);
  margin:0 22px 20px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.week-divider .label{
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.week-divider .range{
  font-family:'Source Serif 4', serif;
  font-style:italic;
  font-size:14px;
}

/* ---------------- Generic page padding ---------------- */
.page{ padding:0 22px; }

/* ---------------- Widgets / sections ---------------- */
.widget, .field-group{
  border-bottom:1px solid var(--hairline);
  padding:20px 2px 22px;
}
.widget:last-child{ border-bottom:none; }
.widget-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
}
.widget-title{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
.widget-sub{
  font-family:'Source Serif 4', serif;
  font-style:italic;
  font-size:12.5px;
  color:var(--ink-soft);
}

/* ---------------- Ledger-style numbers ---------------- */
.num{
  font-family:'Source Serif 4', serif;
  font-weight:500;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.num.pos{ color:var(--positive); }
.num.neg{ color:var(--burgundy); }
.lbl{
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------------- Forms ---------------- */
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
  font-size:17px;
  padding:8px 2px;
  border-radius:0;
  outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color:var(--brass);
}
.field.amount input{
  font-family:'Source Serif 4', serif;
  font-size:28px;
  text-align:right;
}
.field-suggestion{
  margin-top:6px;
  font-size:12px;
  font-family:'Source Serif 4', serif;
  font-style:italic;
  color:var(--brass);
}

.btn-primary{
  width:100%;
  background:var(--green);
  color:var(--ground);
  border:none;
  padding:15px;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:2px;
  margin-top:8px;
}
[data-theme="dark"] .btn-primary{ background:var(--brass); color:var(--green); }
.btn-secondary{
  width:100%;
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--hairline);
  padding:13px;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:2px;
  margin-top:10px;
}

/* ---------------- Transaction / list rows ---------------- */
.row-list{ display:flex; flex-direction:column; }
.list-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--hairline);
  gap:12px;
}
.list-row:last-child{ border-bottom:none; }
.list-row .meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.list-row .vendor{ font-size:15px; font-weight:500; }
.list-row .sub{ font-size:11.5px; color:var(--ink-soft); }
.list-row .amt{ font-family:'Source Serif 4', serif; font-size:16px; white-space:nowrap; }
.flag{
  display:inline-block;
  font-size:9px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--burgundy);
  border:1px solid var(--burgundy);
  padding:1px 5px;
  border-radius:2px;
  margin-left:6px;
}

/* ---------------- Bottom nav ---------------- */
nav.tabs{
  position:fixed;
  bottom:0; left:0; right:0;
  max-width:480px;
  margin:0 auto;
  background:var(--tab-bg);
  display:flex;
  justify-content:space-around;
  padding:10px 0 calc(14px + env(safe-area-inset-bottom));
  z-index:10;
}
.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:#9CA396;
  font-size:10px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  position:relative;
  padding-top:4px;
  background:none;
  border:none;
}
.tab.active{ color:var(--brass); }
.tab.active::before{
  content:'';
  position:absolute;
  top:-8px; left:50%;
  transform:translateX(-50%);
  width:18px; height:2px;
  background:var(--brass);
}
.tab .icon{ font-size:17px; line-height:1; }

/* ---------------- More menu ---------------- */
.menu-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 2px;
  border-bottom:1px solid var(--hairline);
  font-family:'Source Serif 4', serif;
  font-size:16px;
}
.menu-link .chev{ color:var(--ink-soft); }

/* ---------------- Login screen ---------------- */
.login-wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100vh;
  padding:0 32px;
}
.login-wrap .brand{ font-size:28px; text-align:center; margin-bottom:6px; }
.login-wrap .tagline{
  text-align:center;
  font-family:'Source Serif 4', serif;
  font-style:italic;
  color:var(--ink-soft);
  font-size:13px;
  margin-bottom:40px;
}
.pin-input{
  text-align:center;
  font-family:'Source Serif 4', serif;
  font-size:32px;
  letter-spacing:0.3em;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
  width:100%;
  padding:10px 0;
  outline:none;
}
.pin-input:focus{ border-bottom-color:var(--brass); }
.login-error{
  color:var(--burgundy);
  font-size:12.5px;
  text-align:center;
  margin-top:14px;
  min-height:16px;
}

/* ---------------- Utility ---------------- */
.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--ink-soft);
}
.empty-state .em-icon{ font-size:28px; margin-bottom:12px; display:block; }
.empty-state p{ font-family:'Source Serif 4', serif; font-style:italic; font-size:14px; }

.toast{
  position:fixed;
  bottom:96px; left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--ground);
  padding:11px 20px;
  border-radius:2px;
  font-size:13px;
  z-index:20;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  white-space:nowrap;
}
[data-theme="dark"] .toast{ background:var(--brass); color:var(--green); }
.toast.show{ opacity:1; }

::selection{ background:var(--brass); color:var(--ground); }

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