/* =============================================================================
   PersonaFi site theme (founder 2026-10-04): the home page look everywhere.
   - Forest band with a teal glow for hero / headline areas
   - Gold for the main call to action, amber for "decisions" and section kickers
   - One accent per tool: cash = blue, net worth = purple, goals = amber
   Loaded last in base.html so it can override older page styles.
   ============================================================================= */
:root {
  --pf-forest: #064E3B;
  --pf-forest-glow: radial-gradient(120% 140% at 85% 10%, #0F766E 0%, #064E3B 55%, #053B2D 100%);
  --pf-gold: #FCD34D;
  --pf-gold-hover: #FBBF24;
  --pf-gold-ink: #3B2A05;
  --pf-amber: #D97706;
  --pf-tool-cash: #2563EB;
  --pf-tool-worth: #7C3AED;
  --pf-tool-goals: #D97706;
  /* older pages draw their hero from this variable */
  --gradient-hero: var(--pf-forest-glow);
}
/* every app table header: forest with white text (like the Cash forecast statement) */
.pf-ui, .pf-ui * { --pf-head: #064E3B; --pf-head-text: #FFFFFF; }

/* main call to action in the navbar */
.navbar .signup-btn { background: var(--pf-gold); color: var(--pf-gold-ink) !important; box-shadow: none; }
.navbar .signup-btn:hover { background: var(--pf-gold-hover); color: var(--pf-gold-ink) !important; box-shadow: none; }

/* public page heroes (features, privacy, persona picker, profile): forest band */
.features-hero, .insights-hero, .about-hero, .profile-hero { background: var(--pf-forest-glow) !important; border-radius: 22px; overflow: hidden; }
.features-hero::before, .insights-hero::before, .about-hero::before, .profile-hero::before { background: transparent !important; }
.features-hero h1, .insights-hero h1, .about-hero h1 { font-family: Manrope, Inter, sans-serif; font-weight: 800; letter-spacing: -.015em; }
.features-hero .lead, .insights-hero .lead { color: #D1FAE5 !important; }
.pf-gold-text { color: var(--pf-gold); }

/* section headings on long public pages: forest, with an amber marker */
.pf-about .section-title { font-family: Manrope, Inter, sans-serif; font-weight: 800; color: #0F2A21; padding-left: .75rem; border-left: 4px solid var(--pf-amber); }

/* sign in / sign up: a forest band across the top of the card */
.pf-auth.auth-card { overflow: hidden; padding-top: 0 !important; }
.pf-auth .login-header { margin: 0 calc(-1 * clamp(2.2rem, 5vw, 3.4rem)) 2rem; padding: 2rem clamp(2.2rem, 5vw, 3.4rem) 1.6rem; background: var(--pf-forest-glow); }
.pf-auth .login-header h2 { color: #fff; font-family: Manrope, Inter, sans-serif; font-weight: 800; }
.pf-auth .login-header .login-subtitle { color: #D1FAE5; }

/* dashboard: the green bands use the same forest glow */
.pf-ui.finance-overview [data-role="headline-row"] { background: var(--pf-forest-glow) !important; }
.pf-ui.finance-overview [data-role="headline-row"]::before { background: linear-gradient(90deg, var(--pf-gold), #FDE68A) !important; }

/* tabs: same forest green everywhere (founder 2026-10-04: one colour for active tabs) */
.pf-figures { background: var(--pf-forest-glow) !important; }
.pf-figures::before { background: linear-gradient(90deg, var(--pf-gold), #FDE68A) !important; }

/* app page titles in forest */
.pf-top h4 { color: var(--pf-forest); font-weight: 800; }
.pf-ui .table thead th a, .pf-ui .table thead th button, .pf-ui .report-table thead th button { color: inherit !important; }
html body .pf-tx .table thead th, html body .pf-tx .transactions-table__head th { background: var(--pf-forest) !important; color: #fff !important; }
html body .pf-tx .table thead th a, html body .pf-tx .table thead th button { color: #fff !important; }