/* ── Light theme overrides ─────────────────────────────────────────────────── */
/* Applied via body.light class; dark is the default (:root variables)        */

body.light {
  --bg:           #f8f9fa;
  --bg2:          #f1f3f9;
  --surface:      #ffffff;
  --surface2:     #f1f3f9;
  --border:       #e2e6f0;
  --border2:      #eaedf4;
  --border-strong:#c4cad6;
  --text:         #1a1d27;
  --text-muted:   #374151;
  --text-dim:     #4b5563;
  --text-vdim:    #6b7280;
  --accent:       #1E8E92;
  --accent2:      #178A7E;
  --accent-dim:   #3A7A9A;
  --blue:         #3A7A9A;
  --green:        #16a34a;
  --red:          #dc2626;
  --red-bg:       #fef2f2;
  --red-border:   #fca5a5;
  --red-text:     #dc2626;
  --amber:        #d97706;
  --card-border:  #3A7A9A;
  --badge-high-bg:#dcfce7;  --badge-high-text:#15803d;
  --badge-mid-bg: #fef9c3;  --badge-mid-text: #a16207;
  --badge-low-bg: #ccf2f3;  --badge-low-text: #1E8E92;
  --chunk-bg:     #e8f8f9;
  --chunk-border: #1E8E92;
  --chunk-text:   #1E8E92;
}

