/*
 * BahnIQ — Shared Light/Dark Theme
 * Upload to: public_html/theme.css
 * Add to every page: <link rel="stylesheet" href="/theme.css"/>
 *
 * All pages already use CSS custom properties (--var) for colors.
 * This file overrides those variables for light mode using
 * prefers-color-scheme. No HTML changes needed beyond the <link> tag.
 */

/* ─────────────────────────────────────────────────────
   HOMEPAGE light mode  (uses --ink, --navy, --surface etc.)
───────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {

  /* Homepage tokens */
  :root {
    --ink:       #f5f7fa;
    --navy:      #ffffff;
    --navy2:     #f0f4f9;
    --surface:   #e8edf5;
    --card:      #ffffff;
    --card2:     #eef1f6;
    --border:    rgba(0,0,0,.09);
    --border2:   rgba(0,0,0,.14);

    --amber:     #d97706;   /* slightly darker for contrast on white */
    --amber-lt:  #b45309;
    --amber-dim: rgba(217,119,6,.1);

    --text:      #0d1421;
    --text2:     #2d3f5a;
    --muted:     #5a6f8a;
    --muted2:    #8fa3ba;

    --green:  #16a34a;
    --red:    #dc2626;
    --blue:   #2563eb;

    /* Contact page vars (--dark used as body bg, --black as deepest surface) */
    --dark:  #f5f7fa;
    --black: #e8edf5;

    /* Login/account/admin shared tokens */
    --bg:           #f5f7fa;
    --sidebar:      #ffffff;
    --card-login:   #f0f4f9;
    --border-login: #d0daea;
    --orange:       #d97706;
    --orange-dim:   rgba(217,119,6,.1);
    --orange-border: rgba(217,119,6,.3);
    --text-main:    #0d1421;
    --text2-main:   #2d3f5a;
    --muted-main:   #5a6f8a;
    --danger:       #dc2626;
    --success:      #16a34a;

    /* Admin-specific tokens */
    --green-dim:  rgba(22,163,74,.08);
    --red-dim:    rgba(220,38,38,.07);
    --blue-dim:   rgba(37,99,235,.07);
    --purple-dim: rgba(124,58,237,.07);
  }

  /* ── Site shell nav ── */
  #bsn {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: rgba(0,0,0,.1) !important;
  }

  /* ── Hero ── */
  .hero::before {
    background: radial-gradient(ellipse, rgba(37,99,235,.05) 0%, transparent 70%) !important;
  }
  .hero-kicker {
    background: rgba(217,119,6,.08) !important;
    border-color: rgba(217,119,6,.2) !important;
  }

  /* ── Ticker ── */
  .ticker-wrap {
    background: var(--surface) !important;
  }

  /* ── Stats ── */
  .hero-stats { background: var(--surface) !important; }

  /* ── Tables ── */
  th { background: var(--surface) !important; }
  th.hi { background: rgba(217,119,6,.06) !important; }
  td.hi { background: rgba(217,119,6,.03) !important; }

  /* ── Feature hover ── */
  .feat:hover { background: var(--card) !important; }
  .step:hover { background: var(--card) !important; }

  /* ── Use cards ── */
  .use-card { background: var(--surface) !important; }

  /* ── Buttons ── */
  .btn-outline {
    color: var(--muted) !important;
    border-color: rgba(0,0,0,.2) !important;
  }
  .btn-outline:hover { color: var(--text) !important; border-color: var(--muted) !important; }
  .btn-hero-ghost {
    color: var(--text2) !important;
    border-color: rgba(0,0,0,.2) !important;
  }
  .btn-hero-ghost:hover { color: var(--text) !important; }

  /* ── Kicker dot ── */
  .kicker-dot { background: var(--amber) !important; }

  /* ── Login page ── */
  body {
    background: var(--bg) !important;
  }
  .sidebar {
    background: var(--sidebar) !important;
    border-right-color: var(--border-login) !important;
  }
  .logo-name  { color: #0d1421 !important; }
  .logo-sub   { color: var(--muted) !important; }
  .logo-box   { background: var(--orange) !important; }
  .feat-title { color: var(--muted) !important; }
  .feat-name  { color: #0d1421 !important; }
  .feat-desc  { color: var(--muted) !important; }
  .trial-badge {
    background: var(--orange-dim) !important;
    border-color: var(--orange-border) !important;
  }
  .trial-badge-title { color: var(--orange) !important; }
  .trial-badge-text  { color: var(--muted) !important; }

  /* ── Login main panel ── */
  .main { background: var(--bg) !important; }
  .heading h1 { color: #0d1421 !important; }
  .heading p  { color: var(--muted) !important; }
  .tabs {
    background: var(--card-login) !important;
    border-color: var(--border-login) !important;
  }
  .tab.active { background: #ffffff !important; color: #0d1421 !important; }
  .tab:not(.active) { color: var(--muted) !important; }
  .oauth-btn {
    background: var(--card-login) !important;
    border-color: var(--border-login) !important;
    color: #0d1421 !important;
  }
  .oauth-btn:hover { background: var(--surface) !important; }
  .divider-line { background: var(--border-login) !important; }
  .divider-text { color: var(--muted) !important; }
  input[type=email],
  input[type=password],
  input[type=text] {
    background: #ffffff !important;
    border-color: var(--border-login) !important;
    color: #0d1421 !important;
  }
  input::placeholder { color: #94a3b8 !important; }
  input:focus { border-color: var(--orange) !important; }
  label.lbl { color: var(--muted) !important; }
  .forgot { color: var(--orange) !important; }
  .check-text { color: var(--muted) !important; }
  .check-text a { color: var(--orange) !important; }
  .switch { color: var(--muted) !important; }
  .switch a { color: var(--orange) !important; }
  .alert.error {
    background: rgba(220,38,38,.07) !important;
    border-color: rgba(220,38,38,.2) !important;
    color: #b91c1c !important;
  }
  .alert.success {
    background: rgba(22,163,74,.07) !important;
    border-color: rgba(22,163,74,.2) !important;
    color: #15803d !important;
  }

  /* ── Plan step ── */
  .plan-card {
    background: var(--card-login) !important;
    border-color: var(--border-login) !important;
  }
  .plan-card.selected { border-color: var(--orange) !important; }
  .plan-name   { color: var(--text2) !important; }
  .plan-price  { color: #0d1421 !important; }
  .plan-period { color: var(--muted) !important; }
  .plan-divider { background: var(--border-login) !important; }
  .plan-feat   { color: var(--muted) !important; }
  .checkout-note { color: var(--muted) !important; }
  .checkout-note span { color: var(--orange) !important; }

  /* ── Modal ── */
  .modal-overlay { background: rgba(0,0,0,.4) !important; }
  .modal {
    background: #ffffff !important;
    border-color: var(--border-login) !important;
  }
  .modal h2 { color: #0d1421 !important; }
  .modal p  { color: var(--muted) !important; }
  .modal-close { color: var(--muted) !important; }

  /* ── Account page ── */
  .card  { background: #ffffff !important; border-color: var(--border-login) !important; }
  .card-header { border-bottom-color: var(--border-login) !important; }
  .card-title  { color: var(--muted) !important; }
  .info-label  { color: var(--muted) !important; }
  .info-value  { color: var(--text2) !important; }
  .info-row { border-bottom-color: var(--border-login) !important; }
  .plan-opt {
    background: var(--card-login) !important;
    border-color: var(--border-login) !important;
  }
  .plan-opt.current { border-color: var(--orange) !important; }
  .plan-opt.selected { border-color: var(--orange) !important; }
  .plan-name { color: var(--text2) !important; }
  .plan-price { color: #0d1421 !important; }
  .plan-period { color: var(--muted) !important; }
  .plan-feat  { color: var(--muted) !important; }
  #field-name, #field-email, #field-new-pw, #field-confirm-pw {
    background: #ffffff !important;
    border-color: var(--border-login) !important;
    color: #0d1421 !important;
  }
  .btn-ghost {
    background: transparent !important;
    border-color: rgba(0,0,0,.2) !important;
    color: var(--muted) !important;
  }
  .btn-ghost:hover { border-color: var(--muted) !important; color: #0d1421 !important; }
  .danger-zone {
    background: rgba(220,38,38,.05) !important;
    border-color: rgba(220,38,38,.15) !important;
  }
  .signout-row { border: none !important; }
  .signout-info { color: var(--muted) !important; }
  .signout-email { color: var(--text2) !important; }
  .trial-banner {
    background: rgba(217,119,6,.08) !important;
    border-color: rgba(217,119,6,.25) !important;
  }
  .trial-title { color: var(--orange) !important; }
  .trial-sub   { color: var(--text2) !important; }
  .trial-days  { color: var(--orange) !important; }
  .progress-track { background: var(--border-login) !important; }

  /* ── Terms / Privacy shared prose ── */
  .topbar {
    background: #ffffff !important;
    border-bottom-color: rgba(0,0,0,.1) !important;
  }
  .page-title { color: #0d1421 !important; }
  .page-meta  { color: var(--muted) !important; border-bottom-color: rgba(0,0,0,.1) !important; }
  .prose h2   { color: #0d1421 !important; }
  .prose h3   { color: var(--text2) !important; }
  .prose p, .prose li { color: var(--text2) !important; }
  .prose strong { color: #0d1421 !important; }
  .callout {
    background: var(--card-login) !important;
    border-color: rgba(0,0,0,.1) !important;
    border-left-color: var(--orange) !important;
    color: var(--text2) !important;
  }
  .footer {
    border-top-color: rgba(0,0,0,.1) !important;
    background: #f0f4f9 !important;
  }

  /* ── Contact page ── */
  .form-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.12) !important;
  }
  .form-title { color: #0d1421 !important; }
  .form-sub   { color: var(--muted) !important; }
  input, select, textarea {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,.15) !important;
    color: #0d1421 !important;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--amber) !important; }
  select option { background: #ffffff !important; color: #0d1421 !important; }
  label { color: var(--muted) !important; }
  .info-box {
    background: var(--surface) !important;
    border-color: rgba(0,0,0,.1) !important;
  }
  .info-label { color: var(--muted) !important; }
  .info-val   { color: var(--text2) !important; }
  .info-val a { color: var(--amber) !important; }
  .guarantee  { color: var(--text2) !important; }
  .g-check {
    background: rgba(22,163,74,.1) !important;
    color: var(--green) !important;
  }
  .alert-success {
    background: rgba(22,163,74,.07) !important;
    border-color: rgba(22,163,74,.2) !important;
    color: #15803d !important;
  }
  .alert-error {
    background: rgba(220,38,38,.07) !important;
    border-color: rgba(220,38,38,.2) !important;
    color: #b91c1c !important;
  }

  /* ── Inactivity modal (app/index.html) ── */
  #bahniq-idle-box {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.12) !important;
  }
  #bahniq-idle-title { color: #0d1421 !important; }
  #bahniq-idle-sub   { color: #5a6f8a !important; }
  #bahniq-idle-ring-track { stroke: #d0daea !important; }
  #bahniq-idle-signout    { color: #5a6f8a !important; }
  #bahniq-idle-overlay    { background: rgba(0,0,0,.45) !important; }

  /* ── Data table on privacy page ── */
  .data-table th {
    background: var(--surface) !important;
    color: #0d1421 !important;
    border-bottom-color: rgba(0,0,0,.1) !important;
  }
  .data-table td {
    color: var(--text2) !important;
    border-bottom-color: rgba(0,0,0,.07) !important;
  }

  /* ── nav-links on terms/privacy/contact pages ── */
  .nav-links a { color: var(--muted) !important; }
  .nav-links a:hover { color: #0d1421 !important; }
  .nav-links a.active { color: var(--amber) !important; }
  .btn-back {
    color: var(--muted) !important;
    border-color: rgba(0,0,0,.15) !important;
  }
  .btn-back:hover { color: #0d1421 !important; border-color: var(--muted) !important; }

  /* ── Admin page ── */
  .stat-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.1) !important;
  }
  .search-input, .filter-select {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.15) !important;
    color: #0d1421 !important;
  }
  .search-input::placeholder { color: #94a3b8 !important; }
  .user-table th {
    background: #eef1f6 !important;
    color: #0d1421 !important;
    border-bottom-color: rgba(0,0,0,.1) !important;
  }
  .user-table td { border-bottom-color: rgba(0,0,0,.06) !important; }
  .user-table tr:hover td { background: #f5f7fa !important; }
  .notice {
    background: rgba(217,119,6,.06) !important;
    border-color: rgba(217,119,6,.2) !important;
  }
  .notice code {
    background: rgba(0,0,0,.06) !important;
  }
}