/* ============================================
   THEME: Wealth Gold — LIGHT MODE
   Based on Economic Ninja Brand Color Guide.

   Brand Colors (extracted from logo):
     Ninja Black:    #1a1a1a  (text, headings, navbar)
     Ninja Red:      #c42020  (CTA buttons, urgency, energy)
     Ninja Gold:     #d4a017  (borders, icons, decorative)
     Dark Gold:      #8a6914  (text-safe gold — 4.5:1 on white)
     Charcoal:       #2d2d2d  (secondary text)
     Warm Gray:      #555555  (muted text)
     Warm White:     #ffffff  (backgrounds)
     Cream:          #f5f2eb  (section alternates)
   ============================================ */

:root {
  /* === BACKGROUNDS (light mode — white base) === */
  --black: #ffffff;
  --dark: #f5f2eb;
  --dark-gray: #edeae2;
  --medium-gray: #e3dfd5;
  --border: #d0cab8;

  /* === NAVBAR (stays dark for contrast + logo visibility) === */
  --navbar-bg: #1a1a1a;
  --navbar-text: #ffffff;
  --navbar-border: #333333;

  /* === TEXT (dark on light) === */
  --white: #1a1a1a;
  --text-muted: #4a4a4a;
  --text-faint: #777777;
  --light-gray: #2d2d2d;

  /* === ACCENT — NINJA GOLD (darkened for text readability) === */
  --accent: #8a6914;
  --accent-dim: #725810;
  --accent-glow: rgba(138, 105, 20, 0.10);
  --accent-glow-strong: rgba(138, 105, 20, 0.15);

  /* === DECORATIVE GOLD (borders, icons — not for text on white) === */
  --gold: #b8860b;
  --gold-light: #d4a017;

  /* === CTA — NINJA RED (from logo belt + bar chart) === */
  --green: #c42020;
  --green-dim: #a81b1b;
  --green-glow: rgba(196, 32, 32, 0.12);

  /* === DANGER / URGENCY === */
  --red: #c42020;
  --red-dark: #a81b1b;
  --red-glow: rgba(196, 32, 32, 0.08);

  /* System font stack — fast loading */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* === NAVBAR DARK OVERRIDE === */
.navbar {
  background: var(--navbar-bg) !important;
  border-bottom-color: var(--navbar-border) !important;
}
.navbar .navbar-logo-text,
.navbar .nav-cta {
  color: var(--navbar-text);
}

/* === ELEMENTS THAT NEED LITERAL WHITE TEXT ON COLORED BG === */
.pricing-badge {
  color: #ffffff !important;
}

/* === HERO SECTION — White background for contrast === */
.hero {
  background: #ffffff !important;
}
.hero-preheadline {
  color: var(--red) !important;
  font-weight: 800;
  letter-spacing: 2px;
}

/* === TRUST BAR DARK OVERRIDE (high contrast credibility bar) === */
.trust-bar {
  background: #1a1a1a !important;
  border-top-color: #333333 !important;
  border-bottom-color: #333333 !important;
}
.trust-item {
  color: #e0e0e0;
}
.trust-icon {
  color: var(--gold-light) !important;
}

/* === PROBLEM SECTION — Higher contrast quotes === */
.problem-list li {
  background: #ffffff;
  border-left: 4px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.problem-list li strong {
  color: #1a1a1a;
}
.problem-list li {
  color: #333333;
}

/* === INSTRUCTOR SECTION — Dark card for contrast === */
.instructor-card {
  background: #1a1a1a !important;
  border-color: var(--gold) !important;
  border-width: 2px;
}
.instructor-card h3 {
  color: #ffffff;
}
.instructor-card .instructor-title {
  color: var(--gold-light);
}
.instructor-card p {
  color: #cccccc;
}
.instructor-card .credential-list li {
  color: #bbbbbb;
}
.instructor-card .credential-list li::before {
  color: var(--gold-light);
}
.instructor-photo {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(184,134,11,0.3) !important;
}

/* === FOOTER DARK OVERRIDE (matches navbar) === */
.footer {
  background: var(--navbar-bg) !important;
  border-top-color: var(--navbar-border) !important;
}
.footer .footer-disclaimer,
.footer .footer-copy {
  color: #999999;
}
.footer .footer-links a {
  color: #bbbbbb;
}
.footer .footer-links a:hover {
  color: var(--gold-light);
}

/* === OFFER STACK HEADER — Dark bar for course title === */
.offer-stack-header {
  background: #1a1a1a !important;
  border-bottom: 2px solid var(--gold) !important;
}
.offer-stack-header h3 {
  color: #ffffff !important;
}

/* === FINAL CTA — Dark section with gold border to separate from footer === */
.final-cta-section {
  background: #222222 !important;
  border-bottom: 3px solid var(--gold) !important;
}
.final-cta-section h2 {
  color: #ffffff;
}
.final-cta-section p {
  color: #cccccc;
}
.final-cta-section .cta-subtext {
  color: #888888;
}

/* === STICKY MOBILE CTA (dark to match navbar) === */
.sticky-cta {
  background: var(--navbar-bg) !important;
  border-top-color: var(--navbar-border) !important;
}
.sticky-cta .sticky-price {
  color: #bbbbbb;
}