/* ============================================================
   IndiAI Tools — PEARL THEME
   Frost white base · Electric Indigo accents · Premium feel
   Switch via config.php: define('THEME', 'pearl');
   ============================================================ */

:root {
  --bg:         #f7f8fc;
  --bg2:        #eff1f9;
  --bg3:        #e5e8f4;
  --border:     #d2d7ee;
  --border2:    #a8b0d8;
  --text:       #0f1133;
  --text2:      #2e3467;
  --text3:      #6b73a8;
  --accent:     #4338ca;
  --accent2:    #9333ea;
  --accent3:    #0891b2;
  --red:        #dc2626;
  --yellow:     #d97706;
  --card-bg:    #ffffff;
  --card-hover: #f3f4fc;
  --shadow:     0 4px 24px rgba(67,56,202,.1);
  --shadow-lg:  0 8px 48px rgba(67,56,202,.18);
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
}

a { color: var(--accent); }
a:hover { color: #6d28d9; }

::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  background: rgba(247,248,252,.96);
  backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(67,56,202,.06);
}
.logo-text {
  background: linear-gradient(135deg, #4338ca, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-logo { color: var(--text); }
.nav-link { color: var(--text2); }
.nav-link:hover { color: var(--text); background: var(--bg3); }
.nav-link.active { color: var(--accent); }
.search-input {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text);
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(67,56,202,.12);
  background: var(--card-bg);
}
.search-btn {
  background: var(--bg3); border-color: var(--border); color: var(--text2);
}
.search-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.hamburger span { background: var(--text2); }

/* ── Ticker ───────────────────────────────────────────────── */
.ticker { background: var(--bg2); border-color: var(--border); }
.ticker-item { color: var(--text3); }
.ticker-item:hover { color: var(--accent); }
.ticker-item span { color: var(--accent); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg,
    #eef0fd 0%,
    #f7f8fc 45%,
    #f0f7fd 100%);
}
.hero-glow {
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(67,56,202,.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 80% 40%, rgba(147,51,234,.08) 0%, transparent 60%);
}
.hero-grid { opacity: .035; }
.hero-badge {
  background: rgba(67,56,202,.08);
  border-color: rgba(67,56,202,.2);
  color: var(--accent);
}
.badge-pulse { background: var(--accent3); }
.hero h1 em {
  background: linear-gradient(135deg, #4338ca, #9333ea 60%, #0891b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub { color: var(--text2); }
.hero-stats { border-top-color: var(--border); }
.hero-stat .num { color: var(--accent); }
.hero-stat .lbl { color: var(--text3); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(67,56,202,.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(67,56,202,.45);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border2);
  color: var(--text2);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(67,56,202,.06);
  box-shadow: 0 4px 16px rgba(67,56,202,.1);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(67,56,202,.06);
}
.card::before {
  background: radial-gradient(ellipse at top left, rgba(67,56,202,.06), transparent 60%);
}
.card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  box-shadow: var(--shadow);
}
.tool-card-icon {
  background: linear-gradient(135deg, #eef0fd, #e5e8f4);
  border-color: var(--border2);
}
.tool-card-name { color: var(--text); }
.tool-card-tagline { color: var(--text2); }

/* ── Category cards ───────────────────────────────────────── */
.cat-card {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
}
.cat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  color: var(--text);
}
.cat-count { color: var(--text3); }

/* ── Tags ─────────────────────────────────────────────────── */
.tag-free    { background: rgba(8,145,178,.08); color: #0891b2; border-color: rgba(8,145,178,.2); }
.tag-paid    { background: rgba(217,119,6,.08);  color: #d97706; border-color: rgba(217,119,6,.2); }
.tag-freemium{ background: rgba(67,56,202,.08);  color: #4338ca; border-color: rgba(67,56,202,.2); }

/* ── Section headers ──────────────────────────────────────── */
.section-header h2 { color: var(--text); }
.section-header p { color: var(--text2); }
.section-header .see-all { color: var(--accent); }

/* ── Page hero (inner pages) ──────────────────────────────── */
.page-hero { border-bottom-color: var(--border); }
.page-hero .breadcrumb { color: var(--text3); }
.page-hero .breadcrumb a { color: var(--text3); }
.page-hero .breadcrumb a:hover { color: var(--accent); }
.page-hero h1 { color: var(--text); }
.page-hero p { color: var(--text2); }

/* ── Sidebar cards ────────────────────────────────────────── */
.sidebar-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(67,56,202,.05);
}
.sidebar-card h3 { color: var(--text); }
.info-list li { border-bottom-color: var(--border); }
.info-list .lbl { color: var(--text3); }
.info-list .val { color: var(--text); }

/* ── Tool header ──────────────────────────────────────────── */
.tool-header-icon {
  background: linear-gradient(135deg, #eef0fd, #e5e8f4);
  border-color: var(--border2);
}
.tool-header-info h1 { color: var(--text); }

/* ── Prose ────────────────────────────────────────────────── */
.prose h2 { color: var(--text); }
.prose h3 { color: var(--text2); }
.prose p  { color: var(--text2); }
.prose ul { color: var(--text2); }

/* ── Comparison ───────────────────────────────────────────── */
.comp-card {
  background: var(--card-bg);
  border-color: var(--border);
}
.comp-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.comp-vs-badge {
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text3);
}
.comp-title { color: var(--text2); }

/* ── User reviews ─────────────────────────────────────────── */
.user-review {
  background: var(--bg2);
  border-color: var(--border);
}
.review-text { color: var(--text2); }
.reviewer-name { color: var(--text); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-item { border-color: var(--border); }
.faq-q { color: var(--text); }
.faq-a { color: var(--text2); }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.footer-col h4 { color: var(--text); }
.footer-col a { color: var(--text3); }
.footer-col a:hover { color: var(--accent); }
.footer-copy { color: var(--text3); }
.footer-copy a { color: var(--accent); }

/* ── Dividers ─────────────────────────────────────────────── */
.divider { border-top-color: var(--border); }

/* ── Stats row in admin / cron ────────────────────────────── */
.stat-card {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(67,56,202,.06);
}
.stat-num { color: var(--accent); }

/* ── Pill / integration badges ────────────────────────────── */
.pill {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--text2);
}
.pill-linked {
  background: rgba(67,56,202,.08);
  border-color: rgba(67,56,202,.25);
  color: var(--accent);
}

/* ── Mobile nav ───────────────────────────────────────────── */
.nav-mobile {
  background: var(--bg2);
  border-top-color: var(--border);
}

/* ── Integration linked pill ──────────────────────────────── */
.pill-int-linked {
  background: rgba(67,56,202,.08);
  border-color: rgba(67,56,202,.3);
  color: var(--accent);
}
.pill-int-linked:hover {
  background: rgba(67,56,202,.15);
  color: var(--accent);
}