/* =========================================================================
   DentalSource App Theme  ·  ds-theme.css
   Reskins all tool tabs (Research, Drug Interactions, CDT Codes,
   Documentation, Appeal Generator, About, Appeals) to match the approved
   landing page + app-reference design language.
   RESKIN ONLY — this is a visual theming layer. It changes color, type,
   surface and border tokens on shared chrome + primitive component classes.
   It does NOT alter layout, markup, or behavior.
   Palette + type mirror templates/landing.html exactly.
   ========================================================================= */

:root {
  --ds-paper:  #F7F5F0;   /* page background (cream) */
  --ds-ink:    #14201C;   /* primary dark text */
  --ds-inkest: #0C1210;   /* darkest — solid buttons */
  --ds-muted:  #5B6A63;   /* muted dark text */
  --ds-faint:  #98A29B;   /* placeholder / very muted */
  --ds-mint:   #8FD6C4;   /* mint accent */
  --ds-deep:   #3FB48F;   /* deep teal accent (active underline, borders, non-text) */
  --ds-link:   #1F7A46;   /* accessible green for text links (>=4.5:1 on paper/white) */
  --ds-hair:   #E4E0D6;   /* hairline border on paper */
  --ds-card:   #FFFFFF;   /* card / input surface */
  --ds-code:   #EFEBE1;   /* inline code surface */

  --ds-serif: 'Newsreader', Georgia, serif;
  --ds-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --ds-sans:  Helvetica, Arial, sans-serif;

  --ds-radius:      14px;  /* cards */
  --ds-radius-btn:  12px;  /* buttons / inputs */
  --ds-shadow: 0 1px 2px rgba(20,32,28,.05), 0 10px 30px rgba(20,32,28,.04);
}

/* ---- base surface + typography --------------------------------------- */
html, body { background: var(--ds-paper) !important; }
body {
  color: var(--ds-ink) !important;
  font-family: var(--ds-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* default everything to sans; roles below re-assign serif / mono */
body, p, span, div, li, ul, ol, td, th, label, small, strong, em, b, i,
input, textarea, select, button, a, figcaption, blockquote {
  font-family: var(--ds-sans);
}

/* display headings, wordmark + generated letters → serif */
h1, h2, h3,
header .logo, header h1, .logo, .brand,
.welcome h2, .hero-title, .tool-title,
.letter, .letter *, .narrative-body, .narrative-body * {
  font-family: var(--ds-serif) !important;
  color: var(--ds-ink);
  font-weight: 400;
}

/* technical chrome, labels, badges, nav, code → mono */
.tool-nav-link, .badge, .mono, .eyebrow, .section-label, .label,
.ai-header-text, .followup-header, code, kbd, pre {
  font-family: var(--ds-mono) !important;
}

/* ---- header / brand chrome ------------------------------------------- */
header, .app-header, .site-header {
  background: var(--ds-paper) !important;
  border-bottom: 1px solid var(--ds-hair) !important;
}
header h1, header .logo, .logo, .brand {
  color: var(--ds-ink) !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}
.tagline, .subtitle, header p {
  color: var(--ds-muted) !important;
  font-family: var(--ds-sans) !important;
}

/* "N sources indexed" pill → plain muted mono text */
.badge {
  background: transparent !important;
  border: none !important;
  color: var(--ds-muted) !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
}

/* ---- tab navigation -------------------------------------------------- */
.tool-nav { border-bottom: 1px solid var(--ds-hair) !important; }
.tool-nav-link {
  color: var(--ds-muted) !important;
  text-transform: uppercase;
  letter-spacing: .1em !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s ease, border-color .15s ease;
}
.tool-nav-link:hover { color: var(--ds-ink) !important; }
.tool-nav-link.active {
  color: var(--ds-ink) !important;
  border-bottom-color: var(--ds-deep) !important;
}

/* ---- inputs ---------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], textarea, select, #chatInput {
  background: var(--ds-card) !important;
  border: 1px solid var(--ds-hair) !important;
  border-radius: var(--ds-radius-btn) !important;
  color: var(--ds-ink) !important;
  font-family: var(--ds-sans) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--ds-deep) !important;
  box-shadow: 0 0 0 3px rgba(63,180,143,.15) !important;
}
::placeholder { color: var(--ds-faint) !important; opacity: 1; }

/* ---- primary (solid ink) buttons ------------------------------------- */
.search-btn, .generate-btn, #sendBtn, .send-btn, .submit-btn,
button[type="submit"], .btn-primary, .primary-btn, .btn.primary, .cta {
  background: var(--ds-inkest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-radius-btn) !important;
  font-family: var(--ds-mono) !important;
  letter-spacing: .04em !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.search-btn:hover, .generate-btn:hover, #sendBtn:hover, .send-btn:hover,
.submit-btn:hover, button[type="submit"]:hover, .btn-primary:hover,
.primary-btn:hover, .btn.primary:hover, .cta:hover {
  background: var(--ds-ink) !important;
}

/* ---- secondary / icon buttons ---------------------------------------- */
.attach-btn, .mic-btn, .voice-btn, .reset-btn, .icon-btn, .btn-secondary,
.secondary-btn, .btn.secondary {
  background: var(--ds-card) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-hair) !important;
  border-radius: var(--ds-radius-btn) !important;
}
.attach-btn:hover, .mic-btn:hover, .voice-btn:hover, .reset-btn:hover,
.icon-btn:hover, .btn-secondary:hover, .secondary-btn:hover, .btn.secondary:hover {
  border-color: var(--ds-deep) !important;
  color: var(--ds-ink) !important;
}

/* ---- cards / containers ---------------------------------------------- */
.input-card, .result-card, .card, .result, .welcome, .example,
.suggestion, .tool-card, .panel, .box, .example-card, .suggestion-card {
  background: var(--ds-card) !important;
  border: 1px solid var(--ds-hair) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow) !important;
}

/* ---- links, code ----------------------------------------------------- */
.ai-body a, .result-card a, .card a, p a, .letter a {
  color: var(--ds-link) !important;
  text-underline-offset: 2px;
}
code, .ai-body code {
  background: var(--ds-code) !important;
  color: var(--ds-ink) !important;
  border-radius: 4px;
}

/* ---- footer / disclaimer --------------------------------------------- */
footer, .footer, .disclaimer, .app-footer {
  background: var(--ds-paper) !important;
  border-top: 1px solid var(--ds-hair) !important;
  color: var(--ds-muted) !important;
  font-family: var(--ds-mono) !important;
}

/* ---- Documentation tab (insurance_narrative) OpenEvidence vars ------- */
:root {
  --oe-accent: #3FB48F !important;
  --oe-ink:    #14201C !important;
  --oe-bg:     #F7F5F0 !important;
  --oe-paper:  #FFFFFF !important;
  --oe-border: #E4E0D6 !important;
  --oe-muted:  #5B6A63 !important;
}