/* =====================================================
   THE FOUNDERS HOUSE — Global Theme Override
   AngelList / Wellfound inspired · editorial tech
   Cream canvas · pitch-black type · coral accent
   Loaded AFTER style.css on EVERY page.
   Scoped to global components — no page-specific layout.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ---------- 1. Re-tokenized palette ---------- */
:root {
  /* Canvas */
  --bg: #FAF9F4;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F2F0E8;
  --bg-card: #FFFFFF;

  /* Text */
  --text-primary: #0A0A0A;
  --text-secondary: #52514D;
  --text-tertiary: #8A8982;
  --text-placeholder: #B8B6AD;

  /* Borders */
  --border: #E8E6DD;
  --border-light: #F0EEE5;
  --border-dark: #D5D2C6;

  /* Brand → black (primary) */
  --brand: #0A0A0A;
  --brand-50:  #F5F5F4;
  --brand-100: #E8E8E6;
  --brand-200: #D0D0CC;
  --brand-300: #A8A8A2;
  --brand-400: #6B6B66;
  --brand-500: #1A1A1A;
  --brand-600: #0A0A0A;
  --brand-700: #000000;
  --brand-800: #000000;
  --brand-900: #000000;

  /* Accent → signature coral (AngelList) */
  --accent: #FF5A4E;
  --accent-soft: #FFF0EE;
  --accent-glow: #FF5A4E;
  --accent-lavender: #0A0A0A;
  --accent-lavender-soft: #0A0A0A;

  /* Status */
  --success-500: #00C853;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;

  /* Shadows — crisp & modern */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.05);
  --shadow-md: 0 8px 24px -8px rgba(10,10,10,0.10);
  --shadow-lg: 0 24px 48px -16px rgba(10,10,10,0.14);
  --shadow-xl: 0 40px 80px -24px rgba(10,10,10,0.18);
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --bg: #0C0C0F;
  --bg-secondary: #16161A;
  --bg-tertiary: #1E1E24;
  --bg-card: #1A1A20;

  --text-primary: #EDEDEF;
  --text-secondary: #A0A0A8;
  --text-tertiary: #6C6C76;
  --text-placeholder: #4A4A54;

  --border: #2A2A32;
  --border-light: #222228;
  --border-dark: #3A3A44;

  --brand-50: #1A1A20;
  --brand-100: #2A2A32;
  --brand-200: #3A3A44;
  --gray-50: #1A1A20;
  --gray-100: #222228;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 48px -16px rgba(0,0,0,0.5);
  --shadow-xl: 0 40px 80px -24px rgba(0,0,0,0.6);
}
[data-theme="dark"] html,
[data-theme="dark"] body,
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0C0C0F !important;
  color: #EDEDEF !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #EDEDEF !important;
}
/* Dark buttons */
[data-theme="dark"] .btn-primary {
  background: #EDEDEF !important;
  color: #0C0C0F !important;
  border-color: #EDEDEF !important;
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
[data-theme="dark"] .btn-secondary {
  background: #1A1A20 !important;
  color: #EDEDEF !important;
  border-color: #3A3A44 !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: #EDEDEF !important;
  color: #0C0C0F !important;
}
[data-theme="dark"] .btn-ghost { color: #EDEDEF !important; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .btn-icon { color: #A0A0A8 !important; }
[data-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,0.08) !important; color: #EDEDEF !important; }
/* Dark cards */
[data-theme="dark"] .card {
  background: #1A1A20 !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .card:hover {
  background: #1E1E24 !important;
  border-color: #4A4A54 !important;
}
/* Dark forms */
[data-theme="dark"] .form-label { color: #EDEDEF !important; }
[data-theme="dark"] .form-input {
  background: #16161A !important;
  border-color: #2A2A32 !important;
  color: #EDEDEF !important;
}
[data-theme="dark"] .form-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(255,90,78,0.2) !important;
}
/* Dark badges */
[data-theme="dark"] .badge-brand { background: #EDEDEF !important; color: #0C0C0F !important; }
[data-theme="dark"] .badge-gray { background: #2A2A32 !important; color: #EDEDEF !important; }
/* Dark tags */
[data-theme="dark"] .tag {
  background: #1E1E24 !important;
  color: #EDEDEF !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .tag:hover {
  background: #EDEDEF !important;
  color: #0C0C0F !important;
}
/* Dark navbar */
[data-theme="dark"] .navbar {
  background: rgba(12,12,15,0.85) !important;
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(12,12,15,0.95) !important;
  border-bottom-color: #2A2A32 !important;
}
[data-theme="dark"] .nav-links {
  background: #1A1A20 !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .nav-links a { color: #EDEDEF !important; }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active {
  background: #EDEDEF !important;
  color: #0C0C0F !important;
}
[data-theme="dark"] .nav-hamburger { color: #EDEDEF !important; }
/* Dark auth */
[data-theme="dark"] .auth-page { background: #0C0C0F !important; }
[data-theme="dark"] .auth-card {
  background: #1A1A20 !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .auth-card h1 { color: #EDEDEF !important; }
/* Dark footer */
[data-theme="dark"] .footer {
  background: #0C0C0F !important;
  border-top-color: #2A2A32 !important;
}
/* Dark cookie banner */
[data-theme="dark"] .cookie-banner {
  background: #1A1A20 !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .cookie-banner p { color: #A0A0A8 !important; }
/* Dark avatar */
[data-theme="dark"] .avatar { background: #2A2A32 !important; }
/* Dark sidebar */
[data-theme="dark"] .app-sidebar {
  background: #111114 !important;
  border-right-color: #2A2A32 !important;
}
[data-theme="dark"] .sidebar-link { color: #A0A0A8 !important; }
[data-theme="dark"] .sidebar-link:hover,
[data-theme="dark"] .sidebar-link.active { background: rgba(255,255,255,0.06) !important; color: #EDEDEF !important; }
[data-theme="dark"] .sidebar-section-label { color: #6C6C76 !important; }
[data-theme="dark"] .sidebar-user { border-top-color: #2A2A32 !important; }
[data-theme="dark"] .sidebar-user:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .sidebar-user-name { color: #EDEDEF !important; }
[data-theme="dark"] .sidebar-user-role { color: #6C6C76 !important; }
[data-theme="dark"] .sidebar-action-btn { color: #A0A0A8 !important; }
[data-theme="dark"] .sidebar-action-btn:hover { background: rgba(255,255,255,0.06) !important; color: #EDEDEF !important; }
[data-theme="dark"] .sidebar-bottom-actions { border-top-color: #2A2A32 !important; }
/* Dark topbar */
[data-theme="dark"] .app-topbar {
  background: #0C0C0F !important;
  border-bottom-color: #2A2A32 !important;
}
[data-theme="dark"] .topbar-title { color: #EDEDEF !important; }
/* Dark bottom nav */
[data-theme="dark"] .bottom-nav {
  background: #111114 !important;
  border-top-color: #2A2A32 !important;
}
[data-theme="dark"] .bottom-nav-item { color: #6C6C76 !important; }
[data-theme="dark"] .bottom-nav-item.active { color: var(--accent) !important; }
/* Dark post/feed */
[data-theme="dark"] .post-composer,
[data-theme="dark"] .post-card {
  background: #1A1A20 !important;
  border-color: #2A2A32 !important;
}
[data-theme="dark"] .composer-input {
  background: transparent !important;
  color: #EDEDEF !important;
}
[data-theme="dark"] .post-body { color: #EDEDEF !important; }
[data-theme="dark"] .post-action { color: #6C6C76 !important; }
[data-theme="dark"] .post-action:hover { color: #EDEDEF !important; background: rgba(255,255,255,0.06) !important; }
/* Dark chat */
[data-theme="dark"] .chat-sidebar {
  background: #111114 !important;
  border-right-color: #2A2A32 !important;
}
[data-theme="dark"] .chat-item { border-bottom-color: #1E1E24 !important; }
[data-theme="dark"] .chat-item:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .chat-item-name { color: #EDEDEF !important; }
[data-theme="dark"] .chat-item-preview { color: #6C6C76 !important; }
[data-theme="dark"] .chat-main { background: #0C0C0F !important; }
[data-theme="dark"] .chat-bubble { background: #1E1E24 !important; color: #EDEDEF !important; }
[data-theme="dark"] .chat-bubble.mine { background: var(--accent) !important; color: #fff !important; }
[data-theme="dark"] .chat-input { background: #111114 !important; border-top-color: #2A2A32 !important; }
[data-theme="dark"] .chat-input input,
[data-theme="dark"] .chat-input textarea {
  background: #1A1A20 !important;
  color: #EDEDEF !important;
  border-color: #2A2A32 !important;
}
/* Dark profile card */
[data-theme="dark"] .profile-card { background: #1A1A20 !important; border-color: #2A2A32 !important; }
[data-theme="dark"] .profile-card:hover { background: #1E1E24 !important; border-color: #4A4A54 !important; }
[data-theme="dark"] .profile-card-name { color: #EDEDEF !important; }
[data-theme="dark"] .profile-card-meta { color: #6C6C76 !important; }
[data-theme="dark"] .profile-card-body { color: #A0A0A8 !important; }
/* Dark settings */
[data-theme="dark"] .settings-section { background: #1A1A20 !important; border-color: #2A2A32 !important; }
/* Dark notification dropdown */
[data-theme="dark"] .notif-dropdown { background: #1A1A20 !important; border-color: #2A2A32 !important; }
[data-theme="dark"] .notif-item { border-bottom-color: #222228 !important; }
[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,0.04) !important; }
/* Dark profile page */
[data-theme="dark"] .profile-header-body { background: #1A1A20 !important; }
[data-theme="dark"] .profile-stat strong { color: #EDEDEF !important; }
/* Dark modals */
[data-theme="dark"] .modal { background: #1A1A20 !important; color: #EDEDEF !important; }
/* Dark search bar */
[data-theme="dark"] .topbar-search { background: #1A1A20 !important; color: #A0A0A8 !important; border-color: #2A2A32 !important; }
/* Dark filter buttons */
[data-theme="dark"] .filter-btn { background: #1A1A20 !important; color: #A0A0A8 !important; border-color: #2A2A32 !important; }
[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .filter-btn.active { background: #EDEDEF !important; color: #0C0C0F !important; border-color: #EDEDEF !important; }
/* Dark mobile nav links */
@media (max-width: 900px) {
  [data-theme="dark"] .nav-links.open { background: #1A1A20 !important; border-color: #2A2A32 !important; }
  [data-theme="dark"] .nav-links.open a { color: #EDEDEF !important; }
}
/* Dark PWA install banner */
[data-theme="dark"] #pwa-install-banner { background: #1A1A20 !important; border-top-color: #2A2A32 !important; }
[data-theme="dark"] .pwa-banner-text strong { color: #EDEDEF !important; }
[data-theme="dark"] .pwa-banner-text span { color: #A0A0A8 !important; }

/* ---------- 2. Base ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
}

/* ---------- 3. Buttons ---------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease !important;
}
.btn-primary {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid #0A0A0A !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.08), 0 10px 24px -12px rgba(10,10,10,0.5) !important;
}
.btn-primary:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 0 rgba(255,90,78,0.15), 0 18px 36px -14px rgba(255,90,78,0.6) !important;
}
.btn-secondary {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 1px solid #0A0A0A !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.06) !important;
}
.btn-secondary:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}
.btn-ghost {
  color: #0A0A0A !important;
  background: transparent !important;
}
.btn-ghost:hover {
  background: rgba(10,10,10,0.06) !important;
  color: #0A0A0A !important;
}
.btn-link { color: var(--accent) !important; }
.btn-link:hover { color: #DC2E1F !important; }
.btn-icon { color: var(--text-secondary) !important; }
.btn-icon:hover { background: rgba(10,10,10,0.06) !important; color: #0A0A0A !important; }

/* ---------- 4. Badges & Tags ---------- */
.badge-brand { background: #0A0A0A !important; color: #FFFFFF !important; }
.badge-gray { background: #F2F0E8 !important; color: #0A0A0A !important; }
.badge-success { background: #E7F9EE !important; color: #027A48 !important; }
.badge-warning { background: #FFFAEB !important; color: #B54708 !important; }
.badge-error { background: #FEF3F2 !important; color: #B42318 !important; }
.badge-blue { background: #EFF8FF !important; color: #175CD3 !important; }

.tag {
  background: #F4F2EB !important;
  color: #0A0A0A !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
}
.tag:hover {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border-color: #0A0A0A !important;
}
.tag.active {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

/* ---------- 5. Cards ---------- */
.card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(10,10,10,0.03), 0 2px 8px rgba(10,10,10,0.03) !important;
}
.card:hover {
  background: #FFFFFF !important;
  border-color: #0A0A0A !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.05), 0 24px 48px -16px rgba(10,10,10,0.18) !important;
}

/* ---------- 6. Forms ---------- */
.form-label { color: #0A0A0A !important; font-weight: 600 !important; }
.form-input {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  color: #0A0A0A !important;
  box-shadow: 0 1px 2px rgba(10,10,10,0.03) !important;
}
.form-input:focus {
  border-color: #0A0A0A !important;
  box-shadow: 0 0 0 4px rgba(255,90,78,0.15), 0 1px 2px rgba(10,10,10,0.04) !important;
}
.form-input::placeholder { color: var(--text-placeholder) !important; }

/* ---------- 7. Navbar ---------- */
.navbar {
  background: rgba(250, 249, 244, 0.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent !important;
}
.navbar.scrolled {
  background: rgba(250, 249, 244, 0.94) !important;
  border-bottom-color: var(--border) !important;
}
.nav-logo {
  color: #FFFFFF !important;
  background: #0A0A0A !important;
  border: 1.5px solid #0A0A0A !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.08), 0 12px 28px -14px rgba(10,10,10,0.35) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.nav-logo .nav-logo-text-wrap,
.nav-logo .nav-logo-text-wrap small { color: #FFFFFF !important; }
.nav-logo:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 0 rgba(255,90,78,0.25), 0 14px 30px -12px rgba(255,90,78,0.55) !important;
}
.nav-links {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(10,10,10,0.03), 0 8px 24px -12px rgba(10,10,10,0.08) !important;
  backdrop-filter: none !important;
}
.nav-links a {
  color: #0A0A0A !important;
  font-weight: 600 !important;
}
.nav-links a:hover,
.nav-links a.active {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-investor-btn {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border: 1px solid rgba(255, 90, 78, 0.25) !important;
  font-weight: 600 !important;
}
.nav-investor-btn:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}
.nav-hamburger { color: #0A0A0A !important; }
@media (max-width: 900px) {
  .nav-links.open {
    background: #FFFFFF !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
  }
  .nav-links.open a { color: #0A0A0A !important; }
}
@media (max-width: 640px) {
  .nav-right .btn-ghost { color: #0A0A0A !important; }
}

/* ---------- 8. Sections shared ---------- */
.section-eyebrow {
  color: var(--accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}
.section-header p { color: var(--text-secondary) !important; }

/* ---------- 9. Footer ---------- */
.footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg) !important;
}
.footer-copy { color: var(--text-tertiary) !important; }
.footer-links a { color: var(--text-tertiary) !important; }
.footer-links a:hover { color: #0A0A0A !important; }

/* ---------- 10. Cookie Banner ---------- */
.cookie-banner {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 48px -16px rgba(10,10,10,0.18) !important;
  backdrop-filter: none !important;
}
.cookie-banner p { color: var(--text-secondary) !important; }
.cookie-banner a { color: var(--accent) !important; }
.cookie-banner .btn-ghost { color: var(--text-secondary) !important; }

/* ---------- 11. Auth pages ---------- */
.auth-page { background: var(--bg) !important; }
.auth-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 0 rgba(10,10,10,0.03), 0 30px 60px -20px rgba(10,10,10,0.18) !important;
}
.auth-card h1 { color: #0A0A0A !important; }
.auth-card > p { color: var(--text-secondary) !important; }
.auth-divider { color: var(--text-tertiary) !important; }
.auth-divider::before, .auth-divider::after { background: var(--border) !important; }

/* ---------- 12. Common content pages (pricing, legal, apply) ---------- */
/* Avatar fallback bg */
.avatar { background: #0A0A0A !important; }

/* Dividers */
.divider { background: var(--border) !important; }

/* Text utility overrides */
.text-brand { color: var(--accent) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }

/* Featured badge (used on pricing/apply pages too) */
.featured-badge {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(255,90,78,0.45) !important;
}