/* ============================================================================
   MedLearno unified design tokens — SAFE to load on EVERY page.
   This file contains ONLY CSS custom properties (+ a couple of tiny helpers).
   It deliberately sets no base body/element layout or typography rules, so it
   can load app-wide without the side effects that keep ml-design-system.css
   scoped to the homepage. New Gen-Z UI components (bottom nav, progress header,
   for-you feed, result card, flashcards) read from these tokens.
   ========================================================================== */

:root {
  /* Portal accent (default = main blue; per-portal overrides below).
     Mirrors ml_portal_accent() in inc/portal-detect.php. */
  --pa:        #3b82f6;
  --pa-dk:     #1d4ed8;
  --pa-lt:     #60a5fa;
  --pa-rgb:    59, 130, 246;
  --pa-wash:   rgba(59, 130, 246, .08);

  /* Neutral surfaces (light theme) */
  --ml-surface:        #ffffff;
  --ml-surface-2:      #f8fafc;
  --ml-surface-border: #e6e8ec;
  --ml-text:           #0f172a;
  --ml-text-muted:     #64748b;

  /* App-shell + component metrics */
  --ml-nav-h:       62px;
  --ml-radius:      14px;
  --ml-radius-lg:   20px;
  --ml-radius-pill: 999px;
  --ml-shadow-card: 0 2px 12px rgba(15, 23, 42, .06);
  --ml-shadow-pop:  0 10px 34px rgba(15, 23, 42, .16);
  --ml-ease:        cubic-bezier(.22, .61, .36, 1);
  --ml-t:           .2s var(--ml-ease);

  /* Semantic feedback (shared with practice combo / results) */
  --ml-good:   #22c55e;
  --ml-bad:    #ef4444;
  --ml-warm:   #f59e0b;
  --ml-flame:  #ff7a3c;
}

/* Per-portal accent — one class added app-wide by the body_class filter. */
body.portal-main, body.portal-phy, body.portal-institute {
  --pa:#3b82f6; --pa-dk:#1d4ed8; --pa-lt:#60a5fa; --pa-rgb:59,130,246; --pa-wash:rgba(59,130,246,.08);
}
body.portal-qb   { --pa:#6366f1; --pa-dk:#4f46e5; --pa-lt:#818cf8; --pa-rgb:99,102,241;  --pa-wash:rgba(99,102,241,.08); }
body.portal-bio  { --pa:#10b981; --pa-dk:#059669; --pa-lt:#34d399; --pa-rgb:16,185,129;  --pa-wash:rgba(16,185,129,.08); }
body.portal-che  { --pa:#22c55e; --pa-dk:#16a34a; --pa-lt:#4ade80; --pa-rgb:34,197,94;   --pa-wash:rgba(34,197,94,.08); }
body.portal-math { --pa:#ef4444; --pa-dk:#dc2626; --pa-lt:#f87171; --pa-rgb:239,68,68;   --pa-wash:rgba(239,68,68,.08); }

/* Shareable-card modal (results + referral) — reused by assets/js/ml-share-card.js. */
.ml-sc-overlay{position:fixed;inset:0;background:rgba(15,23,42,.75);z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ml-sc-modal{background:var(--ml-surface,#fff);border-radius:20px;padding:18px;max-width:360px;width:100%;max-height:94vh;overflow:auto;text-align:center;box-shadow:var(--ml-shadow-pop,0 10px 34px rgba(15,23,42,.16))}
.ml-sc-loading{padding:70px 0;color:var(--ml-text-muted,#64748b);font-weight:600}
.ml-sc-preview{width:100%;max-width:258px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.22);margin:0 auto 10px;display:block}
.ml-sc-hint{font-size:12px;color:var(--ml-text-muted,#64748b);margin-bottom:14px}
.ml-sc-actions{display:flex;flex-direction:column;gap:9px}
.ml-sc-btn{display:block;text-decoration:none;text-align:center;padding:13px;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer;border:1.5px solid var(--ml-surface-border,#e2e8f0);background:var(--ml-surface,#fff);color:var(--ml-text,#334155)}
.ml-sc-btn.primary{background:linear-gradient(135deg,#833ab4,#e1306c 55%,#f77737);color:#fff;border:none}
.ml-sc-btn.ig{background:#fff;color:#e1306c;border-color:#f5aacb}
.ml-sc-btn.wa{background:#22c55e;color:#fff;border-color:#22c55e}
.ml-sc-btn.ghost{background:transparent;border:none;color:var(--ml-text-muted,#94a3b8)}

/* Skeleton shimmer (perceived speed — use .ml-skeleton on placeholder blocks). */
@keyframes ml-shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
.ml-skeleton {
  background: linear-gradient(90deg, var(--ml-surface-2) 25%, var(--ml-surface-border) 37%, var(--ml-surface-2) 63%);
  background-size: 720px 100%;
  animation: ml-shimmer 1.3s linear infinite;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) { .ml-skeleton { animation: none; } }

/* Dark mode — inc/dark-mode.php adds body.ml-dark and defines --dm-* on wp_head. */
body.ml-dark {
  --ml-surface:        var(--dm-surface, #1e293b);
  --ml-surface-2:      var(--dm-surface-2, #334155);
  --ml-surface-border: var(--dm-border, #475569);
  --ml-text:           var(--dm-text, #e2e8f0);
  --ml-text-muted:     var(--dm-text-muted, #94a3b8);
  --ml-shadow-card:    0 2px 12px rgba(0, 0, 0, .40);
  --ml-shadow-pop:     0 10px 34px rgba(0, 0, 0, .55);
}