/*
 * Receptionist Max — Unified Design Tokens (v1.4.0 Launch Polish)
 * -----------------------------------------------------------------
 * Single source of brand truth shared across:
 *   - Customer connector (WP admin, light surface)
 *   - Hosted admin platform (WP admin, light surface)
 *   - Auth gateway (front-end, dark surface)
 *   - Sales theme (front-end, dark surface)
 *
 * Each surface includes this file FIRST, then its own scoped CSS.
 * Legacy aliases (--mhd-good/--mhd-bad, --mhd-green/--mhd-danger,
 * --mhd-primary2 / --mhd-primary-2) are preserved so existing
 * stylesheets keep working with no churn.
 * -----------------------------------------------------------------
 */

:root {
  /* Brand --------------------------------------------------------- */
  --mhd-brand-500: #3d7bf5;     /* primary (front-end / marketing)   */
  --mhd-brand-600: #2563eb;     /* primary (admin chrome / actions)  */
  --mhd-brand-accent: #8b5cf6;  /* purple accent for gradients       */
  --mhd-brand-cyan: #06b6d4;    /* secondary accent for gradients    */

  /* Status (synced across light + dark) --------------------------- */
  --mhd-status-success: #10b981;
  --mhd-status-success-soft: #ecfdf5;
  --mhd-status-warning: #f59e0b;
  --mhd-status-warning-soft: #fffbeb;
  --mhd-status-danger:  #ef4444;
  --mhd-status-danger-soft:  #fef2f2;
  --mhd-status-info:    #3d7bf5;
  --mhd-status-info-soft: #eff6ff;

  /* Type scale ---------------------------------------------------- */
  --mhd-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
                   BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mhd-fs-xs: 12px;
  --mhd-fs-sm: 13px;
  --mhd-fs-md: 15px;
  --mhd-fs-lg: 18px;
  --mhd-fs-xl: 22px;
  --mhd-fs-2xl: 28px;
  --mhd-fs-3xl: 34px;

  /* Radii --------------------------------------------------------- */
  --mhd-r-sm: 10px;
  --mhd-r-md: 14px;
  --mhd-r-lg: 18px;
  --mhd-r-xl: 22px;
  --mhd-r-2xl: 28px;
  --mhd-r-pill: 999px;

  /* Spacing scale ------------------------------------------------- */
  --mhd-sp-1: 4px;
  --mhd-sp-2: 8px;
  --mhd-sp-3: 12px;
  --mhd-sp-4: 16px;
  --mhd-sp-5: 20px;
  --mhd-sp-6: 24px;
  --mhd-sp-8: 32px;

  /* Motion -------------------------------------------------------- */
  --mhd-ease: cubic-bezier(.2,.7,.2,1);
  --mhd-dur-fast: 140ms;
  --mhd-dur:      200ms;
  --mhd-dur-slow: 320ms;

  /* Shared gradients ---------------------------------------------- */
  --mhd-gradient-brand: linear-gradient(135deg, var(--mhd-brand-600), var(--mhd-brand-500));
  --mhd-gradient-rich:  linear-gradient(135deg, var(--mhd-brand-500), var(--mhd-brand-accent));
  --mhd-gradient-water: linear-gradient(135deg, var(--mhd-brand-600), var(--mhd-brand-cyan));

  /* Focus ring (accessible) --------------------------------------- */
  --mhd-focus-ring: 0 0 0 3px rgba(61, 123, 245, 0.32);
}

/* Light-surface palette (WP admin pages) */
.mhd-aicc-wrap,
.mhd-platform,
.mhd-aicc-light {
  --mhd-bg:        #f6f8fb;
  --mhd-bg-elevated:#ffffff;
  --mhd-card:      #ffffff;
  --mhd-card-2:    #f8fafc;
  --mhd-text:      #0f172a;
  --mhd-text-2:    #334155;
  --mhd-muted:     #64748b;
  --mhd-muted-2:   #94a3b8;
  --mhd-line:      #e2e8f0;
  --mhd-line-2:    #cbd5e1;
  --mhd-shadow-sm: 0 4px 12px rgba(15, 23, 42, .04);
  --mhd-shadow:    0 12px 32px rgba(15, 23, 42, .07);
  --mhd-shadow-lg: 0 22px 60px rgba(15, 23, 42, .10);

  /* Canonical primary on light is the deeper blue for AA contrast */
  --mhd-primary:   var(--mhd-brand-600);
  --mhd-primary2:  var(--mhd-brand-cyan);
  --mhd-primary-2: var(--mhd-brand-cyan);

  --mhd-good:      var(--mhd-status-success);
  --mhd-green:     var(--mhd-status-success);
  --mhd-bad:       var(--mhd-status-danger);
  --mhd-danger:    var(--mhd-status-danger);
  --mhd-amber:     var(--mhd-status-warning);
  --mhd-purple:    var(--mhd-brand-accent);

  color-scheme: light;
}

/* Dark-surface palette (front-end auth, portal, marketing) */
.mhd-auth-page,
.mhd-customer-portal,
body.mhd-aicc-sales-theme,
.mhd-aicc-dark {
  --mhd-bg:        #070b16;
  --mhd-bg-2:      #0b1120;
  --mhd-bg-3:      #10192c;
  --mhd-card:      #111c31;
  --mhd-card-2:    #15213a;
  --mhd-text:      #f2f6ff;
  --mhd-text-2:    #c8d4ed;
  --mhd-muted:     #94a6cc;
  --mhd-muted-2:   #7182a8;
  --mhd-line:      #22304c;
  --mhd-line-2:    #2d3f62;
  --mhd-shadow-sm: 0 8px 24px rgba(0, 0, 0, .25);
  --mhd-shadow:    0 24px 60px rgba(0, 0, 0, .35);
  --mhd-shadow-lg: 0 30px 80px rgba(0, 0, 0, .45);

  /* On dark surfaces the brighter brand-500 reads better */
  --mhd-primary:   var(--mhd-brand-500);
  --mhd-primary-2: var(--mhd-brand-cyan);
  --mhd-primary2:  var(--mhd-brand-cyan);

  --mhd-good:      var(--mhd-status-success);
  --mhd-green:     var(--mhd-status-success);
  --mhd-bad:       var(--mhd-status-danger);
  --mhd-danger:    var(--mhd-status-danger);
  --mhd-amber:     var(--mhd-status-warning);
  --mhd-purple:    var(--mhd-brand-accent);

  --mhd-radius:    var(--mhd-r-lg);
  --mhd-radius-sm: var(--mhd-r-md);
  --mhd-container: 1180px;

  color-scheme: dark;
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mhd-dur-fast: 0ms;
    --mhd-dur: 0ms;
    --mhd-dur-slow: 0ms;
  }
}