/* Vara Mgmt Design System 1.0 — drop-in stylesheet
   <link rel="stylesheet" href="vara.css">  */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Brand */
  --vara-forest:#1F2E27; --vara-pine:#33413A; --vara-pine-active:#4A5C51;
  --vara-sage:#6B8A78; --vara-sage-ink:#4A6B57; --vara-mint:#A9D3B4; --vara-mint-tint:#DCEBDF;
  --vara-terracotta:#B8603F; --vara-terracotta-ink:#9A4A2E; --vara-clay:#D9955F;
  /* Neutrals */
  --vara-paper:#F7F6F2; --vara-card:#FCFBF8; --vara-linen:#EFEDE6; --vara-rule:#E2DFD8; --vara-border:#D6D3CB;
  --vara-stone:#8C918D; --vara-slate:#4B524E; --vara-ink:#1E2723;
  /* Type */
  --vara-serif:'Newsreader',Georgia,serif;
  --vara-sans:'DM Sans',system-ui,sans-serif;
  --vara-mono:'JetBrains Mono',ui-monospace,monospace;
  --vara-display:clamp(44px,5.6vw,72px); --vara-h1:clamp(38px,5.2vw,64px); --vara-h2:clamp(30px,3.6vw,44px);
  --vara-h3:clamp(22px,2.4vw,28px); --vara-lead:clamp(18px,1.7vw,20px); --vara-body:17px; --vara-small:14px; --vara-eyebrow:13px;
  /* Shape & space */
  --vara-radius-sm:8px; --vara-radius-lg:14px; --vara-radius-pill:999px;
  --vara-target:48px; --vara-gutter:clamp(20px,4vw,48px); --vara-max:1200px;
}

body.vara,.vara{background:var(--vara-paper);color:var(--vara-ink);font-family:var(--vara-sans);font-size:var(--vara-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.vara a:not(.vara-btn):not(.vara-nav-item):not(.vara-logo){color:var(--vara-pine);text-underline-offset:3px}
.vara a:not(.vara-btn):not(.vara-nav-item):not(.vara-logo):hover{color:var(--vara-terracotta)}

/* Type */
.vara-display,.vara-h1,.vara-h2{font-family:var(--vara-serif);font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance;margin:0}
.vara-display{font-size:var(--vara-display)}
.vara-h1{font-size:var(--vara-h1)}
.vara-h2{font-size:var(--vara-h2);letter-spacing:-.02em;line-height:1.15}
.vara-h3{font-family:var(--vara-sans);font-weight:600;font-size:var(--vara-h3);letter-spacing:-.01em;line-height:1.25;margin:0}
.vara-lead{font-size:var(--vara-lead);line-height:1.65;color:var(--vara-slate);max-width:62ch;text-wrap:pretty}
.vara-muted{color:var(--vara-slate)}
.vara-eyebrow{font-family:var(--vara-mono);font-weight:500;font-size:var(--vara-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--vara-sage-ink)}
.vara-num{font-family:var(--vara-mono);font-weight:500;color:var(--vara-terracotta-ink)}
.vara-id{font-family:var(--vara-mono);font-size:13px;color:var(--vara-stone)}

/* Logo: <a class="vara-logo"><img src="vara-v-mark.png" alt="V">ara Mgmt</a> */
.vara-logo{display:inline-flex;align-items:baseline;font-family:var(--vara-serif);font-weight:600;letter-spacing:-.025em;line-height:1;font-size:26px;color:var(--vara-forest);text-decoration:none}
.vara-logo img{height:1.04em;width:auto;margin-right:-.155em;margin-bottom:-.1em}
.vara-tagline{display:flex;align-items:center;gap:14px;font-family:var(--vara-sans);font-weight:500;font-size:12px;letter-spacing:.34em;color:var(--vara-sage-ink);white-space:nowrap}
.vara-tagline::before,.vara-tagline::after{content:"";flex:1;height:1.5px;background:var(--vara-sage)}

/* Buttons */
.vara-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--vara-target);padding:0 24px;border-radius:var(--vara-radius-sm);border:1px solid transparent;font:600 16px/1 var(--vara-sans);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .15s}
.vara-btn--primary{background:var(--vara-pine);color:var(--vara-paper)}
.vara-btn--primary:hover{background:var(--vara-forest);color:var(--vara-paper)}
.vara-btn--secondary{background:var(--vara-card);color:var(--vara-ink);border-color:var(--vara-border);font-weight:500}
.vara-btn--secondary:hover{background:var(--vara-linen);color:var(--vara-ink)}
.vara-btn--pay{background:var(--vara-terracotta);color:#fff}
.vara-btn--pay:hover{background:var(--vara-terracotta-ink);color:#fff}
.vara-btn--sm{height:40px;padding:0 18px;font-size:15px}
.vara-btn:disabled{opacity:.4;cursor:not-allowed}
.vara-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--vara-mint-tint),0 0 0 4px var(--vara-pine)}

