/*
Theme Name: LeoList Escort — Redesign
Theme URI: https://escort.leolist.vc
Template: escorts-theme
Author: LeoList
Description: Child theme of LeoList Classifieds. Ink-dark premium redesign for escort.leolist.vc.
             All functionality (dashboard, booking, wallet, listings, messaging) is inherited from
             the parent theme; only presentation is overridden here.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: leolist-escort
*/

/* ============================================================
   1. DESIGN TOKENS
   The parent theme drives every component from CSS custom properties,
   so redefining them here restyles all inherited templates at once.
   ============================================================ */
:root {
  /* new palette — ink base, champagne accent */
  --el-bg:          #0c0e13;
  --el-surface:     #151922;
  --el-surface-2:   #1e2430;
  --el-line:        #2a3140;
  --el-text:        #eceff5;
  --el-muted:       #9aa3b5;
  --el-accent:      #e3b664;
  --el-accent-dark: #c2954a;
  --el-success:     #34d399;
  --el-danger:      #f87171;
  --el-radius:      14px;
  --el-radius-sm:   10px;

  /* --- override the parent's own tokens so inherited components follow --- */
  --primary-gradient:  linear-gradient(135deg, #e3b664 0%, #c2954a 100%);
  --primary-color:     #e3b664;
  --primary-dark:      #c2954a;
  --accent-color:      #e3b664;
  --accent-dark:       #c2954a;
  --premium-red:       #e3b664;
  --premium-dark-red:  #c2954a;
  --premium-gold:      linear-gradient(135deg, #e3b664 0%, #c2954a 100%);
  --premium-border:    linear-gradient(135deg, #e3b664 0%, rgba(255,255,255,.2) 50%, #e3b664 100%);
  --ll-accent:         #e3b664;
  --ll-accent-dark:    #c2954a;
  --dark-bg:           #0c0e13;
  --nav-bg:            #0c0e13;
  --nav-link-color:    #eceff5;
  --nav-link-hover:    #e3b664;
  --card-shadow:       0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --card-shadow-hover: 0 2px 6px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.45);
}

/* ============================================================
   2. BASE
   ============================================================ */
body {
  background: var(--el-bg);
  color: var(--el-text);
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .site-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--el-text);
  letter-spacing: -.01em;
}
a { color: var(--el-accent); }
a:hover { color: var(--el-accent-dark); }
hr, .divider { border-color: var(--el-line); }

/* Tailwind utility surfaces used by the parent, remapped to the dark scale */
.bg-white        { background-color: var(--el-surface) !important; }
.bg-gray-50,
.bg-gray-100     { background-color: var(--el-surface-2) !important; }
.text-gray-900,
.text-gray-800   { color: var(--el-text) !important; }
.text-gray-600,
.text-gray-500   { color: var(--el-muted) !important; }
.border-gray-200,
.border-gray-300 { border-color: var(--el-line) !important; }
.shadow, .shadow-md, .shadow-lg { box-shadow: var(--card-shadow) !important; }

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.site-header, header.site-header, .navbar, .top-bar {
  background: var(--el-bg);
  border-bottom: 1px solid var(--el-line);
}
.nav a, .navbar a { color: var(--el-text); }
.nav a:hover, .navbar a:hover { color: var(--el-accent); }

/* ============================================================
   4. CARDS / LISTINGS
   ============================================================ */
.ad-card, .listing-card, .profile-card, .feature-card, .info-box {
  background: var(--el-surface);
  border: 1px solid var(--el-line);
  border-radius: var(--el-radius);
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ad-card:hover, .listing-card:hover, .profile-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--el-accent);
}
.ad-card-image-wrapper, .listing-card img {
  border-radius: var(--el-radius) var(--el-radius) 0 0;
}
.badge, .tag, .chip {
  background: var(--el-surface-2);
  color: var(--el-accent);
  border: 1px solid var(--el-line);
  border-radius: 999px;
}

/* ============================================================
   5. BUTTONS / FORMS
   ============================================================ */
.btn, .button, button.primary, input[type="submit"] {
  background: var(--primary-gradient);
  color: #14161c;
  font-weight: 700;
  border: none;
  border-radius: var(--el-radius-sm);
}
.btn:hover, .button:hover, input[type="submit"]:hover { filter: brightness(1.07); }
.btn-outline, .button.secondary {
  background: transparent;
  color: var(--el-accent);
  border: 1px solid var(--el-accent);
}
input, select, textarea {
  background: var(--el-surface-2) !important;
  color: var(--el-text) !important;
  border: 1px solid var(--el-line) !important;
  border-radius: var(--el-radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--el-muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--el-accent) !important;
  box-shadow: 0 0 0 3px rgba(227,182,100,.18);
}

/* ============================================================
   6. HERO / SECTION HEADERS
   ============================================================ */
.hero {
  background: radial-gradient(1200px 400px at 50% -120px, rgba(227,182,100,.16), transparent 70%), var(--el-bg);
  border-bottom: 1px solid var(--el-line);
}
.hero h1 { color: var(--el-text); }
.hero p  { color: var(--el-muted); }
.section-header h2 {
  color: var(--el-text);
  border-left: 3px solid var(--el-accent);
  padding-left: 12px;
}
.stats .stat-number { color: var(--el-accent); }
.stats .stat-label  { color: var(--el-muted); }

/* ============================================================
   7. FOOTER
   ============================================================ */
.footer, footer.footer {
  background: #08090d;
  border-top: 1px solid var(--el-line);
  color: var(--el-muted);
}
.footer a { color: var(--el-muted); }
.footer a:hover { color: var(--el-accent); }

/* ============================================================
   8. ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--el-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}