/* ============================================================================
   MP TOKENS — the single source of truth for spacing, shape, depth and type.
   ============================================================================

   COLOUR IS NOT DEFINED HERE ON PURPOSE.

   inc/color-skins.php already injects the palette into <head> at wp_head
   priority 5 as :root { --accent, --accent-50…600, --bg, --bg-soft,
   --text-primary, --text-secondary, --text-muted, --text-on-accent, … }.
   Enqueued stylesheets print at priority 8, so those variables always exist
   by the time this file is parsed. Everything below CONSUMES them rather than
   re-declaring them, so switching skin still repaints the whole UI.

   Every var() call carries a literal fallback so the site degrades gracefully
   if the skin block is ever missing (e.g. a cached page, or an admin screen
   where mp_output_skin_css() doesn't run).

   What this file adds is the stuff the skin system never covered — and which
   was previously hardcoded ad-hoc in ~20 separate inline <style> blocks:
   spacing rhythm, corner radii, shadow depth, type scale and status colours.
   ========================================================================= */

:root {

  /* ── Status colours ──────────────────────────────────────────────────────
     Deliberately NOT skinned: green must read as "available/success" and red
     as "sold/urgent" no matter which brand skin is active. These were the
     values already scattered through monetize.php, the CRM and the alerts UI,
     now stated once.                                                       */
  --mp-success:      #16A34A;
  --mp-success-soft: #F0FDF4;
  --mp-success-line: #BBF7D0;
  --mp-warn:         #D97706;
  --mp-warn-soft:    #FFFBEB;
  --mp-warn-line:    #FDE68A;
  --mp-danger:       #DC2626;
  --mp-danger-soft:  #FEF2F2;
  --mp-danger-line:  #FECACA;
  --mp-info:         #2563EB;
  --mp-info-soft:    #EFF6FF;
  --mp-info-line:    #BFDBFE;
  --mp-whatsapp:     #25D366;

  /* ── Neutrals ───────────────────────────────────────────────────────────
     Surface/​border greys pulled from the active skin where it defines them.  */
  --mp-surface:      var(--bg, #FFFFFF);
  --mp-surface-soft: var(--bg-soft, #FAFAFA);
  --mp-line:         var(--accent-200, #E2E8F0);
  --mp-line-soft:    var(--accent-100, #F1F5F9);
  --mp-ink:          var(--text-primary, #0F172A);
  --mp-ink-soft:     var(--text-secondary, #475569);
  --mp-ink-muted:    var(--text-muted, #94A3B8);

  /* ── Spacing — 4px rhythm ───────────────────────────────────────────── */
  --mp-1:  .25rem;   /*  4px */
  --mp-2:  .5rem;    /*  8px */
  --mp-3:  .75rem;   /* 12px */
  --mp-4:  1rem;     /* 16px */
  --mp-5:  1.25rem;  /* 20px */
  --mp-6:  1.5rem;   /* 24px */
  --mp-8:  2rem;     /* 32px */
  --mp-10: 2.5rem;   /* 40px */
  --mp-12: 3rem;     /* 48px */

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --mp-r-sm:   6px;
  --mp-r:      10px;
  --mp-r-lg:   14px;
  --mp-r-xl:   18px;
  --mp-r-pill: 999px;

  /* ── Depth ──────────────────────────────────────────────────────────── */
  --mp-shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --mp-shadow:    0 2px 10px -2px rgba(15,23,42,.10);
  --mp-shadow-lg: 0 8px 28px -10px rgba(15,23,42,.22);

  /* ── Type scale — fluid, so one set works phone → desktop ───────────── */
  --mp-text-xs: .72rem;
  --mp-text-sm: .82rem;
  --mp-text-md: .92rem;
  --mp-text-lg: clamp(1rem, 2.2vw, 1.15rem);
  --mp-text-xl: clamp(1.15rem, 3vw, 1.45rem);
  --mp-text-2xl: clamp(1.35rem, 4vw, 1.9rem);

  --mp-weight-normal: 500;
  --mp-weight-bold:   700;
  --mp-weight-black:  800;

  /* ── Motion ─────────────────────────────────────────────────────────────
     One duration everywhere. Respected by the reduced-motion block below.  */
  --mp-ease:  cubic-bezier(.4, 0, .2, 1);
  --mp-fast:  .15s;
  --mp-slow:  .3s;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --mp-container: 1200px;
  --mp-tap:       44px;   /* minimum touch target — WCAG 2.5.5 / iOS HIG */
}

/* Users who ask their OS for less motion get none of our transitions.
   Cheap to honour and it's an accessibility requirement, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  :root { --mp-fast: 0s; --mp-slow: 0s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
