/*
 * Qore AI SaaS Theme — Zeq.dev Integration
 * styles.css — Full Qore asset cascade with Zeq.dev color/brand overrides
 *
 * Load order (pages must load these in this exact sequence):
 *   1. /qore/fonts.css         — @font-face: Geist, DepartureMono, OverusedGrotesk
 *   2. /qore/bootstrap.min.css — Bootstrap 5 grid + utilities baseline
 *   3. /qore/animate.css       — Animate.css library (WOW.js animations)
 *   4. /qore/icomoon.css       — icomoon icon font with correct /qore/fonts/ paths
 *   5. /qore/odometer.css      — Odometer.js counter styles
 *   6. /qore/swiper.css        — Swiper carousel CSS
 *   7. /qore/styles.css        — This file: Qore vendor CSS + Zeq.dev overrides
 *
 * Zeq.dev overrides applied here:
 *   --accent / --primary → #00ff88 (Zeq green)
 *   --bg / background    → #050a0f / #0a0a0f (Zeq dark)
 *   Logo and brand name: never modified
 */

/* ── 1. Real Qore vendor design system ───────────────────── */
@import "/qore/qore-vendor.css";

/* ── 2. Zeq.dev Qore design extension ───────────────────── */
@import "/qore-zeq.css";

/* ── 3. Zeq.dev color overrides on Qore's CSS variables ──── */
:root {
  /* Override Qore's blue --primary with Zeq green */
  --primary:    #00ff88;
  --text-5:     #00ff88;

  /* Override ALL Qore background colour stops with Zeq dark palette */
  --main:       #000000;
  --bg:         #000000;
  --bg-2:       #0d1117;
  --bg-3:       #0d1117;
  --bg-4:       #0d1117;
  --bg-5:       #0d1117;
  --bg-6:       #0d1117;

  /* Override Qore accent/green scale */
  --bg-7:       #00ff88;
  --bg-8:       #00cc6a;
  --bg-9:       #00994f;
  --bg-10:      #006633;

  /* Force --white to Zeq dark surface for backgrounds that use it as bg */
  /* Note: --white is also used for text colour in qore-vendor — we target
     specific background-only usages via the overrides below instead       */
  --white:      #ffffff;   /* keep for text legibility */

  /* Override Qore border/line vars */
  --line:       rgba(0, 255, 136, 0.12);
}

/* Qore's .preload-container uses background:#ffffff — flip to dark */
.preload-container {
  background: #0a0a0f !important;
}

/* Qore vendor uses var(--bg) as a light surface in some utility classes;
   ensure any element that would inherit the old EEF5FF is dark instead  */
[class*="bg-bg"],
.bg-white,
.section-bg {
  background-color: var(--bg) !important;
}

/* Qore's --bg-surface divergence — unified with body dark, no alternation */
.qz-sect--alt {
  background: var(--main, #0a0a0f) !important;
}

/* ── Dark surface audit: override all Qore vendor blue/light surfaces ─── */
.tf-btn-tab.active,
.tf-btn-tab:hover {
  background: var(--primary) !important;
  color: #000 !important;
}

/* Any Qore element that uses hard-coded blue (#1B4EF5, #5997FF) */
.tf-btn.style-1,
[class*="tf-btn"].style-1 {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Overrides for any qore-vendor element with a white or near-white background */
.widget-tabs .tab-content,
.block-text,
.tf-section,
.widget-box {
  background-color: var(--bg, #000000) !important;
}

/* section-alt classes */
.section-bg,
.bg-3,
.bg-2 {
  background-color: var(--bg-2, #0d1117) !important;
}

/*
 * Zeq.dev CTA system — primary/secondary visual contract
 * All button classes site-wide converge to two visual states:
 *   PRIMARY:   green fill (#00ff88), dark text, green glow
 *   SECONDARY: dark surface, white text, green border on hover
 */

/* Primary CTA — tf-btn.style-2 canonical + all page aliases */
.tf-btn.style-2,
.sp-btn-primary,
.cp-btn-primary,
.iv-btn-primary,
button.sp-btn-primary,
.btn.btn-primary,
a.btn-primary {
  background-color: var(--primary) !important;
  color: #000 !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.2) !important;
}

.tf-btn.style-2:hover,
.sp-btn-primary:hover,
.cp-btn-primary:hover,
.iv-btn-primary:hover,
button.sp-btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover {
  background-color: #00e077 !important;
  color: #000 !important;
}

/* Secondary CTA — tf-btn.style-3/4 canonical + all page aliases */
.tf-btn.style-3,
.tf-btn.style-4,
.sp-btn-secondary,
.cp-btn-secondary,
.iv-btn-secondary,
.btn.btn-secondary,
a.btn-secondary {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
  color: var(--text-2, #fff) !important;
}

.tf-btn.style-3:hover,
.tf-btn.style-4:hover,
.sp-btn-secondary:hover,
.cp-btn-secondary:hover,
.iv-btn-secondary:hover,
.btn.btn-secondary:hover,
a.btn-secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}