/* ==========================================================================
   Atticus Fin — app stylesheet

   Two-surface design (Phase 8.5 visual pass):
   - The CHROME (header, primary buttons, focus rings, active nav) is forest
     green — "you're inside the app, this is your space." The chrome carries
     the inside-the-app identity, distinct from marketing's cream/brown.
   - The DATA surface (panels where dollar amounts live) stays warm cream so
     financial figures read crisp and high-contrast. The numbers never sit
     on green; the green is always the frame.
   - The warm brown sepia stays as the secondary accent (links, code,
     decorative borders) so the app reads as the same product family as
     atticusfin.com, just a different room. Logo + Fraunces/Inter type are
     identical across both surfaces.
   ========================================================================== */

:root {
  /* --- Chrome (the forest-green frame, Phase 8.5) -----------------------
     Deep Forest — calm, trustworthy, conservative; the right tone for a
     money app. Contrast: cream #F2E9D2 on this green = 8.49:1 (AAA).
     White text = 10.27:1 (AAA). Plenty of headroom for primary-button
     labels and nav text.
     The translucent variant is the sticky header's stage; blur softens
     the body parchment scrolling underneath. */
  --forest: #2E4636;
  --forest-hover: #3A5743;
  --forest-translucent: rgba(46, 70, 54, 0.92);

  /* --- Data surfaces (UNCHANGED — financial figures sit here) -----------
     bg-primary / bg-card / bg-elevated are warmer/browner than marketing
     parchment by ~5-6%. Phase 8.5 visual pass kept these EXACTLY where
     they were — readability of dollar amounts trumps recolor coherence. */
  --bg-primary: #EBDFC8;     /* warm parchment — body bg */
  --bg-card: #E2D5B8;        /* warm bone — button default */
  --bg-elevated: #F2E9D2;    /* warm cream — panel bg (where data lives) */

  --text-primary: #2B2422;   /* ink sepia — 12.60:1 on cream (AAA) */
  --text-secondary: #6B5D52; /* walnut — 5.24:1 on cream (AA) */
  --text-tertiary: #9A8A7A;  /* driftwood — decorative only */
  --accent-primary: #8B6F47; /* sepia — the warm thread, used for links + code */
  --accent-secondary: #B89968; /* tan — link hover */

  /* --- Semantic money colors (CVD-safe pair) ----------------------------
     Positive moved from olive to deep teal in Phase 8.5. Why teal:
       1. AA legible on cream (5.47:1) regardless of font weight/size.
       2. Hue-distinct from the forest chrome (no green-on-green clash).
       3. Improves color-blind accessibility — teal vs terracotta is
          clearly distinguishable for red-green CVD (~8% of men) in a way
          olive vs terracotta was not. Independent accessibility win.
     Negative stays terracotta unchanged (4.91:1 on cream, AA). */
  --positive: #00695C;       /* deep teal — money in */
  --negative: #A04A3C;       /* terracotta — money out */
  --amber: #C4843E;          /* warning */
  --border-subtle: #CFC3A8;  /* sand */
  --border-strong: #6B5D52;  /* walnut */

  /* Backward-compat aliases. The inline JS in signup.html still references
     var(--green) / var(--red) / var(--muted) for status messages; older
     CSS may still reference --olive / --terracotta. These keep all that
     working without code churn. */
  --green: var(--positive);
  --red: var(--negative);
  --muted: var(--text-secondary);
  --olive: var(--positive);          /* legacy name */
  --terracotta: var(--negative);     /* legacy name */

  /* --- Type --- */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Layout --- */
  --maxw: 980px;
  --radius: 12px;
  --radius-sm: 4px;
  --header-h: 56px;
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; margin: 0; line-height: 1.2; }
h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 18px; }
p { margin: 0 0 1rem; }
a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-secondary); }
code { font-family: var(--font-mono); color: var(--accent-primary); font-size: 13px; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: 16px 0; }

