@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

/* ── Logo: cyan circular badge ── */
.logo {
  background: var(--cyan) !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  color: #000 !important;
}

/* ── Light theme overrides ── */
:root[data-theme="light"] {
  --bg:        #f8fafc;
  --bg1:       #ffffff;
  --bg2:       #f1f5f9;
  --bg3:       #e2e8f0;
  --bg4:       #cbd5e1;
  --border:    #e2e8f0;
  --border2:   #cbd5e1;
  --accent:    #5B4FD4;
  --blue:      #2563eb;
  --green:     #16a34a;
  --green2:    #15803d;
  --green-bg:  rgba(22,163,74,0.10);
  --green-border: rgba(22,163,74,0.25);
  --red:       #dc2626;
  --red2:      #b91c1c;
  --red-bg:    rgba(220,38,38,0.10);
  --red-border:rgba(220,38,38,0.25);
  --yellow:    #d97706;
  --yellow-bg: rgba(217,119,6,0.10);
  --cyan:      #0284c7;
  --text:      #0f172a;
  --dim:       #334155;
  --muted:     #64748b;
}

/* ── Nav background ── */
:root[data-theme="light"] nav {
  background: rgba(248,250,252,0.97);
  border-bottom-color: var(--border);
}
@media (max-width: 768px) {
  :root[data-theme="light"] .nav-links {
    background: rgba(248,250,252,0.98);
    border-bottom-color: var(--border);
  }
  :root[data-theme="light"] .tz-nav-links {
    background: rgba(248,250,252,0.98);
  }
}

/* ── Brand / logo text ── */
:root[data-theme="light"] .brand,
:root[data-theme="light"] .nav-brand { color: var(--text); }

/* ── Nav links ── */
:root[data-theme="light"] .nl        { color: var(--dim); }
:root[data-theme="light"] .nl:hover  { color: var(--text); background: var(--bg3); }
:root[data-theme="light"] .nl.on     { color: var(--accent); background: rgba(91,79,212,0.1); }
:root[data-theme="light"] .nav-link  { color: var(--dim); }
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.active { color: var(--accent); }

/* ── Nav badge ── */
:root[data-theme="light"] .nav-badge {
  color: var(--dim);
  background: var(--bg3);
  border-color: var(--border);
}

/* ── All hardcoded #fff headings ── */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4 { color: var(--text); }

:root[data-theme="light"] .hero h1 em { color: var(--accent); }

/* ── Section / card headings ── */
:root[data-theme="light"] .section-title h2,
:root[data-theme="light"] .panel-title,
:root[data-theme="light"] .tool-card h3,
:root[data-theme="light"] .dc-title,
:root[data-theme="light"] .sb-title,
:root[data-theme="light"] .ph-time,
:root[data-theme="light"] .ltp-display,
:root[data-theme="light"] .sig-name,
:root[data-theme="light"] .card-title { color: var(--text); }

/* ── Learn chapter pages: div/span elements with hardcoded #fff ── */
:root[data-theme="light"] .ch-hero h1,
:root[data-theme="light"] .section h2,
:root[data-theme="light"] .section h3,
:root[data-theme="light"] .sb .st,
:root[data-theme="light"] .tk-title,
:root[data-theme="light"] .qcta-left h4,
:root[data-theme="light"] .pn-label,
:root[data-theme="light"] .ch-title { color: var(--text) !important; }

/* ── Learn dashboard: hardcoded #fff on div elements ── */
:root[data-theme="light"] .lh-title,
:root[data-theme="light"] .sp-val,
:root[data-theme="light"] .cc-title { color: var(--text) !important; }

/* ── Footer brand ── */
:root[data-theme="light"] .fbrand span,
:root[data-theme="light"] .flogo + span { color: var(--dim); }

/* ── tz-nav pages ── */
:root[data-theme="light"] .tz-nav {
  background: rgba(248,250,252,0.97);
  border-bottom-color: var(--border);
}
:root[data-theme="light"] .tz-nav a       { color: var(--dim); }
:root[data-theme="light"] .tz-nav a:hover { color: var(--text); }
:root[data-theme="light"] .tz-logo-text   { color: var(--text); }
:root[data-theme="light"] .tz-nav-chip {
  color: var(--accent);
  border-color: var(--border);
  background: var(--bg3);
}

