/* =============================================================================
   m-tokens.css — Design Tokens مدرن کاپاتی (موبایل + دسکتاپ)
   نسخه: 1.0 — Linear/Vercel-inspired dark theme
   ========================================================================== */

:root {
    /* ─── Brand Gradient (آبی/بنفش) ───────────────────────────── */
    --m-brand-50:  #eef2ff;
    --m-brand-100: #e0e7ff;
    --m-brand-200: #c7d2fe;
    --m-brand-300: #a5b4fc;
    --m-brand-400: #818cf8;
    --m-brand-500: #6366f1;   /* primary */
    --m-brand-600: #4f46e5;
    --m-brand-700: #4338ca;
    --m-brand-800: #3730a3;
    --m-brand-900: #312e81;

    --m-accent-500: #8b5cf6;  /* violet/purple accent */
    --m-accent-600: #7c3aed;
    --m-accent-700: #6d28d9;

    --m-gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --m-gradient-brand-soft: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(139,92,246,.18) 50%, rgba(236,72,153,.12) 100%);
    --m-gradient-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --m-gradient-button: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    --m-gradient-button-hover: linear-gradient(135deg, #5558e6 0%, #6d28d9 100%);
    --m-gradient-glow: radial-gradient(circle at 30% 0%, rgba(139,92,246,.35), transparent 50%), radial-gradient(circle at 70% 100%, rgba(99,102,241,.25), transparent 50%);

    /* ─── Surfaces (تاریک، عمیق) ────────────────────────────── */
    --m-bg:           #0a0a0f;   /* بستر اصلی */
    --m-bg-2:         #0e0e15;   /* پشت کارت‌ها */
    --m-surface:      #16161d;   /* سطح کارت */
    --m-surface-2:    #1e1e28;   /* سطح بالاتر */
    --m-surface-3:    #2a2a36;   /* سطح اکتیو */
    --m-surface-hover:#1f1f2a;
    --m-overlay:      rgba(10,10,15,.7);
    --m-overlay-strong: rgba(10,10,15,.92);

    /* ─── Borders ───────────────────────────────────────────── */
    --m-border:       rgba(255,255,255,.06);
    --m-border-2:     rgba(255,255,255,.10);
    --m-border-strong: rgba(255,255,255,.18);
    --m-border-brand: rgba(99,102,241,.4);

    /* ─── Text ─────────────────────────────────────────────── */
    --m-text:         #f4f4f5;
    --m-text-2:       #d4d4d8;
    --m-text-muted:   #a1a1aa;
    --m-text-faint:   #71717a;
    --m-text-disabled:#52525b;
    --m-text-on-brand:#ffffff;

    /* ─── Status colors ─────────────────────────────────────── */
    --m-success:      #10b981;
    --m-success-bg:   rgba(16,185,129,.15);
    --m-warning:      #f59e0b;
    --m-warning-bg:   rgba(245,158,11,.15);
    --m-danger:       #ef4444;
    --m-danger-bg:    rgba(239,68,68,.15);
    --m-info:         #06b6d4;
    --m-info-bg:      rgba(6,182,212,.15);

    /* ─── Typography ───────────────────────────────────────── */
    --m-font:         'YekanBakh', 'Vazirmatn', 'Tahoma', system-ui, -apple-system, sans-serif;
    --m-font-en:      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --m-fs-xs:    11px;
    --m-fs-sm:    13px;
    --m-fs-base:  15px;
    --m-fs-md:    16px;   /* input — جلوگیری از iOS zoom */
    --m-fs-lg:    16px;
    --m-fs-xl:    20px;
    --m-fs-2xl:   24px;
    --m-fs-3xl:   32px;
    --m-fs-4xl:   40px;

    --m-fw-normal:    400;
    --m-fw-medium:    500;
    --m-fw-semibold:  600;
    --m-fw-bold:      700;
    --m-fw-black:     900;

    --m-lh-tight:   1.2;
    --m-lh-normal:  1.5;
    --m-lh-relaxed: 1.7;

    /* ─── Spacing (4px scale) ───────────────────────────────── */
    --m-s-0:   0;
    --m-s-1:   4px;
    --m-s-2:   8px;
    --m-s-3:   12px;
    --m-s-4:   16px;
    --m-s-5:   20px;
    --m-s-6:   24px;
    --m-s-7:   32px;
    --m-s-8:   40px;
    --m-s-9:   48px;
    --m-s-10:  64px;
    --m-s-11:  80px;

    /* ─── Border radius ─────────────────────────────────────── */
    --m-r-sm:   6px;
    --m-r-md:   10px;
    --m-r-lg:   14px;
    --m-r-xl:   20px;
    --m-r-2xl:  28px;
    --m-r-full: 9999px;

    /* ─── Shadows (نرم و عمیق برای dark theme) ──────────────── */
    --m-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --m-shadow-md: 0 4px 12px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
    --m-shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
    --m-shadow-xl: 0 24px 64px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4);
    --m-shadow-glow:    0 0 0 1px rgba(99,102,241,.3), 0 8px 24px rgba(99,102,241,.25);
    --m-shadow-glow-lg: 0 0 0 1px rgba(99,102,241,.4), 0 16px 48px rgba(99,102,241,.35);
    --m-shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);

    /* ─── Layout dimensions (desktop از 1200px — تبلت UI موبایل) ─ */
    --m-tab-h:        64px;
    --m-app-bar-h:    56px;
    --m-sidebar-w:    280px;
    --m-sidebar-w-collapsed: 72px;
    --m-content-max-w: 1280px;

    /* ─── Safe areas (iOS notch) ────────────────────────────── */
    --m-safe-top:    env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left:   env(safe-area-inset-left, 0px);
    --m-safe-right:  env(safe-area-inset-right, 0px);

    /* ─── Z-index ───────────────────────────────────────────── */
    --m-z-base:     1;
    --m-z-sticky:   10;
    --m-z-fixed:    100;
    --m-z-overlay:  900;
    --m-z-sheet:    1000;
    --m-z-modal:    1100;
    --m-z-toast:    1200;
    --m-z-tab-bar:  150;
    --m-z-app-bar:  140;

    /* ─── Motion ────────────────────────────────────────────── */
    --m-ease-out:    cubic-bezier(.16,1,.3,1);
    --m-ease-in-out: cubic-bezier(.4,0,.2,1);
    --m-ease-spring: cubic-bezier(.5,1.5,.5,1);

    --m-dur-fast:    150ms;
    --m-dur-normal:  250ms;
    --m-dur-slow:    400ms;
    --m-dur-slower:  600ms;

    --m-transition:           all var(--m-dur-normal) var(--m-ease-out);
    --m-transition-fast:      all var(--m-dur-fast) var(--m-ease-out);
    --m-transition-transform: transform var(--m-dur-normal) var(--m-ease-out);

    /* ─── Tap target minimum (accessibility) ───────────────── */
    --m-tap-target: 44px;
}

/* پشتیبانی از prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --m-dur-fast:   0ms;
        --m-dur-normal: 0ms;
        --m-dur-slow:   0ms;
        --m-dur-slower: 0ms;
    }
}