/* /core/theme.css  ·  Design system for the valuation platform: admin screens, client portal, interactive report, and print */

:root {
  --bg: #FAF8F3;
  --card: #FFFFFF;
  --ink: #1F2430;
  --muted: #6B6F7B;
  --line: #E7E1D3;
  --gold: #C9B37E;
  --gold-deep: #A8925C;
  --ok: #00B894;
  --warn: #FF8A00;
  --bad: #E4007C;
  --g1: linear-gradient(135deg, #E4007C, #FF8A00);
  --g2: linear-gradient(135deg, #7B2FF7, #00C6FF);
  --g3: linear-gradient(135deg, #00B894, #A8E063);
  --g4: linear-gradient(135deg, #FF5E62, #FFC371);
  --serif-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --serif-text: 'EB Garamond', Garamond, Georgia, serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(31, 36, 48, .04), 0 6px 20px rgba(31, 36, 48, .05);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--serif-text);
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern', 'liga', 'onum';
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); letter-spacing: .005em; }
h1 { font-size: clamp(30px, 4.2vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 30px); padding-bottom: .3em; border-bottom: 1px solid var(--gold); }
h3 { font-size: 21px; margin-top: 1.2em; }
h4 { font-size: 18px; }
p { margin: 0 0 1em; max-width: 72ch; }
.prose p, p.justify { text-align: justify; hyphens: auto; }
.muted { color: var(--muted); }
small, .small { font-size: 14px; }

/* ---------- layout ---------- */
.page { max-width: 1040px; margin: 0 auto; padding: var(--s5) var(--s4); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s4); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.bar, .row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin: var(--s2) 0 var(--s4); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- monogram header ---------- */
.monogram {
  width: 46px; height: 46px; flex: none;
  border: 1.5px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center;
  font: 600 22px var(--serif-display); color: var(--gold-deep);
}
.monogram svg { width: 70%; height: 70%; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow);
}
.card .card { box-shadow: none; border-radius: var(--r-md); padding: var(--s4); }
.card > h2:first-child { margin-top: 0; }

/* ---------- KPI tiles ---------- */
.kpi { position: relative; border-radius: var(--r-md); padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 6px); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--g1); }
.kpi:nth-child(4n+2)::before { background: var(--g2); }
.kpi:nth-child(4n+3)::before { background: var(--g3); }
.kpi:nth-child(4n+4)::before { background: var(--g4); }
.kpi span { display: block; color: var(--muted); font-size: 14px; }
.kpi b { display: block; font: 600 28px/1.15 var(--serif-display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; margin-top: 2px; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum', 'tnum'; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; font-size: 15.5px; vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 14.5px; border-bottom: 1.5px solid var(--gold); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover td { background: rgba(201, 179, 126, .06); }
tr.total td, tr.tot td { font-weight: 600; border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }
td.left, th.left { text-align: left; }

/* ---------- pills ---------- */
.pill { display: inline-block; padding: 1px 10px; border-radius: var(--r-pill); font-size: 13px; line-height: 1.7; color: #fff; background: var(--muted); white-space: nowrap; vertical-align: middle; }
.pill.ok { background: var(--ok); }
.pill.warn { background: var(--warn); }
.pill.bad { background: var(--bad); }
.pill.na { background: #A3A6AE; }

/* ---------- controls ---------- */
button, .button {
  font: inherit; font-size: 15px; line-height: 1.2;
  border: 1px solid var(--gold); background: transparent; color: var(--ink);
  border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: background-color .15s ease, color .15s ease;
}
button:hover:not(:disabled), .button:hover { background: rgba(201, 179, 126, .14); }
button.on, button.primary, .button.primary { background: var(--gold); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--gold-deep); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.link { border: none; padding: 0 4px; color: var(--bad); background: none; }

input, select, textarea {
  font: inherit; font-size: 15.5px; color: var(--ink);
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 179, 126, .22); }
input[type=number] { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--gold-deep); }
input[type=range] { padding: 0; border: none; accent-color: var(--gold-deep); }
textarea { line-height: 1.55; resize: vertical; }
label { display: block; }
label > span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 3px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--s4); position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.tabs a, .tabs button { white-space: nowrap; }

/* ---------- report specifics ---------- */
.report-section { margin-bottom: var(--s7); }
.figure { margin: var(--s5) 0; }
.figure svg { width: 100%; height: auto; }
.callout { border-left: 3px solid var(--gold); padding: var(--s3) var(--s4); background: rgba(201, 179, 126, .08); border-radius: 0 var(--r-md) var(--r-md) 0; }
.value-hero { font: 600 clamp(40px, 6vw, 64px)/1 var(--serif-display); font-variant-numeric: lining-nums; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .card { padding: var(--s4); border-radius: var(--r-md); }
  th, td { padding: 6px 8px; font-size: 14.5px; }
}

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

/* ---------- print ---------- */
@page { size: letter; margin: 0.75in; }
@media print {
  html, body { background: #fff; font-size: 11pt; }
  .no-print, .tabs, nav, button { display: none !important; }
  .card { box-shadow: none; border: none; padding: 0; margin: 0 0 14pt; break-inside: auto; }
  .page-break { break-before: page; page-break-before: always; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  tr, .kpi, .figure, svg, img { break-inside: avoid; page-break-inside: avoid; }
  table { font-size: 9.5pt; }
  .scroll { overflow: visible; }
  a { text-decoration: none; color: var(--ink); }
  .running-header { position: running(header); }
  .kpi { border: 1px solid var(--line); }
}