/* ==========================================================================
   WEKID Certification — Light + Gold + Inter theme overlay
   --------------------------------------------------------------------------
   Loaded LAST in store_header.php, header.php and admin_header.php so it
   overrides the original dark theme WITHOUT modifying the app's own
   stylesheets (styles.css / exam.css / store.css / admin.css). Remove the
   three <link> lines (and this file) to revert.
   Palette matches the marketing site: light surfaces, gold accents, Inter.
   ========================================================================== */

:root {
  /* core */
  --bg:#eef1f6; --bg-2:#e7ebf3; --bg-deep:#eef1f6; --bg-1:#ffffff; --bg-elevated:#ffffff;
  --panel:#ffffff; --panel-strong:#ffffff;
  --line:rgba(176,141,42,.28); --line-strong:rgba(176,141,42,.42); --border:rgba(176,141,42,.28);
  --text:#15213a; --muted:#5b6a85;
  --accent:#8a6d18; --accent-2:#b8902f; --accent-3:#0f9d6b; --accent-4:#b4791b;
  --good:#0f9d6b; --bad:#d2233f; --danger:#d2233f; --warn:#b4791b;
  --shadow:0 18px 40px rgba(18,32,53,.12);
  --serif:'Inter',system-ui,-apple-system,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  /* store-scoped */
  --store-bg:#eef1f6; --store-card:#ffffff; --store-border:rgba(176,141,42,.28);
  --store-text:#15213a; --store-muted:#5b6a85; --store-accent:#8a6d18; --store-accent-2:#b8902f;
  --store-good:#0f9d6b; --store-warn:#b4791b; --store-bad:#d2233f;
}

/* ----- Base surface + typography ----- */
html, body { background:#eef1f6 !important; }
body {
  background: radial-gradient(1200px 600px at 50% -220px,#ffffff,transparent 70%), #eef1f6 !important;
  color:var(--text) !important;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif !important;
}
h1,h2,h3,h4,h5,h6,
.store-hero h1,.store-card h2,.store-card h3,.exam-title,.result-title {
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  color:var(--text) !important;
}
a { color:var(--accent); }
.eyebrow,.kicker { color:var(--accent) !important; }

/* ----- Headers (store / exam / generic) ----- */
.site-header,.store-header,.exam-header,header.site-header {
  background:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(176,141,42,.28) !important;
  color:var(--text) !important;
}

/* ----- Admin chrome ----- */
.admin-body { background:#eef1f6 !important; }
.admin-topbar {
  background:rgba(255,255,255,.95) !important;
  border-bottom:1px solid rgba(176,141,42,.28) !important;
  color:var(--text) !important;
}
.admin-nav a { color:var(--muted) !important; }
.admin-nav a:hover { color:var(--text) !important; background:rgba(176,141,42,.08) !important; }
.admin-nav a.active { color:var(--accent) !important; background:rgba(212,175,55,.14) !important; }
.admin-user { color:var(--muted) !important; }

/* ----- Cards, panels, surfaces ----- */
.card,.panel,.panel.soft,.store-card,.exam-card,.result-card,
.author-card,.book-card,.contact-card,.pricing-card,.quote-card,.stat-card,
.token-card,.attempt-card,.question-card,.admin-card,.admin-panel,
.note,.alert {
  background:#ffffff !important;
  border:1px solid rgba(176,141,42,.28) !important;
  box-shadow:0 10px 28px rgba(18,32,53,.08) !important;
  color:var(--text) !important;
}

/* ----- Tables (admin) ----- */
.table-wrap { background:#ffffff !important; border:1px solid rgba(176,141,42,.28) !important; }
.admin-table,table.admin-table { color:var(--text) !important; }
.admin-table th { background:rgba(176,141,42,.08) !important; color:var(--muted) !important; border-bottom-color:rgba(176,141,42,.28) !important; }
.admin-table td { border-bottom-color:rgba(176,141,42,.16) !important; }
.admin-table tr:hover td { background:rgba(176,141,42,.05) !important; }

/* ----- Form fields ----- */
input,select,textarea {
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid rgba(176,141,42,.4) !important;
}
input::placeholder,textarea::placeholder { color:#94a0b5 !important; }

/* ----- Buttons -> gold gradient, dark text ----- */
.btn,.cj-btn,.store-btn,.btn-primary,.btn.primary,button.primary,.admin-btn,.action-btn {
  background:linear-gradient(135deg,#d4af37,#b8902f) !important;
  color:#2a2008 !important;
  border:1px solid rgba(176,141,42,.35) !important;
}
.btn.ghost,.btn.secondary,.btn-secondary,.store-btn.ghost,.btn.outline {
  background:#ffffff !important; color:#8a6d18 !important; border:1px solid rgba(176,141,42,.5) !important;
}

/* ----- Badges / pills -> gold (with semantic variants) ----- */
.badge,.badge-pill,.chip,.pill,.tag {
  background:rgba(212,175,55,.14) !important;
  color:#8a6d18 !important;
  border:1px solid rgba(176,141,42,.35) !important;
}
.badge.green,.badge.success,.badge-pill.used,.badge-pill.passed,.badge-pill.active {
  background:rgba(15,157,107,.14) !important; color:#0a7a52 !important; border-color:rgba(15,157,107,.3) !important;
}
.badge.danger,.badge.bad,.badge-pill.failed,.badge-pill.expired {
  background:rgba(210,35,63,.12) !important; color:#b21d35 !important; border-color:rgba(210,35,63,.3) !important;
}
.badge.warn,.badge-pill.pending {
  background:rgba(180,121,27,.14) !important; color:#8a5a10 !important; border-color:rgba(180,121,27,.3) !important;
}

/* ----- Misc dark remnants ----- */
.stat-card,[class*="stat-card"] { background:#ffffff !important; }
.focus-overlay { background:rgba(18,32,53,.55) !important; }  /* lockdown dim: kept as a neutral scrim */

/* ----- Keep monospace for credential codes, dark/gold text ----- */
.code,.token-code,.cred-code,code,.mono { font-family:'JetBrains Mono','Menlo',monospace; color:var(--accent-2); }