:root {
    --mxp-purple-100: #c4b5fd;
    --mxp-purple-200: #a78bfa;
    --mxp-purple-500: #8b5cf6;
    --mxp-purple-600: #7c3aed;

    --mxp-amber-300: #fbbf24;
    --mxp-amber-500: #f59e0b;

    --mxp-green-200: #6ee7b7;
    --mxp-green-300: #34d399;
    --mxp-green-500: #10b981;

    --mxp-blue-300: #60a5fa;

    --mxp-orange-300: #fb923c;

    --mxp-red-400: #f87171;
    --mxp-red-500: #ef4444;

    --mxp-slate-100: #f1f5f9;
    --mxp-slate-200: #e2e8f0;
    --mxp-slate-400: #94a3b8;
    --mxp-slate-500: #64748b;





}

:root {
    --mxp-focus-ring: var(--mxp-purple-100);
    --mxp-focus-width: 2px;
    --mxp-focus-offset: 2px;
}