/* ============================================================================
   OakQuant Acorn — shared theme, matched to sky's "oak forest-glass" design.
   Loaded AFTER each template's inline <style>, so it re-skins the shared
   visual language (background, type, cards, buttons, hero, accents) without
   rewriting every page. Class names mirror the existing templates.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg-base: #080e14;
  --bg-raise: #0d141c;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --brand-cyan: #00f2ff;
  --brand-teal: #14b8a6;
  --brand-teal-dim: #0d9488;
  --brand-green: #10b981;
  --brand-green-light: #4ade80;
  --brand-gold: #f5c842;
  --glass-card: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(20, 184, 166, 0.45);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ---- base ---------------------------------------------------------------- */
html, body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100%;
}
/* ambient forest-glass glow behind everything (matches sky's living bg) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 60rem at 12% -10%, rgba(20, 184, 166, 0.14), transparent 60%),
    radial-gradient(50rem 50rem at 100% 0%, rgba(0, 242, 255, 0.10), transparent 55%),
    radial-gradient(70rem 70rem at 50% 120%, rgba(16, 185, 129, 0.12), transparent 60%);
}
a { color: var(--brand-cyan); }
::selection { background: rgba(20, 184, 166, 0.35); }

/* ---- headings / hero ----------------------------------------------------- */
h1, h2, h3, .section-title, .hero h1 { color: var(--text-primary) !important; letter-spacing: -0.02em; }
.hero {
  background:
    linear-gradient(180deg, rgba(13, 20, 28, 0.6), rgba(8, 14, 20, 0.2)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.hero h1, .logo, .login-header h1, .header-logo {
  background: linear-gradient(135deg, var(--brand-green-light), var(--brand-cyan)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.tagline { color: var(--brand-teal) !important; font-weight: 600 !important; }
.subtitle, .section-description, .feature-description, .action-description,
.tool-description, .agent-description, .stat-label { color: var(--text-secondary) !important; }

/* ---- glass cards (every card variant the templates use) ------------------ */
.feature-card, .action-card, .tool-card, .agent-card, .stat-card, .stat-item,
.panel, .result-box, .example-box, .demo-credentials, .login-container,
.chat-container, .tab-content, .parameter-item, .detail-item, .doc-tree {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feature-card:hover, .action-card:hover, .tool-card:hover, .agent-card:hover,
.stat-card:hover, .panel:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 14px 40px rgba(20, 184, 166, 0.18) !important;
}

/* stats numbers + section accents */
.stat-value { color: var(--brand-cyan) !important; font-weight: 800 !important; }
.feature-icon, .action-icon, .tool-icon, .agent-icon, .stat-icon { filter: drop-shadow(0 0 14px rgba(20,184,166,0.35)); }

/* ---- buttons ------------------------------------------------------------- */
.btn, .btn-primary, .login-button, .api-link, .back-to-top, .icon-button {
  font-family: inherit !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary, .login-button {
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-cyan)) !important;
  color: #04141a !important; border: none !important;
  box-shadow: 0 6px 20px rgba(0, 242, 255, 0.22) !important;
}
.btn-primary:hover, .login-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-secondary, .back-link, .footer-link {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
}

/* ---- tags / chips / badges ---------------------------------------------- */
.tag, .chip, .badge, .status-badge, .source-type-badges span, .suggestion-chips .chip {
  background: rgba(20, 184, 166, 0.12) !important;
  border: 1px solid rgba(20, 184, 166, 0.30) !important;
  color: var(--brand-green-light) !important;
  border-radius: 999px !important;
}
.status-active, .status.active { color: var(--brand-green-light) !important; }

/* ---- header / footer / nav ---------------------------------------------- */
.header, .chat-header, .tool-header, .agent-header, .login-header, .header-content {
  border-color: var(--glass-border) !important;
}
.footer { color: var(--text-secondary) !important; border-top: 1px solid var(--glass-border) !important; }

/* ---- forms (login etc.) -------------------------------------------------- */
input, textarea, select, .search-box, .chat-input-wrapper {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18) !important;
}