/* ──────────────────────────────────────────────────────────────
   math.im, Light Theme v2 ("Scholarly Pastel")
   Direction: Instrument Serif headings, Inter body, muted indigo
   accent, warm paper background, trust + clarity for math.
   Loaded AFTER each page's inline <style> so these rules win.

   Fonts: self-hosted via inline @font-face in each page's <head>
   (and fallback via cdn/css/fonts.css). Do NOT @import from
   Google Fonts here, that re-introduces a render-blocking
   external request and defeats the self-hosting.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:           #f9f8f5 !important;
  --bg-2:         #f4f3ee !important;
  --surface:      #ffffff !important;
  --surface-2:    #f4f3ee !important;
  --border:       #e5e2d9 !important;
  --border-2:     #d5d1c7 !important;

  /* ── Text ─────────────────────────────────────────────────── */
  --text:         #2c2c34 !important;
  --text-2:       #555560 !important;
  --muted:        #8c8c96 !important;
  --subtle:       #c0bfba !important;

  /* ── Primary accent, muted indigo ────────────────────────── */
  --green:        #5b6abf !important;
  --green-dark:   #4a58a8 !important;
  --green-dim:    rgba(91,106,191,.08) !important;
  --green-border: rgba(91,106,191,.20) !important;
  --green-text:   #ffffff !important;

  /* ── Chat surfaces ────────────────────────────────────────── */
  --wa-header:    #ffffff !important;
  --wa-chat-bg:   #f9f8f5 !important;
  --wa-line:      #e5e2d9 !important;

  /* ── Chat bubbles ─────────────────────────────────────────── */
  --bubble-user:  #eef0fb !important;
  --bubble-ai:    #ffffff !important;
  --bubble-u-txt: #2c2c34 !important;
  --bubble-a-txt: #2c2c34 !important;

  /* ── Semantic colors ──────────────────────────────────────── */
  --success:      #5ca887;
  --success-dim:  rgba(92,168,135,.10);
  --error:        #d4726a;
  --error-dim:    rgba(212,114,106,.10);
  --gold:         #d4a24e;
  --gold-dim:     rgba(212,162,78,.10);

  /* ── Fonts ────────────────────────────────────────────────── */
  --fh: "Instrument Serif", Georgia, "Times New Roman", serif !important;
  --fb: "Inter", system-ui, -apple-system, sans-serif !important;

  --r: 12px !important;
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  background: #f9f8f5 !important;
  color: #2c2c34 !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  background-image: none !important;
}

/* ── Headings: serif, elegant, never bold ────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Instrument Serif", Georgia, serif !important;
  color: #2c2c34 !important;
  line-height: 1.2 !important;
}

/* ── Weight control: max 500, mostly 400 ─────────────────────── */
*, *::before, *::after,
b, strong, th,
.bold, [class*="bold"],
.nav, button, .btn, .cta {
  font-weight: 400 !important;
}
h1, h2, h3 { font-weight: 400 !important; }
h4, h5, h6 { font-weight: 400 !important; }

/* ── Nav, clean glass ───────────────────────────────────────── */
.nav, header {
  background: rgba(255,255,255,.88) !important;
  border-color: #e5e2d9 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Nav logo ────────────────────────────────────────────────── */
.nav-logo-img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #2c2c34 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin-right: 20px !important;
}
.logo-im { color: #5b6abf !important; }

.topbar-avatar-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Footer logo */
.foot-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

footer {
  background: rgba(255,255,255,.88) !important;
  border-color: #e5e2d9 !important;
}

/* ── Cards / panels ──────────────────────────────────────────── */
.card, .panel, .box, .tile,
[class*="card"], [class*="panel"], [class*="tile"] {
  border-color: #e5e2d9 !important;
}

/* ── Inputs ──────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #5b6abf !important;
  box-shadow: 0 0 0 3px rgba(91,106,191,.15) !important;
}

/* ── Chat bubbles ────────────────────────────────────────────── */
.bubble-user, .msg-user, .user-msg {
  background: #eef0fb !important;
  color: #2c2c34 !important;
}
.bubble-ai, .msg-ai, .ai-msg, .bubble-bot {
  background: #ffffff !important;
  color: #2c2c34 !important;
  border: 0.5px solid #e5e2d9 !important;
}

/* ── Code blocks, soft lavender ─────────────────────────────── */
pre, code, kbd, samp {
  background: #f0edf7 !important;
  color: #3e3658 !important;
  border-radius: 8px !important;
  font-weight: 400 !important;
}
pre { padding: 14px !important; border: 1px solid #e2d9f0 !important; }

/* ── Tables ──────────────────────────────────────────────────── */
table { border-color: #e5e2d9 !important; }
th {
  background: #f4f3ee !important;
  color: #555560 !important;
  font-weight: 500 !important;
  font-family: "Inter", system-ui, sans-serif !important;
}
td, th { border-color: #e5e2d9 !important; padding: 10px 12px !important; }

/* ── Scrollbar (WebKit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f9f8f5; }
::-webkit-scrollbar-thumb { background: #d5d1c7; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #c0bfba; }

/* ── Nav link colors ─────────────────────────────────────────── */
.nav-link, .foot-link { color: #8c8c96 !important; }
.nav-link:hover, .foot-link:hover { color: #2c2c34 !important; }

/* ── Override any remaining dark backgrounds ─────────────────── */
[style*="background: #0"], [style*="background:#0"],
[style*="background-color: #0"], [style*="background-color:#0"],
[style*="background: rgba(9"], [style*="background:rgba(9"] {
  background: rgba(255,255,255,.88) !important;
  background-color: rgba(255,255,255,.88) !important;
}

/* ── Mobile-first responsive ────────────────────────────────────── */

/* Base (mobile): tighter spacing, full-width layouts */
html, body {
  font-size: 15px !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Touch targets: minimum 44x44px */
a, button, [role="button"], input[type="submit"],
.nav-link, .foot-link, .chip, .mini-btn, .btn,
.icon-btn, .nav-btn, .plan-btn {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Inline links and small text elements exempt from min-size */
p a, li a, span a, .msg-body a, .cs-step a,
.foot-link, .nav-link {
  min-height: auto !important;
  min-width: auto !important;
}

/* Safe area for notched phones */
body {
  padding-left: env(safe-area-inset-left) !important;
  padding-right: env(safe-area-inset-right) !important;
}

/* Mobile nav hamburger */
.nav-hamburger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: none !important;
  border: none !important;
  color: #2c2c34 !important;
  font-size: 22px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  padding: 0 !important;
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Hide hamburger on desktop */
@media (min-width: 961px) {
  .nav-hamburger {
    display: none !important;
  }
}

/* Mobile nav overlay */
.nav-links-mobile {
  display: none !important;
}

.nav-links-mobile.open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 20px !important;
}

.nav-links-mobile.open a {
  font-size: 18px !important;
  padding: 14px 32px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #2c2c34 !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.nav-links-mobile.open a:hover,
.nav-links-mobile.open a:active {
  background: rgba(91,106,191,.08) !important;
}

.nav-links-mobile .nav-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  background: none !important;
  border: none !important;
  color: #2c2c34 !important;
  cursor: pointer !important;
}

/* Desktop: show normal nav links, hide hamburger */
@media (min-width: 961px) {
  .nav-links-mobile {
    display: none !important;
  }
  .nav-links-mobile.open {
    display: none !important;
  }
}
