/* =====================================================================
   ScribeWealth — shared front-of-house stylesheet
   ---------------------------------------------------------------------
   Navy / brass "blueprint" system (matches the homepage): cool-grey ground,
   ink-navy dark, a muted brass accent, Barlow + Barlow Condensed, square
   hairline surfaces. Used by login, signup, password, account, privacy and
   terms — class names are unchanged, so the templates need no edits.
   Swap the ~10 palette vars in :root to re-skin the whole front of house.
   ===================================================================== */
@import url('fonts/barlow.css');   /* self-hosted — no third-party font requests */

:root {
  --color-bg:      #F4F6F8;   /* cool paper ground        */
  --color-surface: #FFFFFF;   /* raised surface           */
  --ink:           #1A2230;   /* primary text             */
  --graphite:      #59606C;   /* secondary text           */
  --muted:         #767D8A;   /* labels / captions        */
  --line:          color-mix(in srgb, #1A2230 14%, transparent);
  --line-strong:   color-mix(in srgb, #1A2230 28%, transparent);
  --navy:          #16263B;   /* dark sections / ink navy  */

  --accent:        #A9762A;   /* brass                    */
  --accent-100:    #F5EEDF; --accent-200: #E7D5AE; --accent-700: #78531F; --accent-800: #5C4018;

  --gain:          #1E7A4B;   /* positive figures         */
  --loss:          #C0392B;   /* negative figures / danger*/
  --loss-700:      #952A20;

  --error-bg:      #FBEFED; --ok-bg: #EAF4EE;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, sans-serif;
  --radius: 0;   /* blueprint: square */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.14; letter-spacing: -0.015em; }
a { color: var(--accent); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.eyebrow { font-family: var(--font-heading); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-700); font-weight: 600; }
.pos { color: var(--gain); } .neg { color: var(--loss); }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 14px 30px; background: var(--color-bg); border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.wordmark b, .wordmark span { color: var(--ink); font-weight: 600; }
.wordmark::after { content: "."; color: var(--accent); }
.topnav { display: flex; gap: 22px; font-size: 14px; color: var(--graphite); }
.topnav a { text-decoration: none; }
.topnav a:hover { color: var(--accent); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer { margin-top: auto; text-align: center; padding: 24px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.site-footer a { color: var(--graphite); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ── Buttons (blueprint: square, hairline) ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2;
  padding: 11px 20px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn-danger { background: var(--loss); border-color: var(--loss); color: #fff; }
.btn-danger:hover { background: var(--loss-700); border-color: var(--loss-700); }

/* ── Forms ───────────────────────────────────────────────────────── */
.field { margin-bottom: 17px; }
.field label, .field-label {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--graphite);
  margin-bottom: 6px;
}
.field input, .input {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: var(--color-surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 10px 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .input::placeholder { color: var(--muted); }
.field input:focus, .input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--graphite); line-height: 1.5; margin: 4px 0 6px; }
.consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.consent a { color: var(--accent); font-weight: 500; }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; }
.alert-error { background: var(--error-bg); border-color: #E4C0BB; border-left: 3px solid var(--loss); color: #8E2A20; }
.alert-ok { background: var(--ok-bg); border-color: #BFD9C8; border-left: 3px solid var(--gain); color: #1B5C3A; }
.alert .ico { font-weight: 700; line-height: 1.3; }

/* ── Auth / narrow card ──────────────────────────────────────────── */
.narrow { flex: 1; display: flex; align-items: center; justify-content: center; padding: 52px 24px; }
.card {
  width: 100%; max-width: 400px; background: var(--color-surface);
  border: 1px solid var(--line-strong); border-top: 3px solid var(--navy);
  padding: 34px 32px;
}
.card-wide { max-width: 440px; }
.card h1 { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.1; margin: 4px 0 6px; }
.card .lead { font-size: 13.5px; color: var(--graphite); line-height: 1.5; margin-bottom: 24px; }

.formlinks { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.formlinks a { color: var(--accent); text-decoration: none; font-weight: 500; }
.formlinks a:hover { text-decoration: underline; }
.backlink { display: block; text-align: center; margin-top: 22px; font-size: 13px; color: var(--muted); text-decoration: none; }
.backlink:hover { color: var(--accent); }

/* ── Document / content pages (account, privacy, terms) ──────────── */
.content { max-width: 760px; margin: 0 auto; padding: 42px 30px 64px; width: 100%; }
.content .page-title { font-family: var(--font-heading); font-size: 34px; font-weight: 600; color: var(--ink); line-height: 1.12; margin-bottom: 6px; }
.content .page-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 26px; line-height: 1.6; }

.prose h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--ink); margin: 28px 0 8px; }
.prose p, .prose li { font-size: 14.5px; line-height: 1.7; color: var(--graphite); margin-bottom: 10px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--accent); font-weight: 500; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 13px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; color: var(--graphite); }
.prose th { background: var(--color-surface); font-weight: 600; color: var(--ink); font-family: var(--font-heading); letter-spacing: .02em; }

.notice { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; line-height: 1.55; margin-bottom: 22px; }
.notice-info { background: var(--accent-100); border-color: #E4D3A6; border-left: 3px solid var(--accent); color: #6B5015; }
.notice-warn { background: var(--error-bg); border-color: #E4C0BB; border-left: 3px solid var(--loss); color: #7E2A22; }

/* ── Section panels (account) ────────────────────────────────────── */
.panel-card { background: var(--color-surface); border: 1px solid var(--line-strong); border-top: 3px solid var(--navy); padding: 26px 26px 28px; }
.panel-card + .panel-card { margin-top: 18px; }
.panel-card h2 { font-family: var(--font-heading); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.panel-card p { font-size: 13.5px; color: var(--graphite); line-height: 1.55; margin-bottom: 14px; }
.panel-card .sub { font-size: 13px; color: var(--graphite); line-height: 1.55; margin-bottom: 18px; }
.panel-card .field input { max-width: 360px; }
.panel-card.danger { border-top-color: var(--loss); }
.panel-card.danger h2 { color: var(--loss); }

.formmsg { font-size: 13px; margin-top: 12px; }
.formmsg.ok { color: var(--gain); }
.formmsg.err { color: var(--loss); }

/* ── Motion / mobile ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) {
  .topbar { padding: 12px 18px; }
  .field input, .input { font-size: 16px; min-height: 48px; padding: 13px 14px; }
  .btn { min-height: 48px; }
  .card { padding: 30px 22px; }
  .content { padding: 28px 18px 48px; }
  .content .page-title { font-size: 27px; }
  .panel-card .field input { max-width: 100%; }
  .card .lead, .field .hint, .consent, .alert, .formlinks, .backlink, .site-footer { font-size: 14px; }
}