/* Sage Peak Advisory Group — institutional stylesheet.
 *
 * Brand identity (from the Brand Identity Guide):
 *   Palette   Midnight Navy #0D1B2A · Slate Blue #2F3E4E · Sage Gold #C7A35C
 *             Stone Gray #E5E7EB · Ivory White #F7F7F5
 *   Type      Playfair Display (headings) · Montserrat (body)
 *   Motif     mountain + rising sun; personality: strategic, trusted, expert,
 *             forward-thinking, higher perspective.
 *
 * Design direction (PROJECT_BRIEF §8): restrained and serious. Ivory-white
 * background, navy text, Sage Gold used sparingly to direct attention.
 * Semantic red/amber/green reserved exclusively for status. Generous whitespace.
 *
 * NOTE: the brief's stack picks Tailwind via the standalone CLI. To avoid a Node
 * toolchain during early phases this hand-authored sheet uses the same design
 * tokens; swapping to a compiled Tailwind build later is a drop-in. All
 * colour/spacing/type decisions live in the :root tokens below.
 */

:root {
  /* Brand palette ------------------------------------------------------- */
  --navy: #0d1b2a;          /* Midnight Navy — primary text & dark surfaces */
  --slate: #2f3e4e;         /* Slate Blue — secondary text, secondary peaks */
  --gold: #c7a35c;          /* Sage Gold — the single accent */
  --stone: #e5e7eb;         /* Stone Gray — hairlines, muted fills */
  --ivory: #f7f7f5;         /* Ivory White — page background */

  /* Semantic roles mapped onto the palette ------------------------------ */
  --ink: var(--navy);       /* body text */
  --ink-soft: var(--slate); /* secondary text */
  --ink-faint: #6b7581;     /* captions, source lines (slate/stone blend) */
  --paper: var(--ivory);    /* page background */
  --surface: #ffffff;       /* cards */
  --line: var(--stone);     /* hairline borders */
  --line-strong: #d3d7dd;

  --accent: var(--gold);
  --accent-ink: #a9863f;    /* darker gold for text/hover on light */
  --accent-soft: #f4eddd;   /* pale gold tint for subtle fills */

  /* Semantic status ONLY (never decoration) ----------------------------- */
  --ok: #2f7d4f;
  --ok-soft: #e8f3ec;
  --warn: #b5771b;
  --warn-soft: #f7efdd;
  --bad: #b23b3b;
  --bad-soft: #f6e6e6;

  /* Type ---------------------------------------------------------------- */
  /* Playfair Display for display/headings; Montserrat for everything else.
   * Both degrade gracefully to system fonts when offline. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace;

  /* Rhythm -------------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(13, 27, 42, 0.05), 0 1px 3px rgba(13, 27, 42, 0.07);
  --maxw: 1180px;
}

/* Reset-ish ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.2; }
h1 { font-size: 1.85rem; margin: 0 0 var(--sp-3); letter-spacing: 0.01em; }
h2 { font-size: 1.3rem; margin: var(--sp-6) 0 var(--sp-3); }
p { margin: 0 0 var(--sp-3); }
code, .mono { font-family: var(--font-mono); font-size: 0.85em; }

/* Layout ---------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
/* Brand lockup: logo mark + "Sage Peak" (Playfair navy) + "Advisory Group" */
.wordmark { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark svg { display: block; flex: 0 0 auto; }
.wm-text { display: flex; flex-direction: column; line-height: 1.05; }
.wm-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--navy); letter-spacing: 0.02em;
}
.wm-sub {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.6rem;
  color: var(--accent-ink); letter-spacing: 0.22em; text-transform: uppercase;
}
.topbar-actions { display: flex; align-items: center; gap: var(--sp-4); }
.topbar-actions .muted { color: var(--ink-faint); font-size: 0.82rem; }

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.container-narrow { max-width: 460px; }

/* Cards ----------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
}
.card + .card { margin-top: var(--sp-4); }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block; cursor: pointer;
  font: inherit; font-weight: 500; font-family: var(--font-sans);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { text-decoration: none; border-color: var(--ink-faint); }
/* Primary CTA carries the brand: navy fill, gold on hover for the "peak" accent. */
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn-gold:hover { background: #b8934c; border-color: #b8934c; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }

/* Forms ----------------------------------------------------------------- */
label { display: block; font-size: 0.82rem; color: var(--ink-soft);
  margin: 0 0 var(--sp-1); font-weight: 500; }
input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%; font: inherit; font-family: var(--font-sans); color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
}
input:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field { margin-bottom: var(--sp-4); }

/* Tables ---------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
tr:hover td { background: #faf9f6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status pills ---------------------------------------------------------- */
.pill { display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em;
  text-transform: uppercase; }
.pill-draft { background: var(--accent-soft); color: var(--accent-ink); }
.pill-active { background: var(--ok-soft); color: var(--ok); }
.pill-delivered { background: var(--ok-soft); color: var(--ok); }
.pill-archived { background: var(--stone); color: var(--ink-faint); }

/* Alerts ---------------------------------------------------------------- */
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  border: 1px solid; font-size: 0.9rem; margin-bottom: var(--sp-4); }
.alert-error { background: var(--bad-soft); border-color: #e3c4c4; color: var(--bad); }

/* Empty state ----------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--ink-faint); }
.empty h2 { color: var(--ink-soft); }

/* Footer / disclaimer (§12) --------------------------------------------- */
.disclaimer {
  max-width: var(--maxw); margin: var(--sp-7) auto 0; padding: var(--sp-4) var(--sp-5);
  color: var(--ink-faint); font-size: 0.78rem; line-height: 1.5;
  border-top: 1px solid var(--line);
}

/* Engagement tabs ------------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--line);
  margin: var(--sp-4) 0 var(--sp-5); }
.tab { padding: var(--sp-2) var(--sp-4); color: var(--ink-soft); font-weight: 500;
  font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { text-decoration: none; color: var(--ink); }
.tab.active { color: var(--navy); border-bottom-color: var(--gold); }

/* Findings (answer-first) ---------------------------------------------- */
.finding { border-left: 3px solid var(--line-strong); padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4); }
.finding.bad { border-left-color: var(--bad); }
.finding.warn { border-left-color: var(--warn); }
.finding.ok { border-left-color: var(--ok); }
.finding h3 { font-family: var(--font-display); font-size: 1.12rem; margin: 0 0 var(--sp-1); }
.finding p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Exhibit cards --------------------------------------------------------- */
.exhibit { margin-top: var(--sp-4); }
.exhibit h3 { font-size: 1.05rem; margin: 0 0 var(--sp-2); }
.exhibit .chart { width: 100%; height: 320px; }
.exhibit .source { color: var(--ink-faint); font-size: 0.74rem; margin-top: var(--sp-2); }
.exhibit .sowhat { color: var(--ink-soft); font-size: 0.86rem; margin-top: var(--sp-2);
  font-style: italic; }

/* Metric emphasis in tables -------------------------------------------- */
tr.emphasis td { font-weight: 600; background: var(--accent-soft); }
.kpi-big { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); }

/* Utilities ------------------------------------------------------------- */
.muted { color: var(--ink-faint); }
.small { font-size: 0.82rem; }
.gold { color: var(--accent-ink); }
.tagline { color: var(--accent-ink); font-weight: 500; letter-spacing: 0.04em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-3); }