/* ── Theme toggle button ──────────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT-MODE OVERRIDES
   Uses !important where needed to beat page-level <style> blocks
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Headers / navs ───────────────────────────────────────────────────────── */
body.light .app-header,
body.light .header,
body.light .top-nav,
body.light nav {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.light nav {
  background: rgba(248, 249, 250, 0.92) !important;
}

/* ── Landing page: Hero ───────────────────────────────────────────────────── */
body.light .hero::before {
  background: radial-gradient(ellipse at 50% 30%, rgba(30,142,146,0.08) 0%, transparent 65%) !important;
}
body.light .hero h1 {
  color: #1a1d27 !important;
}
body.light .hero h1 .gradient {
  background: linear-gradient(120deg, #1E8E92 20%, #3A7A9A 80%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Landing page: Section titles & headings (hardcoded #f1f5f9) ──────────── */
body.light .section-title {
  color: #111827 !important;
}
body.light .section-label {
  color: #1E8E92 !important;
}
body.light .section-sub {
  color: #374151 !important;
}
body.light .step h3,
body.light .benefit h3,
body.light .pricing-card h3 {
  color: #111827 !important;
}
body.light .step p,
body.light .benefit p {
  color: #374151 !important;
}
body.light .step-num {
  color: rgba(30,142,146,0.22) !important;
}
body.light .step,
body.light .benefit,
body.light .pricing-card {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
body.light .benefit-icon {
  background: rgba(30,142,146,0.10) !important;
}

/* ── Landing: Hero subtitle & trust row ──────────────────────────────────── */
body.light .hero-sub {
  color: #374151 !important;
}
body.light .trust-item {
  color: #374151 !important;
}
body.light .trust-item svg {
  color: #1E8E92 !important;
}

/* ── Landing: Nav links ──────────────────────────────────────────────────── */
body.light .nav-link {
  color: #374151 !important;
}
body.light .nav-link:hover {
  color: #111827 !important;
}

/* ── Landing: Security section ────────────────────────────────────────────── */
body.light .security-section {
  background: rgba(30,142,146,0.04) !important;
}
body.light .security-item h4 {
  color: #111827 !important;
}
body.light .security-item p {
  color: #374151 !important;
}
body.light .aba-card {
  background: #ffffff !important;
  border-color: #d1d5db !important;
}
body.light .aba-label {
  color: #111827 !important;
}
body.light .aba-text {
  color: #374151 !important;
}

/* ── Landing: Pricing cards ───────────────────────────────────────────────── */
body.light .tier-price {
  color: #111827 !important;
}
body.light .tier-price sup {
  color: #111827 !important;
}
body.light .tier-period {
  color: #374151 !important;
}
body.light .tier-name {
  color: #374151 !important;
}
body.light .tier-features li {
  color: #374151 !important;
}
body.light .pricing-card.featured {
  background: linear-gradient(175deg, rgba(30,142,146,0.06), #ffffff 60%) !important;
  border-color: #1E8E92 !important;
}
body.light .pricing-footnote {
  color: #374151 !important;
}
body.light .featured-badge {
  color: #ffffff !important;
}
body.light .btn-fill {
  color: #ffffff !important;
}
body.light .btn-tier.btn-outline {
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.light .btn-tier.btn-outline:hover {
  border-color: #1E8E92 !important;
  color: #1E8E92 !important;
}
body.light .btn-outline {
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.light .btn-outline:hover {
  border-color: #1E8E92 !important;
  color: #1E8E92 !important;
}

/* ── Landing: Beta banner ─────────────────────────────────────────────────── */
body.light .beta-banner {
  background: linear-gradient(135deg, rgba(217,119,6,0.08) 0%, rgba(217,119,6,0.03) 100%) !important;
}

/* ── Landing: Trust bar ───────────────────────────────────────────────────── */
body.light .trust-bar span {
  color: #4b5563 !important;
}

/* ── Landing: FAQ ─────────────────────────────────────────────────────────── */
body.light details summary {
  color: #111827 !important;
}
body.light details p {
  color: #374151 !important;
}
body.light details {
  border-color: #d1d5db !important;
}

/* ── Landing: Who It's For cards ──────────────────────────────────────────── */
body.light .persona h3 {
  color: #111827 !important;
}

/* ── Landing: CTA / footer ────────────────────────────────────────────────── */
body.light .final-cta h2,
body.light .final-cta p {
  color: #111827 !important;
}
body.light .footer-inner {
  border-top-color: #d1d5db !important;
}
body.light .footer-logo {
  color: #1E8E92 !important;
}
body.light .footer-links a {
  color: #374151 !important;
}
body.light .footer-copy {
  color: #374151 !important;
}
body.light .btn-ghost {
  color: #374151 !important;
}
body.light .btn-ghost:hover {
  color: #111827 !important;
}
body.light .btn-secondary {
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.light .btn-secondary:hover {
  border-color: #1E8E92 !important;
  color: #1E8E92 !important;
}

/* ── Landing: Student section (inline styled cards) ──────────────────────── */
body.light .class-pill {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* ── Landing: Beta banner ────────────────────────────────────────────────── */
body.light .beta-copy {
  color: #374151 !important;
}
body.light .beta-copy strong {
  color: #111827 !important;
}

/* ── Inline hardcoded colors ──────────────────────────────────────────────── */
/* Elements with inline style="color:#f1f5f9" (dark-mode light text) */
body.light [style*="color:#f1f5f9"],
body.light [style*="color: #f1f5f9"] {
  color: #1a1d27 !important;
}
/* Elements with inline style="color:#09111f" (dark text on accent buttons) */
body.light [style*="color:#09111f"],
body.light [style*="color: #09111f"],
body.light [style*="color:#0f172a"],
body.light [style*="color: #0f172a"] {
  color: #ffffff !important;
}

/* ── Buttons: accent/gradient backgrounds — white text ────────────────────── */
body.light .nav-cta,
body.light .btn-primary,
body.light .featured-badge,
body.light .beta-pill {
  color: #ffffff !important;
}
body.light .btn-outline {
  border-color: var(--border-strong) !important;
  color: #1a1d27 !important;
}

/* ── Session page: start/stop buttons ─────────────────────────────────────── */
body.light .btn-dictate.start {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}
body.light .btn-dictate.stop {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

/* ── Clio button ──────────────────────────────────────────────────────────── */
body.light .btn-clio.connected {
  border-color: #16a34a !important;
  color: #16a34a !important;
}

/* ── Form elements ────────────────────────────────────────────────────────── */
body.light select,
body.light input,
body.light textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* ── Session page: footer bar ─────────────────────────────────────────────── */
body.light .app-footer {
  background: var(--surface) !important;
  border-top-color: var(--border) !important;
}
body.light .footer-disclosure {
  color: #374151 !important;
}
body.light .btn-icon {
  color: #374151 !important;
  border-color: #c4cad6 !important;
}
body.light .btn-new-session {
  color: #374151 !important;
  border-color: #c4cad6 !important;
}
body.light .btn-signout {
  color: #374151 !important;
}

/* ── Session page: analysis cards ─────────────────────────────────────────── */
body.light .card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ── Session page: error banner (JS-generated) ────────────────────────────── */
body.light [style*="background:#2a1a1a"] {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ── Hardcoded #94a3b8 text (authority badges, etc.) ──────────────────────── */
body.light [style*="color:#94a3b8"],
body.light [style*="color: #94a3b8"] {
  color: #4b5563 !important;
}

/* ── Box shadows: soften for light backgrounds ────────────────────────────── */
body.light [style*="box-shadow"] {
  --tw-shadow-color: rgba(0,0,0,0.08);
}