/* ThetaFlow design system — a light, clean-fintech layer on top of Bootstrap
   5.3, built around the brand green. Two parts:
   1. Brand tokens + Bootstrap re-skin (applies app-wide).
   2. Marketing components for the public pages (hero, sections, footer). */

/* ---- 1. Brand tokens ---------------------------------------------------- */
:root {
  --tf-green:        #0b8457; /* brand */
  --tf-green-600:    #0a754d;
  --tf-green-700:    #096544; /* hover/active */
  --tf-green-800:    #075434;
  --tf-green-050:    #eaf6f0; /* tint surface */
  --tf-green-100:    #d6efe2;

  --tf-ink:          #14211b; /* near-black, faint green cast */
  --tf-body:         #36433d; /* body text */
  --tf-muted:        #6b7a73;
  --tf-line:         #e3e8e5; /* borders */
  --tf-surface:      #ffffff;
  --tf-bg:           #f7faf8; /* page background */

  /* Re-point Bootstrap's primary + links at the brand green. */
  --bs-primary: var(--tf-green);
  --bs-primary-rgb: 11, 132, 87;
  --bs-link-color: var(--tf-green);
  --bs-link-color-rgb: 11, 132, 87;
  --bs-link-hover-color: var(--tf-green-700);
  --bs-link-hover-color-rgb: 9, 101, 68;

  --bs-body-color: var(--tf-body);
  --bs-body-bg: var(--tf-bg);
  --bs-emphasis-color: var(--tf-ink);
  --bs-border-color: var(--tf-line);

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem; /* 17px base for a calmer read */
  --bs-body-line-height: 1.6;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--tf-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.display-3, .display-4, .display-5 { letter-spacing: -0.03em; }
.text-muted { color: var(--tf-muted) !important; }

/* Buttons: brand green primary + a refined outline. */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 0.55rem; }
.btn-lg { --bs-btn-border-radius: 0.65rem; }
.btn-primary {
  --bs-btn-bg: var(--tf-green);
  --bs-btn-border-color: var(--tf-green);
  --bs-btn-hover-bg: var(--tf-green-600);
  --bs-btn-hover-border-color: var(--tf-green-600);
  --bs-btn-active-bg: var(--tf-green-700);
  --bs-btn-active-border-color: var(--tf-green-700);
  --bs-btn-disabled-bg: var(--tf-green);
  --bs-btn-disabled-border-color: var(--tf-green);
  --bs-btn-focus-shadow-rgb: 11, 132, 87;
}
.btn-outline-primary {
  --bs-btn-color: var(--tf-green-700);
  --bs-btn-border-color: var(--tf-green);
  --bs-btn-hover-bg: var(--tf-green);
  --bs-btn-hover-border-color: var(--tf-green);
  --bs-btn-active-bg: var(--tf-green-700);
  --bs-btn-active-border-color: var(--tf-green-700);
  --bs-btn-focus-shadow-rgb: 11, 132, 87;
}

.card { --bs-card-border-color: var(--tf-line); --bs-card-border-radius: 0.85rem; }

.navbar-brand { color: var(--tf-green); font-weight: 800; letter-spacing: -0.02em; }
.navbar-brand:hover { color: var(--tf-green-700); }

/* ---- 2. Shared chrome + marketing components --------------------------- */
/* Navbar treatment shared by the marketing site and the authenticated app, so
   both feel like the same product: translucent, blurred, hairline border. */
.tf-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--tf-line);
}
.tf-nav .nav-link { color: var(--tf-body); font-weight: 500; }
.tf-nav .nav-link:hover { color: var(--tf-green-700); }
.tf-nav .nav-link.active { color: var(--tf-green-700); font-weight: 600; }

/* Admin sidebar (nav-pills): the active pill is the brand green, not
   Bootstrap's default primary blue, which it hardcodes on this component. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--tf-green); }

/* On mobile the sidebar (a vertical column at md+) collapses to a row and the
   pills wrap untidily. Make it a clean single-row, horizontally scrollable tab
   strip instead, with a hairline separating it from the content below. */
@media (max-width: 767.98px) {
  .nav-pills.flex-md-column {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--tf-line);
    scrollbar-width: none; /* Firefox */
  }
  .nav-pills.flex-md-column::-webkit-scrollbar { display: none; } /* WebKit */
  .nav-pills.flex-md-column .nav-link { flex: 0 0 auto; white-space: nowrap; }
}

/* Hero: airy, with a soft green wash that fades into the page. */
.hero {
  background:
    radial-gradient(60rem 30rem at 70% -10%, var(--tf-green-050), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--tf-bg) 100%);
  border-bottom: 1px solid var(--tf-line);
}
.hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.hero-sub { font-size: 1.2rem; color: var(--tf-muted); max-width: 38rem; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-green-700);
  background: var(--tf-green-050);
  border: 1px solid var(--tf-green-100);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.section { padding: 4.5rem 0; }
.section-tint { background: var(--tf-surface); border-block: 1px solid var(--tf-line); }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Legal/prose documents: a readable single-column measure. */
.legal-doc { max-width: 46rem; }
.legal-doc h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p, .legal-doc li { color: var(--tf-body); }
.legal-doc .updated { color: var(--tf-muted); font-size: 0.9rem; }

/* Soft cards for features / strategies. */
.tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  border-radius: 0.9rem;
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tf-card:hover {
  border-color: var(--tf-green-100);
  box-shadow: 0 10px 30px -18px rgba(11, 132, 87, 0.35);
  transform: translateY(-2px);
}
.tf-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.7rem;
  background: var(--tf-green-050);
  color: var(--tf-green-700);
  margin-bottom: 0.9rem;
}

/* Pricing: featured plan gets a green ring; feature checkmarks are brand green. */
.tf-plan-featured {
  border-color: var(--tf-green);
  box-shadow: 0 10px 40px -22px rgba(11, 132, 87, 0.45);
}
.tf-check { color: var(--tf-green); margin-top: 0.15rem; }

/* Numbered "how it works" steps. */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  background: var(--tf-green); color: #fff; font-weight: 700;
}

/* Full-width CTA band. */
.cta-band {
  background: linear-gradient(135deg, var(--tf-green) 0%, var(--tf-green-700) 100%);
  color: #fff;
}
.cta-band .btn-light { --bs-btn-color: var(--tf-green-700); --bs-btn-font-weight: 700; }

.mkt-footer {
  background: var(--tf-ink);
  color: #c7d2cc;
  padding: 3rem 0 2rem;
}
.mkt-footer a { color: #c7d2cc; text-decoration: none; }
.mkt-footer a:hover { color: #fff; }
.mkt-footer .brand { color: #fff; font-weight: 800; letter-spacing: -0.02em; }
.mkt-footer .disclaimer { color: #8a988f; font-size: 0.85rem; }