/* ── Inline style overrides (diagram labels, chart panels, etc.) ── */
:root[data-theme="light"] .hero h1[style*="color:#fff"],
:root[data-theme="light"] span[style*="color:#fff"],
:root[data-theme="light"] div[style*="color:#fff"],
:root[data-theme="light"] td[style*="color:#fff"],
:root[data-theme="light"] p[style*="color:#fff"] { color: var(--text) !important; }

/* ── F&O Scanner table ── */
:root[data-theme="light"] .sym,
:root[data-theme="light"] .ltp,
:root[data-theme="light"] .modal-sym { color: var(--text); }

/* ── Notification banner ── */
:root[data-theme="light"] .notif-banner {
  background: rgba(91,79,212,0.07);
  border-bottom-color: rgba(91,79,212,0.25);
}
:root[data-theme="light"] .notif-text        { color: var(--dim); }
:root[data-theme="light"] .notif-btn-enable {
  background: rgba(91,79,212,0.12);
  border-color: rgba(91,79,212,0.4);
  color: var(--accent);
}
:root[data-theme="light"] .notif-btn-dismiss { color: var(--muted); }

/* ── Theme toggle icon ── */
#themeToggle::after                          { content: "☀️"; }
:root[data-theme="light"] #themeToggle::after { content: "🌙"; }

/* ── Language toggle button ── */
#langToggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 30px;
  min-width: 50px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  font-family: 'Noto Sans Tamil', 'Inter', sans-serif;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
#langToggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Tamil body font ── */
[data-lang="ta"] body {
  font-family: 'Noto Sans Tamil', 'DM Sans', sans-serif;
}

/* ── Scrollbar ── */
:root[data-theme="light"] * {
  scrollbar-color: var(--bg3) var(--bg2);
}

/* ── Tool pages using tutorial-halo.css (cup_handle, swing, etc.) ── */
/* Variables handle most colours; these cover elements with hardcoded rgba backgrounds */
:root[data-theme="light"] .single-result,
:root[data-theme="light"] .card {
  background: var(--bg2);
  border-color: var(--border2);
}
:root[data-theme="light"] .detail-card,
:root[data-theme="light"] .met,
:root[data-theme="light"] .sb-item,
:root[data-theme="light"] .score-reasons,
:root[data-theme="light"] .results-count {
  background: var(--bg3);
  border-color: var(--border);
}
:root[data-theme="light"] .targets {
  background: var(--bg4);
}
:root[data-theme="light"] .period-hint,
:root[data-theme="light"] #periodHint {
  background: var(--bg3);
  border-left-color: var(--accent);
}
:root[data-theme="light"] .inp {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text);
}
:root[data-theme="light"] .btn-secondary {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--dim);
}
:root[data-theme="light"] .tab {
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="light"] .tab.active {
  background: rgba(91,79,212,0.08);
  border-color: rgba(91,79,212,0.3);
  color: var(--accent);
}
:root[data-theme="light"] .ph-badge {
  background: rgba(91,79,212,0.08);
  border-color: rgba(91,79,212,0.25);
}
:root[data-theme="light"] .stage-badge.complete    { background: rgba(22,163,74,0.08); }
:root[data-theme="light"] .stage-badge.handle_forming { background: rgba(217,119,6,0.08); }
:root[data-theme="light"] .stage-badge.cup_complete { background: rgba(91,79,212,0.08); }
:root[data-theme="light"] .stage-badge.early_cup   { background: rgba(100,116,139,0.08); color: var(--muted); }

/* ── tz-footer light theme ── */
:root[data-theme="light"] .tz-footer {
  background: var(--bg2);
  border-top-color: var(--border);
}
:root[data-theme="light"] .tz-footer-desc,
:root[data-theme="light"] .tz-footer-copy { color: var(--muted); }
:root[data-theme="light"] .tz-footer-links a { color: var(--dim); }
:root[data-theme="light"] .tz-footer-links a:hover { color: var(--text); }
:root[data-theme="light"] .tz-logo-text { color: var(--text); }
:root[data-theme="light"] .tz-logo-text span { color: var(--accent); }
:root[data-theme="light"] .tz-logo-mark { background: var(--accent); color: #fff; }

/* ── Cup & Handle scan table ── */
:root[data-theme="light"] .scan-table th { background: var(--bg3); }
:root[data-theme="light"] .scan-table tbody tr:hover td { background: var(--bg2); }
:root[data-theme="light"] .table-title { color: var(--muted); }

/* ── orbs / grid: reduce opacity in light mode instead of hiding ── */
:root[data-theme="light"] .tz-bg-orb { opacity: 0.08; }
:root[data-theme="light"] .tz-grid   { opacity: 0.4; }