a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  /* Phase 8.5: focus ring goes forest so the inside-the-app identity
     extends to keyboard / accessibility users too. */
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Header (the "you're inside the app" chrome) ------------------------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Phase 8.5: forest-green stage, translucent so a faint hint of the
     parchment body bleeds through on scroll. Backdrop blur softens it. */
  background: var(--forest-translucent);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  /* Border-bottom kept subtle so the green/cream transition is clean,
     not over-articulated by a hard line. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  padding: 10px 20px;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw); margin: 0 auto;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  /* Wordmark on the green chrome — cream text, 8.49:1 contrast (AAA). */
  color: var(--bg-elevated); text-decoration: none;
}
.brand:hover { color: var(--bg-elevated); opacity: 0.92; }
.brand img { height: 28px; width: auto; flex: 0 0 auto; }

nav.site-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
nav.site-nav a {
  /* Soft cream tint for inactive nav, full cream for hover/active.
     Inactive 75%-opacity cream on forest = ~6.4:1 (AA). */
  color: rgba(242, 233, 210, 0.78);
  font-size: 14px;
  padding: 8px 6px;
  display: inline-flex; align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-bottom-color 0.12s ease;
}
nav.site-nav a:hover { color: var(--bg-elevated); }
nav.site-nav a.active {
  color: var(--bg-elevated);
  /* Active-link underline echoes the cream wordmark for a clean
     "you are here" affordance against the green chrome. */
  border-bottom-color: var(--bg-elevated);
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px;
}

/* --- Panel (the legacy card class — kept so page templates don't change) --- */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.panel h1 { font-size: 16px; margin: 0 0 12px; color: var(--text-secondary);
            font-family: var(--font-body); font-weight: 600; letter-spacing: 0.3px;
            text-transform: uppercase; }
/* …unless the panel-h1 needs to look like a real heading; opt out via .panel-title */
.panel h1.panel-title { font-family: var(--font-head); font-weight: 500;
                        text-transform: none; letter-spacing: 0; font-size: 22px;
                        color: var(--text-primary); }

/* --- Tables -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
td.amt, th.amt { text-align: right; font-family: var(--font-mono);
                 font-variant-numeric: tabular-nums; }
/* Phase 8.5: .pos = deep teal (CVD-safe vs --negative terracotta), kept
   on the cream panel where AA contrast (5.47:1) makes amounts crisp. */
.pos { color: var(--positive); font-weight: 500; }
.neg { color: var(--negative); font-weight: 500; }

/* --- Forms --------------------------------------------------------------- */
input, select, textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  min-height: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  /* Phase 8.5: focused-input border picks up the forest chrome so the
     "you're editing" affordance ties to the rest of the green identity. */
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(46, 70, 54, 0.08);
}
textarea { min-height: 80px; resize: vertical; }
label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 13px;
}
label input, label select { color: var(--text-primary); }

/* --- Buttons ------------------------------------------------------------- */
button, .btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 9px 16px;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.05s ease;
}
button:hover, .btn:hover { border-color: var(--border-strong); }
button:active, .btn:active { transform: scale(0.98); }

/* Phase 8.5: primary action button picks up the forest chrome with cream
   text — same surface family as the header. Cream-on-forest = 8.49:1 (AAA).
   Subtle lift on hover (1px translate + soft shadow) reads as "ready to act"
   without going glossy / gamified. */
button.primary, .btn-primary {
  background: var(--forest);
  color: var(--bg-elevated);
  border-color: var(--forest);
  font-weight: 600;
}
button.primary:hover, .btn-primary:hover {
  background: var(--forest-hover);
  border-color: var(--forest-hover);
  color: var(--bg-elevated);
  box-shadow: 0 1px 4px rgba(46, 70, 54, 0.18);
  transform: translateY(-1px);
}
button.primary:active, .btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}
button.danger {
  color: var(--negative);
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
}
button.danger:hover {
  border-color: var(--negative);
  background: var(--bg-card);
}

/* --- Misc helpers (preserved from old base — same names, new palette) --- */
.muted { color: var(--text-secondary); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--bg-elevated);
}
.pager { display: flex; gap: 12px; align-items: center; margin-top: 14px; }

/* --- Mobile --- */
@media (max-width: 640px) {
  main { padding: 20px 14px; }
  .header-inner { padding: 0; gap: 12px; }
  nav.site-nav { gap: 10px; }
  nav.site-nav a { font-size: 13px; }
  .panel { padding: 16px; }
}