/* ═══════════════════════════════════════════════════════════════
   Mabsut Frontend Base — CSS Variables & Reset
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Brand colors */
    --mbs-brand:        #1a5fb4;
    --mbs-brand-hover:  #15488a;
    --mbs-brand-soft:   #e8f0fb;
    --mbs-accent:       #c2185b;
    --mbs-accent-hover: #a01548;
    --mbs-teal:         #26a69a;

    /* Semantic */
    --mbs-success:      #10b981;
    --mbs-warning:      #f59e0b;
    --mbs-danger:       #ef4444;
    --mbs-info:         #3b82f6;

    /* Surfaces */
    --mbs-bg-page:      #f4f6f9;
    --mbs-bg-surface:   #ffffff;
    --mbs-bg-elevated:  #ffffff;
    --mbs-bg-muted:     #f1f3f6;
    --mbs-bg-hover:     #eef1f5;
    --mbs-bg-dark:      #0f172a;

    /* Footer / Indigo palette */
    --mbs-indigo-900:   #3548a0;   /* نیلی تیره اصلی */
    --mbs-indigo-800:   #3d52b5;
    --mbs-indigo-700:   #455ac8;
    --mbs-indigo-600:   #5568d5;
    --mbs-indigo-500:   #6674e0;
    --mbs-indigo-100:   #e0e5f5;
    --mbs-indigo-50:    #eef1fa;
    --mbs-bg-indigo:    #3548a0;   /* رنگ پس‌زمینه فوتر */
    --mbs-indigo-text:  #eef2ff;   /* متن روی نیلی */
    --mbs-indigo-muted: #c8d1f0;   /* متن محو روی نیلی */
    --mbs-indigo-border: rgba(255,255,255,.08);

    /* Borders */
    --mbs-border:       #e5e7eb;
    --mbs-border-strong:#d1d5db;

    /* Text */
    --mbs-text-primary:  #0f172a;
    --mbs-text-secondary:#475569;
    --mbs-text-muted:    #94a3b8;
    --mbs-text-inverse:  #ffffff;

    /* Layout */
    --mbs-container:    1280px;
    --mbs-container-wide: 1440px;
    --mbs-gutter:       16px;
    --mbs-header-h:     64px;
    --mbs-nav-h:        48px;

    /* Radius */
    --mbs-radius-sm:    6px;
    --mbs-radius-md:    10px;
    --mbs-radius-lg:    14px;
    --mbs-radius-xl:    20px;
    --mbs-radius-full:  9999px;

    /* Shadows */
    --mbs-shadow-xs:    0 1px 2px rgba(15,23,42,.05);
    --mbs-shadow-sm:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --mbs-shadow-md:    0 4px 10px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --mbs-shadow-lg:    0 10px 24px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
    --mbs-shadow-xl:    0 20px 40px rgba(15,23,42,.14);

    /* Motion */
    --mbs-ease:         cubic-bezier(.2,.8,.2,1);
    --mbs-t-fast:       150ms;
    --mbs-t-base:       250ms;
    --mbs-t-slow:       400ms;

    /* Z-index */
    --mbs-z-header:     100;
    --mbs-z-nav:        90;
    --mbs-z-dropdown:   200;
    --mbs-z-modal:      1000;
    --mbs-z-toast:      1100;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --mbs-bg-page:      #0b1220;
        --mbs-bg-surface:   #131a2a;
        --mbs-bg-elevated:  #1a2233;
        --mbs-bg-muted:     #1e293b;
        --mbs-bg-hover:     #263349;
        --mbs-border:       #2a3446;
        --mbs-border-strong:#3b4760;
        --mbs-text-primary: #f1f5f9;
        --mbs-text-secondary:#94a3b8;
        --mbs-text-muted:   #64748b;
        --mbs-brand-soft:   #0c2340;
    }
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.mbs-body {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mbs-text-primary);
    background: var(--mbs-bg-page);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }

.mbs-container {
    width: 100%;
    max-width: var(--mbs-container);
    margin: 0 auto;
    padding: 0 var(--mbs-gutter);
}

.mbs-skip-link {
    position: absolute;
    top: -100px;
    right: 20px;
    background: var(--mbs-brand);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--mbs-radius-md);
    z-index: 9999;
    transition: top var(--mbs-t-base) var(--mbs-ease);
}
.mbs-skip-link:focus { top: 20px; }

.mbs-main { min-height: 60vh; }

/* Utility */
.mbs-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skeleton */
@keyframes mbs-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.mbs-skeleton {
    background: linear-gradient(90deg, var(--mbs-bg-muted) 25%, var(--mbs-bg-hover) 50%, var(--mbs-bg-muted) 75%);
    background-size: 400px 100%;
    animation: mbs-shimmer 1.4s infinite linear;
    border-radius: var(--mbs-radius-sm);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    :root {
        --mbs-gutter: 12px;
        --mbs-header-h: 56px;
        --mbs-nav-h: 44px;
    }
    body.mbs-body { font-size: 14px; }
}

/* Preview Mode Banner */
.mbs-preview-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-radius: var(--mbs-radius-lg);
    box-shadow: var(--mbs-shadow-lg);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: mbs-preview-pulse 2s ease-in-out infinite;
}
@keyframes mbs-preview-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}