/* Badges */
.vara-badge{display:inline-flex;align-items:center;font:700 12px/1 var(--vara-mono);letter-spacing:.14em;text-transform:uppercase;border-radius:var(--vara-radius-pill);padding:5px 12px;white-space:nowrap}
.vara-badge--deadline{color:var(--vara-terracotta-ink);border:1.5px solid #C9805E;padding:4px 11px}
.vara-badge--done{color:#2F5A41;background:var(--vara-mint-tint)}
.vara-badge--neutral{color:var(--vara-slate);background:var(--vara-linen)}
.vara-badge--alert{color:#fff;background:var(--vara-terracotta)}

/* Forms */
.vara-field{display:flex;flex-direction:column;gap:8px}
.vara-label{font-weight:600;font-size:15px}
.vara-help{font-size:13px;color:var(--vara-slate)}
.vara-input{min-height:var(--vara-target);border:1px solid var(--vara-border);border-radius:var(--vara-radius-sm);background:#fff;padding:12px 14px;font:16px/1.5 var(--vara-sans);color:var(--vara-ink);outline:none;width:100%}
.vara-input:focus{border-color:var(--vara-pine);box-shadow:0 0 0 3px var(--vara-mint-tint)}
.vara-field--error .vara-input{border:1.5px solid var(--vara-terracotta)}
.vara-field--error .vara-help{color:var(--vara-terracotta-ink)}

/* Surfaces */
.vara-card{background:var(--vara-card);border:1px solid var(--vara-rule);border-radius:var(--vara-radius-lg);padding:28px}
.vara-rule{height:1px;background:var(--vara-rule);border:0;margin:36px 0}
.vara-container{max-width:var(--vara-max);margin:0 auto;padding:0 var(--vara-gutter)}

/* Site header with house picture */
.vara-header{background:var(--vara-linen)}
.vara-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px var(--vara-gutter)}
.vara-header__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap}
.vara-header__nav a{color:var(--vara-ink);text-decoration:none;font-weight:500;font-size:15px}
.vara-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:32px;align-items:end;padding:clamp(28px,5vw,64px) var(--vara-gutter) 0}
.vara-hero__copy{padding-bottom:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:18px}
.vara-hero__house{width:min(100%,460px);height:auto;display:block;justify-self:center}

/* Portal sidebar */
.vara-sidebar{background:var(--vara-pine);padding:16px;display:flex;flex-direction:column;gap:4px}
.vara-nav-item{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--vara-radius-sm);color:#E6EAE7;text-decoration:none;font-size:16px}
.vara-nav-item span:last-child{font-family:var(--vara-mono);font-size:14px;color:#AEB5B0}
.vara-nav-item--warn span:last-child{color:var(--vara-clay)}
.vara-nav-item[aria-current]{background:var(--vara-pine-active);color:var(--vara-mint);font-weight:600}
.vara-nav-item[aria-current] span:last-child{color:var(--vara-mint)}

/* Footer */
.vara-footer{background:var(--vara-pine);color:var(--vara-paper);padding:32px var(--vara-gutter);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.vara-footer a{color:#E6EAE7;text-decoration:none}